ドロップダウンメニューは、定義済みリストから値を選択することを可能にするトグルメニューです。
ドロップダウン に関するチュートリアルは、Bootstrap ドロップダウン・チュートリアルご覧ください。
クラス | 説明 | 例 |
---|---|---|
.dropdown | ドロップダウンメニューを表示する | Try it |
.dropdown-menu | ドロップダウンメニューを作成する | Try it |
.dropdown-menu-right | 右揃えのドロップダウンメニュー | Try it |
.dropdown-header | ドロップダウンメニュー内にヘッダを追加する | Try it |
.dropup | アップドロップメニューを表示する | Try it |
.disabled | ドロップダウンメニュー内の項目を無効にする | Try it |
.divider | 横線でドロップダウンメニュー内の項目を区切る | Try it |
ドロップダウンメニューをトグルするため、リンクまたはボタンに data-toggle="dropdown"
を追加します。
手動で有効にします:
注: dropdown() メソッドをコールするどうかにかかわらず、data-toggle="dropdown" 属性は必要です。
None |
次の表は、使用できる全ドロップダウン・メソッドの一覧です。
メソッド | 説明 | Try it |
---|---|---|
.dropdown("toggle") | ドロップダウンをトグルする | Try it |
次の表は、使用できる全ドロップダウン・イベントの一覧です。
イベント | 説明 | Try it |
---|---|---|
show.bs.dropdown | ドロップダウンが表示されようとしているときに発生する | Try it |
shown.bs.dropdown | ドロップダウンが完全に表示されたときに発生する (CSS のトランジションが完了した後) | Try it |
hide.bs.dropdown | ドロップダウンが隠されようとしているときに発生する | Try it |
hidden.bs.dropdown | ドロップダウンが完全に隠されたときに発生する (CSS のトランジションが完了した後) | Try it |
チップ: ドロップダウンをトリガーした要素を取得するため、 jQuery の event.relatedTarget を使用します:
$(".dropdown").on("show.bs.dropdown", function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
alert(x);
});
Try it Yourself »
次の例は、ドロップダウンをクリックしたときに、下向きのキャレット・アイコンを上向きに変更します:
/* CSS: */
<style>
.caret.caret-up {
border-top-width: 0;
border-bottom: 4px solid #fff;
}
</style>
/* JS: */
<script>
$(document).ready(function(){
$(".dropdown").on("hide.bs.dropdown", function(){
$(".btn").html('Dropdown
<span class="caret"></span>');
});
$(".dropdown").on("show.bs.dropdown",
function(){
$(".btn").html('Dropdown <span
class="caret caret-up"></span>');
});
});
</script>
Try it Yourself »
次の例は、ナビゲーションバーのボタンにドロップダウンメニューを追加します:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Page
1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Page
1-1</a></li>
<li><a href="#">Page
1-2</a></li>
<li><a href="#">Page
1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
Try it Yourself »
次の例は、ナビゲーションバーにログインフォーム付きのドロップダウンメニューを追加します:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Login <span
class="glyphicon glyphicon-log-in"></span></a>
<div
class="dropdown-menu">
<form
id="formlogin" class="form container-fluid">
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div
class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<button
type="button" id="btnLogin" class="btn btn-block">Login</button>
</form>
<div class="container-fluid">
<a class="small" href="#">Forgot password?</a>
</div>
</div>
</li>
</ul>
Try it Yourself »
この例では、クリック時にマルチレベルのドロップダウンメニューを開くために jQuery を使用します:
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click",
function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
Try it Yourself »
この例では、マルチレベルのドロップダウンへカスタム .dropdown-submenu
クラスを作成しました:
/* CSS: */
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top:
-1px;
}
</style>
/* JS: */
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click",
function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
Try it Yourself »