左侧竖直分类导航菜单CSS3代码

当前位置：电视猫 > JavaScript>

电视猫时间： 2024-08-27 16:40:43

　　左侧竖直分类导航菜单CSS3代码

CSS3 实现左侧竖直分类导航菜单

理解需求

在设计左侧竖直分类导航菜单时，我们通常需要考虑以下几点：

样式： 菜单项的样式、悬停效果、选中状态等。
布局： 菜单的整体布局、菜单项的排列方式等。
交互： 点击菜单项的响应、子菜单的展开收起等。
响应式设计： 适应不同屏幕尺寸。

基本结构与样式

HTML

<nav class="vertical-nav">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li>
      <a href="#">产品</a>
      <ul class="sub-menu">
        <li><a href="#">产品一</a></li>
        <li><a href="#">产品二</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS

.vertical-nav {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 200px;
  background-color: #f0f0f0;
  padding: 20px;
  box-sizing: border-box;
}

.vertical-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vertical-nav li {
  margin-bottom: 10px;
}

.vertical-nav a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

.vertical-nav a:hover {
  background-color: #eee;
}

.sub-menu {
  display: none;
}

.vertical-nav li:hover .sub-menu {
  display: block;
}

代码解释

布局： 使用 position: fixed 将导航菜单固定在左侧，设置 height 和 width 控制尺寸。
样式： 设置菜单项的样式，包括字体、颜色、间距等。
子菜单： 默认隐藏子菜单，当鼠标悬停在父菜单项上时显示。

增强效果

动画效果： 使用 CSS3 的 transition 或 animation 属性为菜单项添加过渡效果或动画效果。
图标： 使用字体图标或图片图标来美化菜单项。
响应式设计： 使用媒体查询来适应不同屏幕尺寸。
JavaScript交互： 使用 JavaScript 控制菜单的展开和收起，实现更复杂的交互效果。

完整示例

HTML

<!DOCTYPE html>
<html>
<head>
  <title>左侧竖直导航菜单</title>
  <style>
    /* CSS样式同上 */
  </style>
</head>
<body>
  <nav class="vertical-nav">
    </nav>
</body>
</html>