Bootstrap3
日本語リファレンス

広告

カプセル・メニューにおけるドロップダウン


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

  1. ドロップダウン機能を持たせたいメニュー項目のli要素のclass属性にdropdownを指定する。
  2. ドロップダウン機能を持たせたいメニュー項目のli要素内のa要素のclass属性にdropdown-toggledata-toggle属性にdropdownを指定する。
  3. ドロップダウン機能を持たせたいメニュー項目のli要素内のa要素の下に、ドロップダウンで表示させるリンクリスト(ul要素)を配置する。
  4. リンクリスト(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">
			ドロップダウンA <span class="caret"></span>
		</a>
		<ul class="dropdown-menu" role="menu">
			<li role="presentation"><a href="#">リンクリストA1</a></li>
			<li role="presentation"><a href="#">リンクリストA2</a></li>
			<li role="presentation"><a href="#">リンクリストA3</a></li>
		</ul>
	</li>
	<li role="presentation" class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
			ドロップダウンB <span class="caret"></span>
		</a>
		<ul class="dropdown-menu" role="menu">
			<li role="presentation"><a href="#">リンクリストB1</a></li>
			<li role="presentation"><a href="#">リンクリストB2</a></li>
			<li role="presentation"><a href="#">リンクリストB3</a></li>
		</ul>
	</li>
	<li role="presentation" class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
			ドロップダウンC <span class="caret"></span>
		</a>
		<ul class="dropdown-menu" role="menu">
			<li role="presentation"><a href="#">リンクリストC1</a></li>
			<li role="presentation"><a href="#">リンクリストC2</a></li>
			<li role="presentation"><a href="#">リンクリストC3</a></li>
		</ul>
	</li>
</ul>

広告