Bootstrapでドロップダウンメニューを作成する

Bootstrapを利用すると、簡単にドロップダウンメニューを作成にすることができます。
参考ページ:Dropdowns

dropdown

1.ドロップダウンするテキストにdata-toggle=”dropdown”を追加
2.表示するメニューリスト(ul)にclass=”dropdown-menu”を追加
3.これらを囲うdivタグ等にclass=”dropdown”を追加(※これを追加しない場合、メニューが変な場所に表示される可能性があります)

<div class="dropdown">
	<a href="#" data-toggle="dropdown">ドロップダウン</a>
	<ul class="dropdown-menu">
		<li>メニュー1</li>
		<li>メニュー2</li>
		<li>メニュー3</li>
		<li>メニュー4</li>
	</ul>
</div>

ドロップダウンをボタンにすることもできます。
ボタン横に▼(キャレット)を表示することもできます。

<b class="caret"></b>

dropdown1

<div class="dropdown">
	<button href="#" class="btn btn-defualt" data-toggle="dropdown">ドロップダウン<b class="caret"></b></button>
	<ul class="dropdown-menu">
		<li>メニュー1</li>
		<li>メニュー2</li>
		<li>メニュー3</li>
		<li>メニュー4</li>
	</ul>
</div>

※BootstrapサイトのDropdownsにある最初のサンプルをそのまま利用しても表示されません。表示したいときは、buttonのクラスにある”sr-only”を削除すると表示されます。

Bootstrapでドロップダウンメニューを作成する」への1件のフィードバック

  1. ピンバック: Bootstrapでドロップダウンメニューを作成する|プログラミング | ミリオンハイスクール | ネットビジネス | WordPress

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です