[分享]css3折纸菜单

CSS3的出现，带来了很多新的效果，其中之一就是折纸菜单效果。这个效果的实现，其实非常简单，只需要掌握一些CSS3的技巧就可以了。折纸菜单的HTML结构如下： 菜单项1 菜单项2 菜单...

CSS3的出现，带来了很多新的效果，其中之一就是折纸菜单效果。

这个效果的实现，其实非常简单，只需要掌握一些CSS3的技巧就可以了。

折纸菜单的HTML结构如下：

<div class="wrapper">
  <div class="menu-item">
    <span>菜单项1</span>
    <div class="fold"></div>
  </div>
  <div class="menu-item">
    <span>菜单项2</span>
    <div class="fold"></div>
  </div>
  <div class="menu-item">
    <span>菜单项3</span>
    <div class="fold"></div>
  </div>
  <div class="menu-item">
    <span>菜单项4</span>
    <div class="fold"></div>
  </div>
</div>

其中，.wrapper是折纸菜单的容器，.menu-item是每一个菜单项，.fold是折叠的部分。

在CSS中，我们需要给.menu-item添加一些样式，来实现折叠的效果。

.menu-item {
  position: relative;
  width: 200px;
  padding: 10px;
  background-color: #f0f0f0;
  margin-bottom: 10px;
}

.menu-item span {
  display: block;
  font-weight: bold;
}

.fold {
  position: absolute;
  right: 0;
  top: 10px;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-left: 15px solid #f0f0f0;
  border-bottom: 15px solid transparent;
}

这段CSS代码中，.menu-item是菜单项的样式，.menu-item span是每个菜单项的标题，.fold是折叠的部分的样式。

具体来说，我们为.fold添加了一个三角形的样式，使得它能够在菜单项的右上角显示。

接下来，我们需要添加一些JavaScript代码，来实现菜单项的折叠与展开。

document.querySelectorAll(".menu-item").forEach(function(item) {
  item.addEventListener("click", function() {
    this.classList.toggle("active");
  });
});

这段JavaScript代码中，我们使用querySelectorAll获取了所有的菜单项，然后为它们添加了一个click事件，当用户点击菜单项时，我们就在菜单项上添加一个active类名，来实现菜单项的折叠与展开。

最后，我们只需要添加一些CSS3的动画效果，来使得菜单项的折叠与展开更加生动与流畅。

.active .fold {
  width: 15px;
  height: 15px;
  border-left: 0;
  border-top: 0;
  border-right: 15px solid #f0f0f0;
  border-bottom: 15px solid #f0f0f0;
  transform: rotate(180deg);
  transition: all .3s ease-out;
}

这段CSS代码中，我们为.active .fold添加了一个动画效果，使得折纸菜单的折叠与展开更加流畅与生动。

通过这样的简单代码，我们就可以轻松地实现一个漂亮的折纸菜单效果，让用户在使用我们的网站时，拥有更好的体验。