Bootstrap3のドロップダウンを多階層にする方法

このエントリーをはてなブックマークに追加
Pocket

CSSフレームワークとして最も人気の高いBootstrap。すでに多くの方が使っていると思います。Bootstrapを使っていて、ちょっとだけレイアウトや動きを変えたいということはよくあるんですが、ここで紹介するドロップダウンもその１つ。

通常はリンク（dropdown-toggle）をクリックするとメニューが開くという仕組み。
bootstrap-dropdown

ドロップダウンでよくある要望が、マウスオーバーで開きたい場合やメニューの多階層化です。Bootstrapのドロップダウンをマウスオーバーで開く方法でマウスオーバーの方法を解説しましたが、ここでは多階層化する方法をまとめてみます。

Bootstrapのドロップダウンを多階層化する

デフォルトでは上記の画像のように１階層だけ表示されます。これを多階層化するには以下のようなコードを追加します。

HTML

<div class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a>
  <ul class="dropdown-menu multi-level">
    <li><a href="#">Default</a></li>
    <li class="dropdown-submenu">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a href="#">sub menu1</a></li>
      <li class="dropdown-submenu">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu1</a>
      <ul class="dropdown-menu">
        <li class="dropdown-submenu">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu2</a>
        <ul class="dropdown-menu">
          <li><a href="#">sub menu3</a></li>
          <li><a href="#">sub menu3</a></li>
          <li><a href="#">sub menu3</a></li>
        </ul>
        </li>
      </ul>
      </li>
    </ul>
    </li>
  </ul>
</div>

CSS

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
  display: block;
}

.dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
  border-left-color: #fff;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}

参考:Multi level Navbar Menu

実行結果は以下のようになります。dropdown-submenuで囲ったdropdown-menuを増やしていくだけなので作るのも簡単。
bootstrap-dropdown2