九九九热在线精品免费全部,欧美在线精品免播放器视频,国产成人精品免费av

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

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

作者:admin 時(shí)間:2023-6-15 14:7:31 瀏覽:

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

效果圖

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

HTML

<div class='wrapper'>
    <div class="icon nav-icon" onclick="this.classList.toggle('open')" ><span></span><span></span><span></span></div>
</div>

外層是一個(gè)class屬性值為wrapper的div標(biāo)簽，這是菜單的容器。

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

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

CSS

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

三個(gè)span標(biāo)簽，通過(guò)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度，請(qǐng)參閱文章：

實(shí)例分析CSS3 transform: translateY() rotate() rotateY() rotateX()

中間的橫杠設(shè)為透明不可見(jiàn) 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)移到漢堡(三條橫杠)菜單上時(shí)，上下兩條橫杠有輕微的旋轉(zhuǎn)。這里使用了 css3 的 transform: rotate() scaleY(); 屬性，請(qǐng)參閱文章：

CSS3 transform: scale() 縮放轉(zhuǎn)換【實(shí)例分析演示】

.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事件通過(guò)單獨(dú)的JavaScript來(lái)實(shí)現(xiàn)。完整代碼如下：

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

總結(jié)

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

您可能對(duì)以下文章也感興趣

相關(guān)文章