「Bootstrap ComponentsのDropdowns」のサンプル
「BootstrapのComponentsのサンプル：和訳」の「Dropdowns」のサンプルページです。
基本
BootstrapのJavascriptファイル必要。
ドロップダウン
「.dropdown」の要素内にボタンとメニューを記載。
区切り線（divider）は「<li role="separator" class="divider"></li>」
実際のソース
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">鳥精</a></li>
<li><a href="#">豚精</a></li>
<li><a href="#">丸ごとシマウマ</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">冷酒</a></li>
<li><a href="#">燗酒</a></li>
</ul>
</div>上に表示
「.dropdown」を「.dropup」。
「button」の「属性：aria-expanded」の値が「false」になっているが理由は不明。上に表示するコトが無さそうだから調査せず。
実際のソース
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">鳥精</a></li>
<li><a href="#">豚精</a></li>
<li><a href="#">丸ごとシマウマ</a></li>
</ul>
</div>右に表示
ulタグに指定しているクラス「dropdown-menu」を「dropdown-menu dropdown-menu-right」にする。
※表示されるのが右すぎるんだが・・・通常のドロップダウンしか使わないから調査せず。ひょっとした・・・このページで使っているBootstrapじゃないCSSと競合してるかも。
実際のソース
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu3">
<li><a href="#">鳥精</a></li>
<li><a href="#">豚精</a></li>
<li><a href="#">丸ごとシマウマ</a></li>
</ul>
</div>ヘッダあり
ヘッダというより・・・リストのカテゴリ名的な感じ。
liタグに「class="dropdown-header"」を追加すればOK。
見づらく感じるので装飾を追加するか、区切り線（divider）も追加するかしたほうがいいかもしれない。
実際のソース
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li class="dropdown-header">串</li>
<li><a href="#">鳥精</a></li>
<li><a href="#">豚精</a></li>
<li><a href="#">丸ごとシマウマ</a></li>
<li class="dropdown-header">ドリンク</li>
<li><a href="#">冷酒</a></li>
<li><a href="#">燗酒</a></li>
</ul>
</div>任意のアイテムの無効化
無効化したいliタグにクラス「disabled」を追加
実際のソース
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu5">
<li><a href="#">鳥精</a></li>
<li><a href="#">豚精</a></li>
<li class="disabled"><a href="#">丸ごとシマウマ</a></li>
</ul>
</div>