[分享]css3手风琴导航栏

CSS3手风琴导航栏是一种非常炫酷的网页导航栏，它可以很好地展示网站的菜单，让用户更加清晰地了解网站的结构。在这篇文章中，我们将介绍如何使用CSS3来制作一个手风琴式的导航栏。/ HTML结构 / ...

CSS3手风琴导航栏是一种非常炫酷的网页导航栏，它可以很好地展示网站的菜单，让用户更加清晰地了解网站的结构。在这篇文章中，我们将介绍如何使用CSS3来制作一个手风琴式的导航栏。

/* HTML结构 */
<ul class="accordion-menu">
  <li>
    <div class="accordion-title">菜单1</div>
    <ul class="accordion-content">
      <li><a href="#">子菜单1</a></li>
      <li><a href="#">子菜单2</a></li>
      <li><a href="#">子菜单3</a></li>
    </ul>
  </li>
  <li>
    <div class="accordion-title">菜单2</div>
    <ul class="accordion-content">
      <li><a href="#">子菜单4</a></li>
      <li><a href="#">子菜单5</a></li>
      <li><a href="#">子菜单6</a></li>
    </ul>
  </li>
  <li>
    <div class="accordion-title">菜单3</div>
    <ul class="accordion-content">
      <li><a href="#">子菜单7</a></li>
      <li><a href="#">子菜单8</a></li>
      <li><a href="#">子菜单9</a></li>
    </ul>
  </li>
</ul>

/* CSS样式 */
.accordion-menu {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.accordion-title {
  display: block;
  cursor: pointer;
  font-weight: bold;
  font-size: 18px;
  padding: 10px;
  background-color: #f0f0f0;
}

.accordion-content {
  display: none;
  padding: 0;
  list-style: none;
}

.accordion-content li a {
  display: block;
  padding: 10px;
  background-color: #ffffff;
  color: #333333;
  text-decoration: none;
}

/* 展开状态 */
li.active .accordion-content {
  display: block;
} 

在这段CSS代码中，我们首先设置了导航栏的样式。其中，我们使用了display属性来将accordion-content部分设置为不可见。接下来，我们为accordion-title添加点击事件，当点击它时切换到展开状态。最后，我们可以使用.active类来为展开的accordion-content区域设置样式。

通过以上代码，我们可以完成手风琴导航栏的基本样式，但是它还有更多的可定制性，可以根据不同的需求进行不同的设置。希望这篇文章能对大家理解CSS3手风琴导航栏有所帮助。