Bootstrap標準のボタンメニュー。class名で色が決まっている。 btnbtn-primarybtn-dangerbtn-infoなどがある。Bootstrapから分離して使えるdropdown.css(15kb)dropdown.js(4kb)を作成した。jqueryは2.3以降。

<link rel="stylesheet" href="/assets/css/dropdown.css">
<script type="text/javascript" src="/assets/js/jquery.js"></script>
<script type="text/javascript" src="/assets/js/dropdown.js"></script>

<div class="btn-toolbar">
 <div class="btn-group">
  <a class="btn" href="#">HOME</a>
  <a class="btn" href="#">ABOUT</a>
 </div> 
 <div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown">
   Action <span class="caret"></span></a>
  <ul class="dropdown-menu">
   <li><a href="#">Action</a></li>
   <li><a href="#">Another action</a></li>
   <!-- dropdown menu links -->
  </ul>
 </div>
 <div class="btn-group">
   <!-- another dropdown menu --> 
 </div>
</div>

※ボタンメニューの間隔を 0 にするとき→ .btn-toolbar .btn-group { margin:0; }
※ボタン<button>は<a>タグに変更した。

Vertical Menus

※縦型メニューは、.btn-vertical と .btn-group-verticalを使う。