建立滑動選單
重要性：5
HTML/CSS
首先讓我們建立 HTML/CSS。
選單是網頁上一個獨立的圖形元件，所以最好將它放入一個單一的 DOM 元素中。
選單項目清單可以佈置成一個清單 ul/li。
以下為範例結構
<div class="menu">
<span class="title">Sweeties (click me)!</span>
<ul>
<li>Cake</li>
<li>Donut</li>
<li>Honey</li>
</ul>
</div>我們使用 <span> 作為標題，因為 <div> 具有內含的 display:block，且會佔用 100% 的水平寬度。
如下所示
<div style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</div>因此，如果我們對其設定 onclick，則它會捕捉文字右方的點擊。
由於 <span> 具有內含的 display: inline，因此它只會佔用剛好容納所有文字的空間
<span style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</span>切換選單
切換選單應變更箭頭並顯示/隱藏選單清單。
所有這些變更都由 CSS 完美處理。在 JavaScript 中，我們應透過新增/移除類別 .open 來標記選單的目前狀態。
沒有它，選單會關閉
.menu ul {
margin: 0;
list-style: none;
padding-left: 20px;
display: none;
}
.menu .title::before {
content: '▶ ';
font-size: 80%;
color: green;
}…而使用 .open，箭頭會變更且清單會顯示
.menu.open .title::before {
content: '▼ ';
}
.menu.open ul {
display: block;
}