ドロップダウン　　Dropdowns

---

dropdown.jsを使うドロップダウン。

リンクのリストの表示/非表示を切り替えることができる。

---

使い方

ポイントは３つ。

1. ドロップダウンを覆う要素（div要素やul要素など）のclass属性に、dropdownを指定する。
2. リンクのリストの表示/非表示を切り替えを制御する要素（button要素やa要素など）のdata-toggle属性に、dropdownを指定する。
3. リンクのリストの要素（ul要素）のclass属性に、dropdown-menuを指定する。

<div class="dropdown">
	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
		ドロップダウン
		<span class="caret"></span>
	</button>
	<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>
</div>

button要素によるドロップダウン

button要素でリンク・リストの表示/非表示を切り替えるスタイル。

表示サンプル

ソースコード

<div class="dropdown">
	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
		ドロップダウン
		<span class="caret"></span>
	</button>
	<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>
</div>

a要素によるドロップダウン

a要素でリンク・リストの表示/非表示を切り替えるスタイル。

a要素のclass属性にbtn btn-defaultを指定することで、a要素をボタンの様なスタイルにすることもできる。

表示サンプル

ソースコード

<div class="dropdown">
	<a href="#" class="btn btn-default" data-toggle="dropdown" 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>
</div>

a要素によるドロップダウン２

a要素のhref属性値を残したままのスタイル。

a要素のclass属性にbtn btn-defaultを指定することで、a要素をボタンの様なスタイルにすることもできる。

表示サンプル

ソースコード

<div class="dropdown">
	<a data-target="#" href="http://cyberlab.info" class="btn btn-default" data-toggle="dropdown" 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>
</div>

リンク・リスト内をタイトルを付けて分類

class属性に、dropdown-headerを指定したリンク・リスト項目の要素（li要素）を用意することで、タイトルを付けてグループ分けできる。

表示サンプル

ソースコード

<div class="dropdown">
	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
		ドロップダウン
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li role="presentation" class="dropdown-header">グループＡ</li>
		<li role="presentation"><a href="#">リンクのリスト１</a></li>
		<li role="presentation"><a href="#">リンクのリスト２</a></li>
		<li role="presentation"><a href="#">リンクのリスト３</a></li>
		<li role="presentation" class="dropdown-header">グループＢ</li>
		<li role="presentation"><a href="#">リンクのリスト４</a></li>
		<li role="presentation"><a href="#">リンクのリスト５</a></li>
		<li role="presentation"><a href="#">リンクのリスト６</a></li>
	</ul>
</div>

リンク・リスト内を仕切りで分類

class属性に、dividerを指定したリンク・リスト項目の要素（li要素）を用意することで、仕切りでグループ分けできる。

表示サンプル

ソースコード

<div class="dropdown">
	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
		ドロップダウン
		<span class="caret"></span>
	</button>
	<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>
		<li role="presentation" class="divider"></li>
		<li role="presentation"><a href="#">リンクのリスト４</a></li>
		<li role="presentation"><a href="#">リンクのリスト５</a></li>
		<li role="presentation"><a href="#">リンクのリスト６</a></li>
	</ul>
</div>

無効のリンク・リスト項目

リンク・リスト項目の要素（li要素）のclass属性にdisabledを指定すると、無効化できる。

表示サンプル

ソースコード

<div class="dropdown">
	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
		ドロップダウン
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li role="presentation"><a href="#">リンクのリスト１</a></li>
		<li role="presentation"><a href="#">リンクのリスト２</a></li>
		<li role="presentation" class="disabled"><a href="#">リンクのリスト３</a></li>
		<li role="presentation"><a href="#">リンクのリスト４</a></li>
		<li role="presentation" class="disabled"><a href="#">リンクのリスト５</a></li>
		<li role="presentation"><a href="#">リンクのリスト６</a></li>
	</ul>
</div>