ナビゲーション・バーにおけるドロップダウン ≪ ドロップダウン ≪ JavaScript ≪ Bootstrap3日本語リファレンス

ナビゲーション・バーにおけるドロップダウン使用方法。

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

サンプル

ソースコード

<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarEexample">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">タイトル</a>
		</div>

		<div class="collapse navbar-collapse" id="navbarEexample">
			<ul class="nav navbar-nav">
				<li class="dropdown active">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">ドロップダウンＡ <span class="caret"></span></a>
					<ul class="dropdown-menu" role="menu">
						<li><a href="#">リンクリストＡ１</a></li>
						<li><a href="#">リンクリストＡ２</a></li>
						<li><a href="#">リンクリストＡ３</a></li>
					</ul>
				</li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">ドロップダウンＢ <span class="caret"></span></a>
					<ul class="dropdown-menu" role="menu">
						<li><a href="#">リンクリストＢ１</a></li>
						<li><a href="#">リンクリストＢ２</a></li>
						<li><a href="#">リンクリストＢ３</a></li>
					</ul>
				</li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">ドロップダウンＣ <span class="caret"></span></a>
					<ul class="dropdown-menu" role="menu">
						<li><a href="#">リンクリストＣ１</a></li>
						<li><a href="#">リンクリストＣ２</a></li>
						<li><a href="#">リンクリストＣ３</a></li>
					</ul>
				</li>
			</ul>
			<ul class="nav navbar-nav navbar-right">
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">ドロップダウンＤ <span class="caret"></span></a>
					<ul class="dropdown-menu" role="menu">
						<li><a href="#">リンク・リストＤ１</a></li>
						<li><a href="#">リンク・リストＤ２</a></li>
						<li><a href="#">リンク・リストＤ３</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</nav>