卡卡網(wǎng)

移動菜單一般都有一個開關按鈕，可以點擊按鈕打開或關閉菜單，本文將介紹一個CSS實現(xiàn)的Menu Toggle移動菜單切換按鈕(打開/關閉)。

demodownload

HTML

<button class="btn-toggle" id="menu-toggle">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</button>

HTML代碼很簡單，盒子是一個button標簽，該標簽class值是btn-toggle，id值是menu-toggle。

button標簽內(nèi)有3個div，它們的class值都是line。

Javascript

本實例有少量的JS代碼，其作用是監(jiān)聽按鈕的點擊動作，打開或關閉菜單。

const btn = document.getElementById("menu-toggle");
const lines = btn.querySelectorAll(".line");
const cls = { open: "open", close: "close" };
let btnClass = cls.open;

btn.addEventListener("click", () => {
  if (btn.classList.contains(cls.open)) {
    btn.classList.remove(btnClass);
    btnClass = cls.close;
  } else if (btn.classList.contains(cls.close)) {
    btn.classList.remove(btnClass);
    btnClass = cls.open;
  }

  void btn.offsetWidth;
  btn.classList.add(btnClass);
});

CSS

本實例CSS代碼主要是實現(xiàn)了按鈕樣式的設計，以及當按鈕的點擊動作發(fā)生后，按鈕狀態(tài)的變化，打開/關閉過渡效果的設計。

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: snow;
}

.btn-toggle {
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  padding: 12px;
  background-color: transparent;
  border-color: transparent;
  outline: none;
  transform: translateZ(0);
  transition: transform 0.1s ease-out;
}
.btn-toggle:active {
  transform: translateY(4px);
}
.btn-toggle:focus .line:after {
  background-color: black;
}

.line {
  display: block;
  width: 60px;
  padding: 3.75px;
}
.line:after {
  content: "";
  display: block;
  width: 100%;
  height: 7.5px;
  background-color: dimgray;
  border-radius: 2px;
  transform: translateZ(0) rotate(0);
  transition: background-color 0.2s ease-out;
}
.open .line:nth-child(1) {
  -webkit-animation: jump-1 0.9s forwards ease;
          animation: jump-1 0.9s forwards ease;
}
.open .line:nth-child(1):after {
  -webkit-animation: line-1 0.9s forwards ease-in-out;
          animation: line-1 0.9s forwards ease-in-out;
}
.open .line:nth-child(2) {
  -webkit-animation: jump-2 0.9s forwards ease;
          animation: jump-2 0.9s forwards ease;
}
.open .line:nth-child(2):after {
  -webkit-animation: line-2 0.9s forwards ease-in-out;
          animation: line-2 0.9s forwards ease-in-out;
}
.close .line:nth-child(1) {
  animation: jump-1 0.9s reverse ease;
}
.close .line:nth-child(1):after {
  animation: line-1 0.9s reverse ease-in-out;
}
.close .line:nth-child(2) {
  animation: jump-2 0.9s reverse ease;
}
.close .line:nth-child(2):after {
  animation: line-2 0.9s reverse ease-in-out;
}
.open .line:nth-child(3), .close .line:nth-child(3) {
  -webkit-animation: jump-3 0.9s forwards ease-out;
          animation: jump-3 0.9s forwards ease-out;
}

@-webkit-keyframes line-1 {
  10% {
    transform: translateZ(0) rotate(0);
  }
  80% {
    transform: translateZ(0) rotate(395deg);
  }
  90%, 100% {
    transform: translateZ(0) rotate(405deg);
  }
}

