如何做 - 選單圖示
學習如何使用 CSS 建立選單圖示。
如何建立選單圖示
如果您不使用圖示庫，可以使用 CSS 建立一個基本的選單圖示。
步驟 1) 新增 HTML
示例
<div></div>
<div></div>
<div></div>
步驟 2) 新增 CSS
示例解釋
width 和 height 屬性指定了每個條的寬度和高度。
我們添加了黑色的 background-color，並且頂部和底部的 margin 用於在每個條之間建立一些距離。
動畫圖示
使用 CSS 和 JavaScript 在點選選單圖示時將其更改為“取消/移除”圖示。
步驟 1) 新增 HTML
示例
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
步驟 2) 新增 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);
}
步驟 3) 新增 JavaScript
示例解釋
HTML & CSS：我們使用與之前相同的樣式，只是這次我們在每個 <div> 元素周圍包裝了一個容器元素，併為每個元素指定了一個類名。
當用戶將滑鼠懸停在 div（條）上時，容器元素用於顯示一個指標符號。當它被點選時，它將執行一個 JavaScript 函式，該函式會新增一個新的類名，從而改變每個水平條的樣式：第一個和最後一個條被轉換並旋轉成字母“x”。中間的條會淡出並變得不可見。
