執筆中のため、情報が古い・足りない場合があります。ご容赦ください。
メニュー .menu
メニューは、ナビゲーションや項目選択など幅広く用いられるコンポーネントです。
クラスと要素
| クラス名 | 説明 |
|---|---|
.menu
| メニューの親クラス。この中に項目を定義します |
h1
| メニューのタイトル |
section
| メニューを区切る場合、sectionタグを使用します |
.large
| メニューを大きく表示します。タブレット、スマートフォンでは常にこの表示が適用されます。 |
.item
| メニュー項目を表します。 |
.disabled
| item と併用することで、メニュー項目を無効化状態にします |
.active
| item と併用することで、メニュー項目を選択した状態にします |
例
セクションを使用しない場合
<div class="menu">
<h1>果物</h1>
<div class="item">りんご</div>
<div class="item disabled">ぶどう</div>
<div class="item active">みかん</div>
</div>セクションを使用する場合
<div class="menu">
<section>
<h1>入門編</h1>
<div class="item">値</div>
<div class="item">変数</div>
<div class="item">制御構造</div>
<div class="item">関数</div>
<div class="item">クラス</div>
</section>
<section>
<h1>実践編</h1>
<div class="item">データベース</div>
<div class="item">ウィンドウ作成</div>
<div class="item">Webサーバー</div>
<div class="item">暗号化</div>
</section>
</div>
大きいサイズ
<div class="menu large">
<section>
<h1>入門編</h1>
<div class="item">値</div>
<div class="item">変数</div>
<div class="item">制御構造</div>
<div class="item">関数</div>
<div class="item">クラス</div>
</section>
<section>
<h1>実践編</h1>
<div class="item">データベース</div>
<div class="item">ウィンドウ作成</div>
<div class="item">Webサーバー</div>
<div class="item">暗号化</div>
</section>
</div>