久久亚洲综合成人网2019,亚洲精品国产五月综合网

技術(shù)頻道 - html技術(shù)

純CSS3實現(xiàn)漢堡(三橫杠)菜單點擊變?yōu)椴?X)關(guān)閉圖標(biāo)

作者:admin 時間:2023-6-15 14:55:16 瀏覽:

關(guān)于漢堡（三橫杠）菜單，前面曾介紹過兩款，它們各有千秋，樣式不同，轉(zhuǎn)換過渡動畫也不同，請參閱文章：

今天我繼續(xù)介紹一款漂亮的，純CSS3實現(xiàn)的，漢堡(三橫杠)菜單，點擊變?yōu)椴?X)關(guān)閉圖標(biāo)。

效果圖

純CSS3實現(xiàn)漢堡(三橫杠)菜單點擊變?yōu)椴?X)關(guān)閉圖標(biāo)

demo download

示例介紹

我們今天討論一下基于HTML、CSS3轉(zhuǎn)換成關(guān)閉圖標(biāo)的漢堡菜單設(shè)計。它是一個漢堡菜單按鈕，但是，它具有漢堡菜單按鈕所需的廣泛亮點。吸睛的紅色底色，巨大的菜單圖標(biāo)，精彩的動畫推進。

當(dāng)你將鼠標(biāo)懸停在菜單圖標(biāo)上時，并沒有非常顯著的懸停效果。單擊它后，就開始變得有趣起來。按鈕上有 3 條水平線，就像其他一些漢堡包按鈕一樣。單擊時，所有三個按鈕合并為一個水平按鈕。然后變成十字標(biāo)志。你也可以點擊它來折疊“X”圖標(biāo)。

HTML

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

HTML代碼結(jié)構(gòu)很簡單，外面是一個div標(biāo)簽，其class屬性值為menu-wrapper。這是菜單的容器。

內(nèi)層也是一個div標(biāo)簽，其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 偽類元素定義第三條橫杠。

三橫杠和叉圖標(biāo)的轉(zhuǎn)換，用到CSS3的 transition 和 transform 屬性，請參閱文章了解更多這兩個屬性的使用。

CSS3 transition 和 transform 屬性介紹

JavaScript

該示例中，JavaScript 或 jQuery 不是必須的，不過你同樣可以用 JavaScript 或 jQuery 來實現(xiàn)鼠標(biāo)點擊事件。完整代碼如下：

<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>