ドロップダウン Dropdowns

---

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

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

---

使い方

ポイントは3つ。

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="#">リンクのリスト1</a></li>
		<li role="presentation"><a href="#">リンクのリスト2</a></li>
		<li role="presentation"><a href="#">リンクのリスト3</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="#">リンクのリスト1</a></li>
		<li role="presentation"><a href="#">リンクのリスト2</a></li>
		<li role="presentation"><a href="#">リンクのリスト3</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="#">リンクのリスト1</a></li>
		<li role="presentation"><a href="#">リンクのリスト2</a></li>
		<li role="presentation"><a href="#">リンクのリスト3</a></li>
	</ul>
</div>

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

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="#">リンクのリスト1</a></li>
		<li role="presentation"><a href="#">リンクのリスト2</a></li>
		<li role="presentation"><a href="#">リンクのリスト3</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">グループA</li>
		<li role="presentation"><a href="#">リンクのリスト1</a></li>
		<li role="presentation"><a href="#">リンクのリスト2</a></li>
		<li role="presentation"><a href="#">リンクのリスト3</a></li>
		<li role="presentation" class="dropdown-header">グループB</li>
		<li role="presentation"><a href="#">リンクのリスト4</a></li>
		<li role="presentation"><a href="#">リンクのリスト5</a></li>
		<li role="presentation"><a href="#">リンクのリスト6</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="#">リンクのリスト1</a></li>
		<li role="presentation"><a href="#">リンクのリスト2</a></li>
		<li role="presentation"><a href="#">リンクのリスト3</a></li>
		<li role="presentation" class="divider"></li>
		<li role="presentation"><a href="#">リンクのリスト4</a></li>
		<li role="presentation"><a href="#">リンクのリスト5</a></li>
		<li role="presentation"><a href="#">リンクのリスト6</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="#">リンクのリスト1</a></li>
		<li role="presentation"><a href="#">リンクのリスト2</a></li>
		<li role="presentation" class="disabled"><a href="#">リンクのリスト3</a></li>
		<li role="presentation"><a href="#">リンクのリスト4</a></li>
		<li role="presentation" class="disabled"><a href="#">リンクのリスト5</a></li>
		<li role="presentation"><a href="#">リンクのリスト6</a></li>
	</ul>
</div>