如何創建：菜單圖標

學習如何使用 CSS 創建菜單圖標。

如果您沒有使用圖標庫，您可以使用 CSS 創建一個基本的菜單圖標：

菜單圖標：

親自試一試

動畫菜單圖標（點擊它）：

親自試一試

如何創建菜單圖標

第一步 - 添加 HTML：

<div></div>
<div></div>
<div></div>

第二步 - 添加 CSS：

div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}

親自試一試

例子解釋：

width 和 height 屬性指定每個條的寬度和高度。

我們添加了黑色背景顏色以及上下外邊距，來創建每個條之間的間距。

動畫圖標

使用 CSS 和 JavaScript，在被點擊時，將菜單圖標更改為“取消/刪除”圖標：

第一步 - 添加 HTML：

<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

第二步 - 添加 CSS：

.container {
  display: inline-block;
  cursor: pointer;
}
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}
/* 旋轉第一個欄 */
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}
/* 淡出第二欄  */
.change .bar2 {opacity: 0;}
/* 旋轉最后一個欄 */
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

第三步 - 添加 JavaScript：

function myFunction(x) {
  x.classList.toggle("change");
}

親自試一試

例子解釋：

HTML 和 CSS：我們使用了與之前相同的樣式，但這次我們為每個 <div> 元素包裹了一個容器元素，并為每個元素指定了一個類名。

容器元素用于在用戶將鼠標懸停在 divs（線條）上時顯示一個指針符號。當它被點擊時，它將執行一個 JavaScript 函數，該函數將向其添加一個新的類名，這將改變每個水平條的樣式：第一條和最后一條線條將變形并旋轉成字母“x”。中間的線條將逐漸淡出并變得不可見。