【Bootstrapのコンポーネント】ナビゲーションバー(Navbar)に関して

Bootstrap4のナビゲーションバーに関して解説します。

前回はナビゲーションについてお伝えしましたが、今回はその続きとも言える記事です。

ナビゲーションバーは特に、headerナビゲーションなどにも使われ、幅を狭める(md=991px以下)とハンバーガーメニュー表示にもなるので、とても便利です。

ハンバーガーメニューをクリックするとメニューが縦で表示されるようになります。

では、早速見ていきましょう。

ナビゲーションバーの記述方法

これまでの記事では、その種類についても記載してきたのですが、ナビゲーションバーの基礎となる記述のみに絞って書いていきたいと思います。

ナビゲーションバーはnavタグで記述していきます。

 

ナビゲーションバー

  1.     <div class=”container”>
  2.       <nav class=”navbar navbar-expand-lg navbar-light bg-light“>
  3.         <a class=”navbar-brand” href=”#”>ブランド</a>
  4.         <button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#hoge”>
  5.           <span class=”navbar-toggler-icon“></span>
  6.         </button>
  7.         <div class=”collapse navbar-collapseid=”hoge”>
  8.           <ul class=”navbar-nav mr-auto“>
  9.             <li class=”nav-item active”>
  10.               <a class=”nav-link” href=”#”>メニュー1</a>
  11.             </li>
  12.             <li class=”nav-item dropdown”>
  13.               <a class=”nav-link dropdown-toggle” href=”#” id=”navbarDropdown” data-toggle=”dropdown”>メニュー2</a>
  14.               <div class=”dropdown-menu”>
  15.                 <a class=”dropdown-item” href=”#”>サブメニュー1</a>
  16.                 <a class=”dropdown-item” href=”#”>サブメニュー2</a>
  17.                 <div class=”dropdown-divider”></div>
  18.                 <a class=”dropdown-item” href=”#”>サブメニュー3</a>
  19.               </div>
  20.             </li>
  21.             <li class=”nav-item”>
  22.               <a class=”nav-link” href=”#”>メニュー3</a>
  23.             </li>
  24.           </ul>
  25.           <form class=”form-inline my-2 my-lg-0″>
  26.             <input class=”form-control mr-sm-2″ type=”serch” placeholder=”検索”>
  27.             <button class=”btn btn-outline-success my-2 my-sm-0″ type=”submit”>検索</button>
  28.           </form>
  29.         </div>
  30.       </nav>
  31.     </div>

 

それぞれのコードが意味する内容を、説明すると次の通りです。

<nav class="navbar navbar-expand-lg navbar-light bg-light">navbar-expand-lg → 画面幅が992px以上の時はPC表示
・nabvar-light → 文字色
・bg-light → 背景色

■<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#hoge">navbar-toggler → ハンバーガーアイコンの設定data-toggle="collapse" → Bootstrap4に組み込まれているJavaScriptとひも付け
・data-target属性 → ハンバーガーメニュー押下でどのコードを呼び出すかを指定

■<span class="navbar-toggler-icon">navbar-toggler-icon → ハンバーガーアイコンの表示

<div class="collapse navbar-collapse" id="hoge">id属性 → 呼び出し元のコードを指定

 

そして、これがどのような画面表示になるかというと・・・

ナビゲーションバー

ナビゲーションバー(ドロップダウンメニュー付き)

992px未満になると、ハンバーガーメニューが出現

ドロップダウンメニューも健在

このような感じになりました。

さらに補足説明をすると、<ul class=”navbar-nav mr-auto”>では↓を使用していますが

mr-auto

 

mr-autoを使用することで、左寄せにされ、次にくるform要素が右詰めになっています。
また、【検索ボタン】で使用しているクラスに関してはformの解説ページを参考にしてください。

まとめ

Bootstrap4のナビゲーションバーコンポーネントについて解説しました。
ナビゲーションバーは基本のコードのみお伝えしています。

ナビゲーションバーはwebサイトに必須の要素です。
使いこなせると、コーディングの速度が非常に速くなるかと思いますので、ぜひ使ってみてください。