卡卡網(wǎng)

漢堡（三橫杠）菜單是移動菜單的開關(guān)，所以很多人會追求它的樣式設(shè)計、動畫設(shè)計如何更美觀好看，本文介紹3款純CSS3實現(xiàn)的漢堡（三橫杠）菜單點擊變叉動畫。

效果圖

demodownload

HTML

 下面是3款菜單的HTML結(jié)構(gòu)，它們的代碼是一樣的，不同的是它們的CSS樣式。

<div class="hamburger" id="hamburger-1" onclick="this.classList.toggle('is-active')"><span class="line"></span><span class="line"></span><span class="line"></span></div>

<div class="hamburger" id="hamburger-2" onclick="this.classList.toggle('is-active')"><span class="line"></span><span class="line"></span><span class="line"></span></div>

<div class="hamburger" id="hamburger-3" onclick="this.classList.toggle('is-active')"><span class="line"></span><span class="line"></span><span class="line"></span></div>

我們看到，每個div標(biāo)簽有一個onclick屬性，這是鼠標(biāo)點擊事件，點擊圖標(biāo)后三橫杠和叉這兩個圖標(biāo)以動畫形式切換。 

CSS

下面是3款菜單的CSS樣式。

示例1

#hamburger-1.is-active .line:nth-child(2) {
  opacity: 0;
}
#hamburger-1.is-active .line:nth-child(1) {
  -webkit-transform: translateY(13px) rotate(45deg);
  -ms-transform: translateY(13px) rotate(45deg);
  -o-transform: translateY(13px) rotate(45deg);
  transform: translateY(13px) rotate(45deg);
}
#hamburger-1.is-active .line:nth-child(3) {
  -webkit-transform: translateY(-13px) rotate(-45deg);
  -ms-transform: translateY(-13px) rotate(-45deg);
  -o-transform: translateY(-13px) rotate(-45deg);
  transform: translateY(-13px) rotate(-45deg);
}

示例2

#hamburger-2 {
  position: relative;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#hamburger-2.is-active {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#hamburger-2:before {
  content: "";
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 70px;
  height: 70px;
  border: 5px solid transparent;
  top: calc(50% - 35px);
  left: calc(50% - 35px);
  border-radius: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#hamburger-2.is-active:before {
  border: 5px solid #ecf0f1;
}
#hamburger-2.is-active .line {
  width: 35px;
}
#hamburger-2.is-active .line:nth-child(2) {
  opacity: 0;
}
#hamburger-2.is-active .line:nth-child(1) {
  -webkit-transform: translateY(13px);
  -ms-transform: translateY(13px);
  -o-transform: translateY(13px);
  transform: translateY(13px);
}
#hamburger-2.is-active .line:nth-child(3) {
  -webkit-transform: translateY(-13px) rotate(90deg);
  -ms-transform: translateY(-13px) rotate(90deg);
  -o-transform: translateY(-13px) rotate(90deg);
  transform: translateY(-13px) rotate(90deg);
}

示例3

#hamburger-3 {
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#hamburger-3.is-active {
  animation: smallbig 0.6s forwards;
}
@keyframes smallbig {
  0%, 100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
  }
}
#hamburger-3.is-active .line:nth-child(1),#hamburger-3.is-active .line:nth-child(2),#hamburger-3.is-active .line:nth-child(3) {
  -webkit-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
#hamburger-3.is-active .line:nth-child(2) {
  opacity: 0;
}
#hamburger-3.is-active .line:nth-child(1) {
  -webkit-transform: translateY(13px) rotate(45deg);
  -ms-transform: translateY(13px) rotate(45deg);
  -o-transform: translateY(13px) rotate(45deg);
  transform: translateY(13px) rotate(45deg);
}
#hamburger-3.is-active .line:nth-child(3) {
  -webkit-transform: translateY(-13px) rotate(-45deg);
  -ms-transform: translateY(-13px) rotate(-45deg);
  -o-transform: translateY(-13px) rotate(-45deg);
  transform: translateY(-13px) rotate(-45deg);
}

CSS解釋

我們看到，CSS主要代碼是使用 transition 和 transform 兩個屬性來實現(xiàn)，這兩個是動畫屬性。下面文章詳述了這兩個屬性的使用。

• CSS3 transition 和 transform 屬性介紹

JavaScript

本文示例中，JavaScript不是必須的，但我們可以用JavaScript來實現(xiàn)鼠標(biāo)點擊事件。我們可以把HTML代碼里div的onclick屬性去掉，然后用JavaScript來給div綁定點擊事件。代碼如下：

<div class="hamburger" id="hamburger-1"><span class="line"></span><span class="line"></span><span class="line"></span></div>
<div class="hamburger" id="hamburger-2"><span class="line"></span><span class="line"></span><span class="line"></span></div>
<div class="hamburger" id="hamburger-3"><span class="line"></span><span class="line"></span><span class="line"></span></div>

<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".hamburger").click(function() {
      $(this).toggleClass("is-active");
    });
});
</script>

這里用的是jQuery實現(xiàn)，因此要先引用jQuery庫文件jquery-3.2.1.min.js。

總結(jié)

本文介紹了3款純CSS3實現(xiàn)漢堡(三橫杠)菜單點擊變叉動畫，喜歡的朋友可以收藏本頁，也可以直接下載源碼備用。

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

• 純CSS3實現(xiàn)漢堡(三橫杠)菜單點擊變?yōu)椴?X)關(guān)閉圖標(biāo)
• 純CSS3實現(xiàn)的漢堡(三條橫杠)菜單，點擊變叉
• 純CSS+svg實現(xiàn)三條橫線點擊變叉菜單按鈕動畫

相關(guān)文章

• jQuery黑色左側(cè)邊導(dǎo)航菜單(可折疊可縮進滑出)
• layui框架實現(xiàn)的可折疊側(cè)欄導(dǎo)航菜單（適合信息管理系統(tǒng)）
• 非常受歡迎好看的CSS3水平導(dǎo)航菜單(含二級菜單)
• 一款簡易的CSS3側(cè)欄滑動導(dǎo)航菜單
• 很漂亮的 Bootstrap 3 側(cè)欄滑動導(dǎo)航菜單【演示/源碼下載】
• 一款漂亮的CSS3藍色垂直導(dǎo)航菜單
• 二級菜單水平方向排列的CSS3響應(yīng)式水平導(dǎo)航菜單
• 含二級下拉菜單的CSS3響應(yīng)式水平導(dǎo)航菜單
• CSS3 PC/移動響應(yīng)式網(wǎng)頁水平導(dǎo)航菜單
• CSS3折疊下拉菜單（深色背景）【演示/源碼下載】

標(biāo)簽: 菜單  三橫杠  漢堡菜單  三橫杠菜單