[分享]css3折叠二级导航菜单

CSS3 折叠二级导航菜单 在网页开发中，导航菜单是一个非常重要的元素。而折叠二级导航菜单则是一个很常见的需求。今天我们来学习一下如何使用 CSS3 实现折叠二级导航菜单。 首先我们需要一个 HTML...

CSS3 折叠二级导航菜单
在网页开发中，导航菜单是一个非常重要的元素。而折叠二级导航菜单则是一个很常见的需求。今天我们来学习一下如何使用 CSS3 实现折叠二级导航菜单。
首先我们需要一个 HTML 结构来实现二级导航菜单，如下所示：

html
<nav>
  <ul>
    <li><a href="#">菜单1</a></li>
    <li>
      <a href="#">菜单2</a>
      <ul>
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单2</a></li>
        <li><a href="#">子菜单3</a></li>
      </ul>
    </li>
    <li><a href="#">菜单3</a></li>
    <li><a href="#">菜单4</a></li>
  </ul>
</nav> 

我们可以看到，二级导航菜单是通过嵌套的 `ul` 元素来实现的。我们要做的是让二级菜单默认是折叠的，并且在点击一级菜单时展开对应的二级菜单。
首先我们要对二级菜单进行隐藏：

css
nav ul ul {
  display: none;
} 

这段代码会把所有二级菜单都隐藏起来。
接下来，我们要实现点击一级菜单展开对应的二级菜单。我们可以使用伪类 `:hover` 或伪类 `:focus` 来实现这个效果。但为了让移动端用户也能通过点击来展开二级菜单，我们这里使用了伪类 `:target`，通过在网址中加上锚点，来指定需要展开的二级菜单。

css
nav ul li:target > ul {
  display: block;
} 

这段代码的含义是，当点击一级菜单时给它添加锚点，然后以此锚点作为选择器，将其下的子菜单展开。
最后，我们需要一些动画效果来使菜单的切换更具流畅感。这里我们使用了 CSS3 的过渡效果 `transition`。代码如下：

css
nav ul ul {
  display: none;
  transition: display 0.5s linear;
} 

这样就可以让菜单的展开和关闭具有一定的流畅感。
最终的 CSS 代码如下：

css
nav ul ul {
  display: none;
  transition: display 0.5s linear;
}
<br>
nav ul li:target > ul {
  display: block;
} 

好了，现在我们已经可以实现折叠二级导航菜单了！