左侧竖直分类导航菜单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>