卡卡網(wǎng)

移動(dòng)菜單一般都有一個(gè)開關(guān)按鈕，可以點(diǎn)擊按鈕打開或關(guān)閉菜單，本文將介紹一個(gè)CSS實(shí)現(xiàn)的Menu Toggle移動(dòng)菜單切換按鈕(打開/關(guān)閉)。

demodownload

HTML

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

HTML代碼很簡(jiǎn)單，盒子是一個(gè)button標(biāo)簽，該標(biāo)簽class值是btn-toggle，id值是menu-toggle。

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

Javascript

本實(shí)例有少量的JS代碼，其作用是監(jiān)聽按鈕的點(diǎn)擊動(dòng)作，打開或關(guā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

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

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 定義按鈕(開/關(guān))橫線過(guò)渡動(dòng)畫。

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

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

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

animation: line-1 0.9s forwards ease-in-out; ease-in-out 表示運(yùn)動(dòng)方式由慢到快。

animation: jump-1 0.9s reverse ease; reverse表示反方向運(yùn)行。

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

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

總結(jié)

本文介紹了如何用CSS+JS實(shí)現(xiàn)Menu Toggle移動(dòng)菜單切換按鈕(打開/關(guān)閉)，本實(shí)例的重點(diǎn)是過(guò)渡動(dòng)畫的設(shè)計(jì)。

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

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

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

標(biāo)簽: 菜單  移動(dòng)菜單  導(dǎo)航菜單