• RSS

Bootstrap で「ドロップダウンメニュー」を実装する方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイトやブログのヘッダーにドロップダウン型のメニューを設置することもあると思いますが、Bootstrap を使えばオンクリックによるドロップダウンメニューを簡単に実装することができます。

Bootstrap Dropdown のダウンロード

以下のページから Bootstrap のファイルを一式ダウンロードします。


Bootstrap Dropdown の使い方

ドロップダウンメニューの実装に必要なファイルは以下の通りです。
・jquery.js
・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 のデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください