ナビゲーションバー
サイトの上部に配置されてメインメニューとして使われる利用頻度が高いコンポーネントです。
サンプル
PC
ドロップダウンメニュー
スマホ
ソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!-- ナビゲーションバー全体 --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Ruby命名規則生成ツール</a> <!-- スマホ用のハンバーガーメニュー --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToogleContent" aria-controls="navbarToogleContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarToogleContent"> <!-- ナビゲーションバー左 --> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#">ホーム</a> </li> <li class="nav-item active"> <a class="nav-link" href="#">ツール</a> </li> </ul> <!-- ナビゲーションバー右 --> <ul class="navbar-nav"> <!-- ドロップダウンメニュー --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 太郎 </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">単語一覧</a> <a class="dropdown-item" href="#">ログアウト</a> </div> </li> </ul> </div> </nav> |
ナビゲーションバー全体
navbar navbar-expand-lg navbar-dark
「navbar-expand-lg」で画面幅が一定以下になった場合にメインメニューが折り畳まれてスマホ表示になります。「navbar-dark」によりメニューバーの文字色を指定できます。
ロゴ
navbar-brand
サイトのブランド名やロゴを表示する箇所です。
スマホ用のハンバーガーメニュー
navbar-toggler
画面幅を狭めた際に表示させるハンバーガーアイコンを示します。このdivの中に「navbar-toggler-icon」というハンバーガーアイコンの画像を配置します。
| 設定項目 | 説明 |
|---|---|
| data-toggle | JavaScriptと紐づけるための属性になります。ハンバーガーメニューを使用する際は「collapse」を指定します。「折りたたむ」という意味を持つ単語です。 |
| data-target | ハンバーガーメニューの中身と紐づけるために使用します。(中身にはidで指定します。） |
| aria-controls | 読み上げブラウザ用の設定のようで切り替えた際に表示する対象を指定します。基本的には「data-target」属性にて指定する値をそのまま指定すれば良いようです。 |
| aria-expanded | 開閉状態を指します。初期状態は「false(閉じる)」を指定することが多くなるでしょう。ハンバーガーメニューを開くと内部的に「true(開く）」の状態になります。 |
| aria-label | これも読み上げブラウザ用の設定のようです。設定する文字列はなんでも良いですが「ナビゲーション切り替え」ということがわかる文字列を設定しておくと良いでしょう。 |
スマホ用のハンバーガーメニューの中身
collapse navbar-collapse
ハンバーガーの中身を記述します。
ナビゲーションバー左
navbar-nav mr-auto
ナビゲーションで表示するメニューのリストに付けます。「mr-auto」と指定することで左寄せします。
ナビゲーションバー右
navbar-nav
こちらには「mr-auto」と付けないことで右寄せしています。
ドロップダウンメニュー
dropdown
一番外側の要素につけます。
dropdown-toggle
これを適用したbutton要素かa要素を準備します。
| 設定値 | 説明 |
|---|---|
| data-toggle | JavaScriptと紐づけています。ドロップダウンを使う場合は「dropdown」を指定します。 |
| aria-haspopup | 読み上げブラウザ用の設定で要素がドロップダウン用の部品であることを示します。 |
| aria-expanded | 開閉状態を指します。初期状態は「false(閉じる)」を指定することが多くなるでしょう。ドロップダウンメニューを開くと内部的に「true(開く）」の状態になります。 |
ドロップダウンで表示される中身
dropdown-menu dropdown-menu-right
div要素です。「dropdown-menu-right」とクラス指定することでドロップダウンメニューが右寄せになります。
| 設定値 | 説明 |
|---|---|
|
aria-labelledby
|
読み上げブラウザ用の設定でドロップダウンの要素であることを示します。何を指定しても動作は変わりませんが、ドロップダウン要素であることがわかる値を設定しましょう。 |
dropdown-item
a要素です。
この記事へのコメントはありません。