Bootstrap で「ドロップダウンメニュー」を実装する方法
スポンサード
各ファイルを、<head> 内か </body> の直前に設置します。
メニューのデザインは bootstrap.css のモノをベースにカスタマイズすると、以下のデモページのような動きになります。
Bootstrap Dropdown のデモ
スポンサード
サイトやブログのヘッダーにドロップダウン型のメニューを設置することもあると思いますが、Bootstrap を使えばオンクリックによるドロップダウンメニューを簡単に実装することができます。
目次
Bootstrap Dropdown のダウンロード
以下のページから Bootstrap のファイルを一式ダウンロードします。Bootstrap Dropdown の使い方
ドロップダウンメニューの実装に必要なファイルは以下の通りです。 ・jquery.js
・bootstrap-dropdown.js
・bootstrap.css
・bootstrap-dropdown.js
・bootstrap.css
各ファイルを、<head> 内か </body> の直前に設置します。
<link rel="stylesheet" href="./bootstrap.css"> <script src="./jquery.min.js"></script> <script src="./bootstrap-dropdown.js"></script>
Bootstrap Dropdown の設置
グローバルナビなどでドロップダウンメニューを使うことを想定したHTML側の記述例です。<ul class="dropdown"> <li><a class="dropdown-toggle" data-toggle="dropdown" href="#"> メニュー1 <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">メニュー1-1</a></li> <li><a href="#">メニュー1-2</a></li> <li><a href="#">メニュー1-3</a></li> <li><a href="#">メニュー1-4</a></li> <li><a href="#">メニュー1-5</a></li> </ul> </li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー5</a></li> </ul>
ul class="dropdown-menu"
のリストがドロップダウンメニュー部分になります。b class="caret"
は bootstrap.css 内で▼ が出力されるように作られていますので、この辺りの色の変更や形状の変更はCSSファイルを編集します。メニューのデザインは bootstrap.css のモノをベースにカスタマイズすると、以下のデモページのような動きになります。
Bootstrap Dropdown のデモ
スポンサード
コメント