纯CSS3实现汉堡(三横杠)菜单点击变为叉(X)关闭图标

技术频道 - html技术

纯CSS3实现汉堡(三横杠)菜单点击变为叉(X)关闭图标

作者:admin 时间:2023-6-15 14:55:16 浏览:

关于汉堡（三横杠）菜单，前面曾介绍过两款，它们各有千秋，样式不同，转换过渡动画也不同，请参阅文章：

今天我继续介绍一款漂亮的，纯CSS3实现的，汉堡(三横杠)菜单，点击变为叉(X)关闭图标。

效果图

纯CSS3实现汉堡(三横杠)菜单点击变为叉(X)关闭图标

demo download

示例介绍

我们今天讨论一下基于HTML、CSS3转换成关闭图标的汉堡菜单设计。它是一个汉堡菜单按钮，但是，它具有汉堡菜单按钮所需的广泛亮点。吸睛的红色底色，巨大的菜单图标，精彩的动画推进。

当你将鼠标悬停在菜单图标上时，并没有非常显着的悬停效果。单击它后，就开始变得有趣起来。按钮上有 3 条水平线，就像其他一些汉堡包按钮一样。单击时，所有三个按钮合并为一个水平按钮。然后变成十字标志。你也可以点击它来折叠“X”图标。

HTML

<div class="menu-wrapper">
  <div class="hamburger-menu" onclick="this.classList.toggle('animate')" ></div>
</div>

HTML代码结构很简单，外面是一个div标签，其class属性值为menu-wrapper。这是菜单的容器。

内层也是一个div标签，其class属性值为hamburger-menu，它还有一个onclick属性，值为this.classList.toggle('animate')，这是菜单按钮的点击事件。

CSS

.menu-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100px;
  height: 60px;
  cursor: pointer;
}
.hamburger-menu,
.hamburger-menu:after,
.hamburger-menu:before {
  width: 100px;
  height: 10px;
}
.hamburger-menu {
  position: relative;
  transform: translateY(25px);
  background: white;
  transition: all 0ms 300ms;
}
.hamburger-menu.animate {
  background: rgba(255, 255, 255, 0);
}
.hamburger-menu:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 25px;
  background: white;
  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hamburger-menu:after {
  content: "";
  position: absolute;
  left: 0;
  top: 25px;
  background: white;
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hamburger-menu.animate:after {
  top: 0;
  transform: rotate(45deg);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hamburger-menu.animate:before {
  bottom: 0;
  transform: rotate(-45deg);
  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hamburger-menu 是横线的样式。在汉堡菜单的布局上这是第二条横杠。

.hamburger-menu:before 伪类元素定义第一条横杠。

.hamburger-menu:after 伪类元素定义第三条横杠。

三横杠和叉图标的转换，用到CSS3的 transition 和 transform 属性，请参阅文章了解更多这两个属性的使用。

CSS3 transition 和 transform 属性介绍

JavaScript

该示例中，JavaScript 或 jQuery 不是必须的，不过你同样可以用 JavaScript 或 jQuery 来实现鼠标点击事件。完整代码如下：

<div class="menu-wrapper">
  <div class="hamburger-menu"></div>   
</div>
   
<script src='jquery-3.2.1.min.js'></script>
<script>
/* jquery 方法 */
(function () {
  $('.menu-wrapper').on('click', function () {
    $('.hamburger-menu').toggleClass('animate');
  });
})();


/* javascript 方法1 */
//document.querySelector('.hamburger-menu').onclick = function (){document.querySelector('.hamburger-menu').classList.toggle("animate");}


/* javascript 方法2 */
/*
const icon = document.querySelector('.hamburger-menu');
icon.addEventListener('click', (event) =>
{
    icon.classList.toggle("animate");
});
*/


/* javascript 方法3 */
/*
const icons = document.querySelectorAll('.hamburger-menu');
icons.forEach(icon =>
{
  icon.addEventListener('click', (event) =>
  {
    icon.classList.toggle("animate");
  });
});
*/
</script>