[分享]css3怎么实现折叠导航

使用CSS3实现折叠导航是一个很常见的需求，这里我们介绍一种简单的方法。 首先，在HTML中，我们需要建立一个包含导航菜单的ul列表，并且为其添加一个类名，比如"navlist"。...

使用CSS3实现折叠导航是一个很常见的需求，这里我们介绍一种简单的方法。
首先，在HTML中，我们需要建立一个包含导航菜单的ul列表，并且为其添加一个类名，比如"nav-list"。每个菜单项也需要添加一个类名"nav-item"，并为每个二级菜单添加一个类名"sub-menu"。
然后，在CSS中，我们需要隐藏二级菜单以及对应的箭头，以及设置默认状态下的样式。我们可以通过display:none隐藏二级菜单，通过transform:rotate(180deg)旋转箭头。我们可以在"nav-list"类下加入下面的代码实现默认状态下的样式：

.nav-list .sub-menu{
  display:none;
}
<br>
.nav-list .nav-item > a:after{
  content:'\25bc';
  transform:rotate(0deg);
}
<br>
.nav-list .opened .nav-item > a:after{
  transform:rotate(180deg);
} 

接下来，我们需要为箭头添加交互效果，使得点击菜单项时，能够打开或关闭对应的二级菜单，以及旋转箭头以表示当前状态。我们需要使用CSS3的伪类选择器:checked和兄弟选择器+来实现这个效果。我们可以在"nav-list"类下加入下面的代码：

.nav-list .nav-checkbox{
  display:none;
}
<br>
.nav-list .nav-checkbox:checked ~ .sub-menu{
  display:block;
}
<br>
.nav-list .nav-item > a:after{
  content:'\25bc';
  transform:rotate(0deg);
}
<br>
.nav-list .nav-checkbox:checked ~ .nav-item > a:after{
  transform:rotate(180deg);
}
<br>
.nav-list .nav-checkbox:checked ~ .opened{
  margin-top:0;
}
<br>
.nav-list .nav-item > a{
  display:block;
}
<br>
.nav-list .sub-menu .nav-item > a{
  padding-left:30px;
}
<br>
.nav-list .sub-menu .nav-item > a:after{
  display:none;
}
<br>

最后，在HTML中，我们需要添加一个隐藏的input元素，用于存储当前菜单的状态，并在每个菜单项中添加标签绑定对应的input元素。我们可以在HTML中添加以下代码：

<ul class="nav-list">
  <li class="nav-item">
    <label for="item-1">菜单项1</label>
    <input type="checkbox" id="item-1" class="nav-checkbox">
    <ul class="sub-menu">
      <li class="nav-item">
        <a href="#">子菜单项1</a>
      </li>
      <li class="nav-item">
        <a href="#">子菜单项2</a>
      </li>
    </ul>
  </li>
  <li class="nav-item">
    <label for="item-2">菜单项2</label>
    <input type="checkbox" id="item-2" class="nav-checkbox">
    <ul class="sub-menu">
      <li class="nav-item">
        <a href="#">子菜单项1</a>
      </li>
      <li class="nav-item">
        <a href="#">子菜单项2</a>
      </li>
    </ul>
  </li>
</ul> 

这样，我们就成功地实现了折叠导航，并为菜单项添加了交互效果。简单易操作，适用于大多数网站页面上的导航菜单。