[分享]css3手风琴菜单

CSS3手风琴菜单可以通过CSS3实现，用于展示多个项目并允许用户选择其中一个。它的特点是，只显示当前选中项目的内容，其他项目则被压缩或隐藏起来。.accordion { width: 100; } ...

CSS3手风琴菜单可以通过CSS3实现，用于展示多个项目并允许用户选择其中一个。它的特点是，只显示当前选中项目的内容，其他项目则被压缩或隐藏起来。

.accordion {
  width: 100%;
}

.accordion-item {
  width: 100%;
  overflow: hidden;
  transition: all .3s ease-in-out;
  max-height: 0;
}

.accordion-item.active {
  max-height: 500px;
}

.accordion-item-header {
  cursor: pointer;
  padding: 10px;
  background-color: #f7f7f7;
  border: 1px solid #ddd;
}

.accordion-item-content {
  padding: 10px;
  border: 1px solid #ddd;
} 

以上是CSS代码。首先定义了一个手风琴菜单的容器，宽度为100%。然后定义了每个菜单项的样式，包括宽度、溢出隐藏、动画过渡和最大高度为0。当某个菜单项被激活时，将显示出来，高度设为500px。

下面是HTML代码，需要将每个菜单项的标题和内容分别包裹在一个元素内并加上相应的类名。

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-item-header">菜单标题1</div>
    <div class="accordion-item-content">菜单内容1</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-item-header">菜单标题2</div>
    <div class="accordion-item-content">菜单内容2</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-item-header">菜单标题3</div>
    <div class="accordion-item-content">菜单内容3</div>
  </div>
</div> 

使用CSS3的手风琴菜单可以为网站增加一些交互性，提高用户体验。通过修改样式可以达到不同的效果，例如更改宽度、颜色、动画效果等。