技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運營

贊助商

分類目錄

贊助商

最新文章

搜索

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

demodownload

示例介紹

我們今天討論一下基于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的 transitiontransform 屬性,請參閱文章了解更多這兩個屬性的使用。

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>

我們看到,HTML代碼里的DIV標(biāo)簽,不再有onclick屬性。點擊事件交給了JavaScript/jQuery來完成。

上述代碼提供了一種 jQuery 的寫法,以及三種 JavaScript 的寫法。當(dāng)你想用 jQuery 來實現(xiàn)時,請不要忘了先引用 jQuery 的庫文件。

總結(jié)

本文介紹了一款純CSS3實現(xiàn)漢堡(三橫杠)菜單點擊變?yōu)椴?X)關(guān)閉圖標(biāo),喜歡的朋友可以收藏本頁,也可以直接下載源碼備用。

您可能對以下文章也感興趣

相關(guān)文章

標(biāo)簽: 菜單  三橫杠  漢堡菜單  三橫杠菜單  
x
  • 站長推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */