bootstrapで簡単にトグルナビゲーションバーを作る！
完成版
今回はこんな感じでナビゲーションのアイコンをクリックすると下にナビゲーションが出てくるようなトグルナビゲーションを実装していこうと思います。
なおこの実装にはbootstrapを用いているのでご了承。
また、これはスマホ版の画面であってpc画面になると表示が変わります。
こんな感じです。
右側のアイコン等が消えていますね
。今回はこんな感じのトグルナビゲーションを実装していこうと思います。
さっそくコードを書いていく
<body> <header> <!--navbarを使う宣言--> <nav class="navbar navbar-expand-lg navbar-light active"> <!-- ブランド名・ロゴ--> <a class="navbar-brand" href="#">Navbar</a> <!-- トグルのボタンを作る--> <button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navbarNav"data-target="#navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!--開閉した時の中身--> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item "> <a class="nav-link" href="#">home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">about</a> </li> <li class="nav-item"> <a class="nav-link" href="#">work</a> </li> <li class="nav-item"> <a class="nav-link " href="#">contact</a> </li> </ul> </div> </nav> </header> </body>
上から順に説明していきますね。
まずnavbarを使うにはnavbarとnavbar{sm md lg xl}、カラースキームの指定が必要です。
カラースキームはnavbar-light以外にnavbar-darkなどを使うことができます。
後者を使うとナビゲーションバー全体が黒に変わります。きになる人は試してみてください。
ブランド名およびロゴ
次にブランド名やロゴをnavbar-brandを使って表す。
トグルのボタンを作る
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navbarNav"data-target="#navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
・classの指定→必須
・data-toggle="collapse"→必須。collapseという単語から推測できると思いますがこれがないと開閉できません。
・aria-controls="navbarNav"→必須ではない
・data-target="#navbarNav"→必須。後々必要
・aria-expanded="false"→必須ではないがこれもSEO的にあった方がいいです。また、"true"にするとトグルメニューが空いている状態から始まります。
・aria-label→必須ではないがseo的にあったほうがいいです。
トグルメニューの中身を作っていく
<!--開閉した時の中身--> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item "> <a class="nav-link" href="#">home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">about</a> </li> <li class="nav-item"> <a class="nav-link" href="#">work</a> </li> <li class="nav-item"> <a class="nav-link " href="#">contact</a> </li> </ul> </div>
・<div class="collapse navbar-collapse" id="navbarNav">→開閉部分全体をdivで囲む。
・classの指定→必須。画面の幅によって表示の仕方を変える設定を行います。
・idの指定→必須。トグルの設定の時に後々必要といった理由はこれです。toggle-targetと同じ属性を与えてあげます。
・nav-linkとnav-item→必須。名前からも予測できるようにリンクになります。
まとめ
いかがでしたか？このナビバーをcssとjavascriptで作ろうとすると相当な時間がかかると思います。
bootstrapってとても便利ですよね〜
ぜひ試してくださいね！
