サイトやブログのヘッダーにドロップダウン型のメニューを設置することもあると思いますが、Bootstrapを使えばオンクリックによるドロップダウンメニューを簡単に実装することができます。
Bootstrap Dropdown のダウンロード
以下のページからBootstrapのファイルを一式ダウンロードします。Bootstrap
Bootstrap Dropdown の使い方
ドロップダウンメニューの実装に必要なファイルは以下の通りです。
・jquery.js
・bootstrap-dropdown.js
・bootstrap.css
・bootstrap-dropdown.js
・bootstrap.css
各ファイルを、<head>内か</body>の直前に設置します。
|
1 2 3 |
<link rel="stylesheet" href="./bootstrap.css"> <script src="./jquery.min.js"></script> <script src="./bootstrap-dropdown.js"></script> |
Bootstrap Dropdown の設置
グローバルナビなどでドロップダウンメニューを使うことを想定したHTML側の記述例です。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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 のデモ
コメント