ドロップダウンメニュードロップダウンも検索フォームも簡単!Bootstrapでレスポンシブナビゲーションメニューを作る方法デバイスごとにcssを変えなければいけないナビゲーションメニューですが、Bootstrapを使えば簡単にコーディングができます。ドロップダウンメニューなどの面倒な小技も一瞬で作れてしまう手軽さ。今回は、Bootstrapで作るいろいろなナビゲーションメニューの例をご紹介します。シンプルな形のナビゲーションです。リストに「active」クラスを付けると、自動的に背景色が濃いめのグレーになり、選択状態になります。[HTML]HOMESERVICEBLOGABOUTABOUT色の変更navタグに「navbar-inverse」クラスを付けると、黒背景に変更できます。画面をスクロールしてもナビゲーションを常に画面上部に表示させたい場合は、「navbar-fixed-top」クラスを付与し、リストを「container」クラスで囲みます。ここのままではコンテンツの上部がナビゲーションの後ろに隠れてしまうので、cssを追加してbody全体を少し下に下げます。デフォルトで、ナビゲーションバーの高さは50pxに設定されているので、少し余白をとって70pxくらいにするときれいです。中央寄せにする「navbar-static-top」クラスを付与するとページの最上部にナビゲーションバーが固定され、中央に位置調整して表示されます。このとき、リストは「container」クラスで囲みます。この場合は、他のコンテンツの上に表示されるわけではないので、bodyにマージンを加える必要はありません。ページの最上部に表示されるだけなので、画面スクロールするとナビも上にあがります。フォームナビゲーションバーに検索フォームなどを追加したい場合にも、cssが用意されています。ドロップダウンメニュードロップダウンメニューにするには、jQueryとbootstrap.jsを読み込んでおく必要があります。それだけやっておけば、あとは下記のように、liタグに「dropdown」クラスを付けてドロップダウンメニューを作成します。トグル機能もクラス付けで実装することができて簡単です。デフォルトでレスポンシブです。以上、Bootstrapでナビゲーションメニューをつくってみました。色やサイズなどのカスタマイズも簡単です。BootstrapのComponentsも参照に、ぜひ試してみてください。...WORDPRESSの新エディタ「Gutenberg(グーテンベルク)」とは?WordPressで新しいエディターがリリースされました。