@keyframes line-1 {
  10% {
    transform: translateZ(0) rotate(0);
  }
  80% {
    transform: translateZ(0) rotate(395deg);
  }
  90%, 100% {
    transform: translateZ(0) rotate(405deg);
  }
}
@-webkit-keyframes line-2 {
  10% {
    transform: translateZ(0) rotate(0);
  }
  20% {
    transform: translateZ(0) rotate(10deg);
  }
  90%, 100% {
    transform: translateZ(0) rotate(-405deg);
  }
}
@keyframes line-2 {
  10% {
    transform: translateZ(0) rotate(0);
  }
  20% {
    transform: translateZ(0) rotate(10deg);
  }
  90%, 100% {
    transform: translateZ(0) rotate(-405deg);
  }
}
@-webkit-keyframes jump-1 {
  10% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-90px);
  }
  90%, 100% {
    transform: translateY(-7.5px);
  }
}
@keyframes jump-1 {
  10% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-90px);
  }
  90%, 100% {
    transform: translateY(-7.5px);
  }
}
@-webkit-keyframes jump-2 {
  10% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-75px);
  }
  85%, 100% {
    transform: translateY(-22.5px);
  }
}
@keyframes jump-2 {
  10% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-75px);
  }
  85%, 100% {
    transform: translateY(-22.5px);
  }
}
@-webkit-keyframes jump-3 {
  10% {
    transform: translateY(-7.5px) rotate(15deg);
  }
  30% {
    transform: translateY(-30px) rotate(-10deg);
  }
  50% {
    transform: translateY(7.5px) rotate(5deg);
  }
  80% {
    transform: translateY(0);
  }
}
@keyframes jump-3 {
  10% {
    transform: translateY(-7.5px) rotate(15deg);
  }
  30% {
    transform: translateY(-30px) rotate(-10deg);
  }
  50% {
    transform: translateY(7.5px) rotate(5deg);
  }
  80% {
    transform: translateY(0);
  }
}
@-webkit-keyframes glow {
  50% {
    box-shadow: rgba(131, 131, 131, 0.4) 0 0 2px 2px;
  }
}
@keyframes glow {
  50% {
    box-shadow: rgba(131, 131, 131, 0.4) 0 0 2px 2px;
  }
}

.btn-toggle 定義按鈕盒子模型樣式：位置、背景、邊框等。

.line 定義橫線樣式。

.open .line 和 .close .line 定義按鈕(開/關)橫線過渡動畫。

nth-child(n) n值為1-3，分別代表第1到第3條橫線。

下面是動畫參數(shù)的解釋：

animation: jump-1 0.9s forwards ease;  jump-1是動畫名稱，它由@-webkit-keyframes jump-1 {}來定義，0.9s是動畫時間，forwards是表示停在最終狀態(tài)，ease表示運動方式是平滑過渡。

animation: line-1 0.9s forwards ease-in-out; ease-in-out 表示運動方式由慢到快。

animation: jump-1 0.9s reverse ease; reverse表示反方向運行。

transform: translateY(0); translateY(y)定義： 基于原來的位置，沿Y軸平移，長度為y。

transform: translateZ(0) rotate(0); translateZ(z)定義：基于原來的位置，沿Z軸平移，長度為z。rotate(angle) angle是角度，定義：以圖形的幾何中心點為旋轉中心，順時針旋轉角度為angle。

總結

本文介紹了如何用CSS+JS實現(xiàn)Menu Toggle移動菜單切換按鈕(打開/關閉)，本實例的重點是過渡動畫的設計。

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

• 漂亮的左側二級導航菜單(伸縮式)【演示/源碼下載】
• CSS+JS：一款常見的簡單大方又實用的移動網(wǎng)頁(二級)菜單設計
• 漂亮的左側二級導航菜單(伸縮式)【演示/源碼下載】
• 3款有下橫線平滑過渡效果的導航欄菜單
• 非常漂亮的響應式導航欄設計
• 簡單實用的響應式導航菜單設計

• CSS3實現(xiàn)的可縮進的側欄導航菜單
• 漂亮的純CSS3水平導航菜單（有過渡動畫效果）
• 可以展開和閉合子菜單的CSS3垂直導航菜單
• 又一個隨內(nèi)容滾動而變化的側邊/左側目錄導航
• 側邊/左側目錄導航隨內(nèi)容滾動而變化
• 純CSS：非常漂亮的左側導航/內(nèi)容目錄導航
• 簡單卻實用的CSS水平和垂直導航欄【演示/源碼】
• CSS3+JQuery實現(xiàn)的三級下拉導航菜單

標簽: 菜單  移動菜單  導航菜單