Bootstrapのハンバーガーメニューをカスタマイズする方法！
Bootstrapでは様々なコンポーネントが用意されており、モバイルサイトなどでよく見かけるハンバーガメニューも用意されています。この記事ではBootstrapでハンバーガーメニューを実装する方法からカスタマイズする方法までサンプルコード付きで解説しています。
Bootstrapでハンバーガーメニューを実装したい
Bootstrapは導入するだけで簡単に洗礼されたデザインを実装することが出来るデザインフレームワークです。ボタンやフォーム、メニューなどの様々なコンポーネントが提供されています。
この記事では、Bootstrapを使ってハンバーガーメニューを実装していくところから実装したハンバーガーメニューをカスタマイズするところまで解説していきたいと思います。
ハンバーガーメニューはレスポンシブデザインではよく使われるものなので、ぜひ実装できるようになりましょう。
Bootstrapでハンバーガーメニューを実装する方法
まずはBootstrapでハンバーガメニューを実装する方法をサンプルコードを使って解説していきます。
ナビゲーションバー(全体)
部品を囲む大枠のナビゲーションバーを作成していきます。
index.html
<!-- ナビゲーションバー -->
<nav class="navbar navbar-light bg-light fixed-top">
</nav>navタグにnavbarクラスを与えることでナビゲーションバーを定義します。
navbar-lightクラスはナビゲーションバー背景色が明るめの場合、与えることで文字色等を黒色にすることができる。
bg-lightクラスはナビゲーションバーの背景色を指定しています。
fixed-topクラスでナビゲーションバーを上部に固定することが出来る。
タイトル
サイト名やロゴを表示する部分になります。
index.html
<!-- タイトル -->
<a class="navbar-brand" href="#">サイトタイトル</a>navbar-brandクラスを与えることでサイト名やロゴを表示する部分であることを定義します。
ハンバーガーメニュー
今回のメインであるハンバーガメニューを作成します。
index.html
<!-- ハンバーガーメニュー -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>buttonタグにnavbar-togglerクラスを与えることで定義します。
data-toggle属性にcollapseを指定することで、ボタンの切り替えを設定することが出来ます。
data-target属性、aria-controls属性にはナビゲーションメニューに設定するid属性の値を設定します。
aria-expanded属性はハンバーガーメニューをクリックすることで自動で値が入れ替わります。初期値はfalseを設定します。
aria-label属性はアクセシビリティのために指定します。
ナビゲーションメニュー
最後にハンバーガーメニュークリック時に開閉するナビゲーションメニューを作成します。
index.html
<!-- ナビゲーションメニュー -->
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
<li class="nav-item">
<a class="nav-link" href="#">リンク１</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク２</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク３</a>
</li>
</ul>
</div>collapseクラス、navbar-collapseクラスをナビゲーションメニューを囲む親要素に指定します。また同じ要素にid属性の値をハンバーガーメニューのdata-target属性とaria-controls属性で指定した値とリンクするように指定します。
navbar-navクラスでナビゲーションメニューを定義します。
ナビゲーションメニューの項目として、nav-itemクラスを指定したliタグとnav-linkクラスを指定したaタグを任意の数だけ用意します。また、activeクラスを指定した要素はアクティブ状態を表現することが出来ます。
Bootstrapのハンバーガーメニューをカスタマイズする方法
次にBootstrapで実装したハンバーガーメニューをカスタマイズしておしゃれにしていきましょう。
ナビゲーションバー
まずはナビゲーションバー全体をカスタマイズしていきます。
index.html
<!-- ナビゲーションバー -->
<nav class="navbar navbar-dark bg-dark fixed-top">
</nav>navbar-lightクラスをnavbar-darkクラスに変更することで全体的に文字色等を白色っぽい感じにできます。また、このままだと背景は白色のままで文字色と同化して文字が見えないので、bg-lightクラスからbg-darkクラスで背景色を黒くしています。
ハンバーガーメニュー
いよいよハンバーガーメニューのカスタマイズです。ハンバーガーメニューをカスタマイズするためにはcssファイルでクラスを上書きするようにしてあげます。
アイコン
index.css
.navbar-dark .navbar-toggler-icon{
/* 三本線 */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(212, 108, 228, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}三本線のアイコンをカスタマイズするには、.navbar-dark .navbar-toggler-iconセレクタのbackground-imageプロパティを変更します。
stroke='rgba(212, 108, 228, 1)'で色を変更することが出来ます。stroke-width='3'で線の太さを変更することが出来ます。
枠線
index.css
.navbar-dark .navbar-toggler{
/* 枠線 */
border-color: rgba(212, 108, 228, 1);
}ハンバーガーメニューのアイコンの周りの枠線を変更するには.navbar-dark .navbar-togglerセレクタのborderプロパティを変更します。今回は色を変更するので、border-colorプロパティを変更します。値はアイコンのstrokeで設定した値と同じものにすることで統一感が生まれます。
サイトタイトル
index.css
.navbar-dark .navbar-brand{
/* サイトタイトル */
color: rgba(212, 108, 228, 1);
}最後にサイトタイトルの文字色を変更します。.navbar-dark .navbar-brandセレクタのcolorプロパティを変更することで実現できます。値はアイコン、枠線と同じものにします。
まとめ
Bootstrapでハンバーガーメニューの実装方法からカスタマイズの方法まで解説してきました。
Bootstrapを使うと簡単にキレイなデザインのものが出来上がりますが、どうしても同じようなものばかりになってしまいますが、カスタマイズすることで少し違いを出せるようになります。
ぜひ、自分なりにカスタマイズしてみてくださいね。
