纯CSS3实现的汉堡(三条横杠)菜单，点击变叉

技术频道 - html技术

纯CSS3实现的汉堡(三条横杠)菜单，点击变叉

作者:admin 时间:2023-6-15 14:7:31 浏览:

本文介绍一款纯CSS实现的汉堡(三条横杠)菜单，点击变叉，这款菜单非常常见，简单又大方。

效果图

纯CSS实现的汉堡(三条横杠)菜单，点击变叉

HTML

<div class='wrapper'>
    <div class="icon nav-icon" onclick="this.classList.toggle('open')" ><span></span><span></span><span></span></div>
</div>

外层是一个class属性值为wrapper的div标签，这是菜单的容器。

内层是一个class属性值为“icon nav-icon”的div标签，它有一个onclick属性，值为“this.classList.toggle('open')”，其作用是鼠标点击时触发图标转变的动画。

内层div标签里，还有三个<span></span>标签，代表是三条横杠。

CSS

1、汉堡(三条横杠)菜单

三个span标签，通过CSS设置，布局为三条横杠的样式。

.wrapper {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -20%);
}
.wrapper .icon {
  margin: 20px;
}
.nav-icon {
  width: 35px;
  height: 30px;
  margin: 10px 10px;
  position: relative;
  cursor: pointer;
  display: inline-block;
}
.nav-icon span {
  background-color: #fff;
  position: absolute;
  border-radius: 2px;
  transition: .3s cubic-bezier(.8, .5, .2, 1.4);
  width: 100%;
  height: 4px;
  transition-duration: 500ms;
}
.nav-icon span:nth-child(1) {
  top: 0px;
  left: 0px;
}
.nav-icon span:nth-child(2) {
  top: 13px;
  left: 0px;
  opacity: 1;
}
.nav-icon span:nth-child(3) {
  bottom: 0px;
  left: 0px;
}

2、叉（X）

使用 transform: rotate(); 属性旋转上下两条横杠45度，请参阅文章：

实例分析CSS3 transform: translateY() rotate() rotateY() rotateX()

中间的横杠设为透明不可见 opacity: 0;。

.nav-icon.open span:nth-child(1) {
  transform: rotate(45deg);
  top: 13px;
}
.nav-icon.open span:nth-child(2) {
  opacity: 0;
}
.nav-icon.open span:nth-child(3) {
  transform: rotate(-45deg);
  top: 13px;
}

3、下面是汉堡(三条横杠)菜单鼠标悬停效果

鼠标移到汉堡(三条横杠)菜单上时，上下两条横杠有轻微的旋转。这里使用了 css3 的 transform: rotate() scaleY(); 属性，请参阅文章：

CSS3 transform: scale() 缩放转换【实例分析演示】

.nav-icon:not(.open):hover span:nth-child(1) {
  transform: rotate(-3deg) scaleY(1.1);
}
.nav-icon:not(.open):hover span:nth-child(2) {
  transform: rotate(3deg) scaleY(1.1);
}
.nav-icon:not(.open):hover span:nth-child(3) {
  transform: rotate(-4deg) scaleY(1.1);
}

JavaScript

该示例的JavaScript不是必须的。你可以把html代码里div的onclick事件通过单独的JavaScript来实现。完整代码如下：

<body>
  <div class='wrapper'>
    <div class="icon nav-icon"><span></span><span></span><span></span></div>
  </div>
</body>
<script>
/* 鼠标点击事件用JS触发 */
const icons = document.querySelectorAll('.icon');
icons.forEach(icon =>
{
  icon.addEventListener('click', (event) =>
  {
    icon.classList.toggle("open");
  });
});  
</script>

总结

本文介绍了一款纯CSS3实现的汉堡(三条横杠)菜单，点击变叉，简单又大方，被很多移动网页使用。喜欢的话可以收藏本页，也可以直接下载源码备用。

您可能对以下文章也感兴趣

相关文章