カプセル・メニューにおけるドロップダウン ≪ ドロップダウン ≪ JavaScript ≪ Bootstrap3日本語リファレンス

カプセル・メニューにおけるドロップダウン使用方法。

ドロップダウン機能を持たせたいメニュー項目のli要素のclass属性にdropdownを指定する。
ドロップダウン機能を持たせたいメニュー項目のli要素内のa要素のclass属性にdropdown-toggle、data-toggle属性にdropdownを指定する。
ドロップダウン機能を持たせたいメニュー項目のli要素内のa要素の下に、ドロップダウンで表示させるリンクリスト（ul要素）を配置する。
リンクリスト（ul要素）のclass属性にはdropdown-menuを指定する。

サンプル

ソースコード

<ul class="nav nav-pills">
	<li role="presentation"><a href="#">ホーム</a></li>
	<li role="presentation" class="dropdown active">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
			ドロップダウンＡ <span class="caret"></span>
		</a>
		<ul class="dropdown-menu" role="menu">
			<li role="presentation"><a href="#">リンクリストＡ１</a></li>
			<li role="presentation"><a href="#">リンクリストＡ２</a></li>
			<li role="presentation"><a href="#">リンクリストＡ３</a></li>
		</ul>
	</li>
	<li role="presentation" class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
			ドロップダウンＢ <span class="caret"></span>
		</a>
		<ul class="dropdown-menu" role="menu">
			<li role="presentation"><a href="#">リンクリストＢ１</a></li>
			<li role="presentation"><a href="#">リンクリストＢ２</a></li>
			<li role="presentation"><a href="#">リンクリストＢ３</a></li>
		</ul>
	</li>
	<li role="presentation" class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
			ドロップダウンＣ <span class="caret"></span>
		</a>
		<ul class="dropdown-menu" role="menu">
			<li role="presentation"><a href="#">リンクリストＣ１</a></li>
			<li role="presentation"><a href="#">リンクリストＣ２</a></li>
			<li role="presentation"><a href="#">リンクリストＣ３</a></li>
		</ul>
	</li>
</ul>