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

贊助商

分類目錄

贊助商

最新文章

搜索

純CSS3實現(xiàn)的漢堡(三條橫杠)菜單，點擊變叉

作者:admin    時間:2023-6-15 14:7:31    瀏覽:

本文介紹一款純CSS實現(xiàn)的漢堡(三條橫杠)菜單，點擊變叉，這款菜單非常常見，簡單又大方。

效果圖

 純CSS實現(xiàn)的漢堡(三條橫杠)菜單，點擊變叉

demodownload

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標(biāo)簽，這是菜單的容器。

內(nèi)層是一個class屬性值為“icon nav-icon”的div標(biāo)簽，它有一個onclick屬性，值為“this.classList.toggle('open')”，其作用是鼠標(biāo)點擊時觸發(fā)圖標(biāo)轉(zhuǎn)變的動畫。

內(nèi)層div標(biāo)簽里，還有三個<span></span>標(biāo)簽，代表是三條橫杠。

CSS

1、漢堡(三條橫杠)菜單

三個span標(biāo)簽，通過CSS設(shè)置，布局為三條橫杠的樣式。

.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(); 屬性旋轉(zhuǎn)上下兩條橫杠45度，請參閱文章：

中間的橫杠設(shè)為透明不可見 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、下面是漢堡(三條橫杠)菜單鼠標(biāo)懸停效果

鼠標(biāo)移到漢堡(三條橫杠)菜單上時，上下兩條橫杠有輕微的旋轉(zhuǎn)。這里使用了 css3 的 transform: rotate() scaleY(); 屬性，請參閱文章：

.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來實現(xiàn)。完整代碼如下：

<body>
  <div class='wrapper'>
    <div class="icon nav-icon"><span></span><span></span><span></span></div>
  </div>
</body>
<script>
/* 鼠標(biāo)點擊事件用JS觸發(fā) */
const icons = document.querySelectorAll('.icon');
icons.forEach(icon =>
{
  icon.addEventListener('click', (event) =>
  {
    icon.classList.toggle("open");
  });
});  
</script>

總結(jié)

本文介紹了一款純CSS3實現(xiàn)的漢堡(三條橫杠)菜單，點擊變叉，簡單又大方，被很多移動網(wǎng)頁使用。喜歡的話可以收藏本頁，也可以直接下載源碼備用。

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

相關(guān)文章

x
  • 站長推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */