スライドメニューを作成します
重要度: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;
}