|
|
|
|
|
關(guān)于漢堡(三橫杠)菜單,前面曾介紹過兩款,它們各有千秋,樣式不同,轉(zhuǎn)換過渡動畫也不同,請參閱文章:
今天我繼續(xù)介紹一款漂亮的,純CSS3實現(xiàn)的,漢堡(三橫杠)菜單,點擊變?yōu)椴?X)關(guān)閉圖標(biāo)。
效果圖
示例介紹
我們今天討論一下基于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
屬性,請參閱文章了解更多這兩個屬性的使用。
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)文章