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

Pocket

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

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

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

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

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

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

  • Pingback: Bootstrap3のドロップダウンをマウスオーバーで開く方法 | Designup()

  • Pingback: CSSで作成した多階層ドロップダウンメニュー | わくわく ぷろぐらみんぐ()

  • Sakoda Hiroshi

    はじめまして。Bootstrapを勉強中の者です。

    こちらのコードを参考にして、ドロップダウンにサブメニューをつけることができました。

    PCではまったく問題ないのですが、スマホではサブメニューが表示されません(選択できません)。

    どのようにしたらいいのでしょうか?ご教示いただければ幸いです。

  • starwars

    はじめまして。

    Bootstrapを勉強中の者です。

    こちらを参考にしてサブメニューを作って見ました。

    PCでは問題なく作動するのですが、スマホだとサブメニュー(こちらの例だと「Dropdown」)をタップすると、メニューが閉じてしまいます。

    下記のURLの方法も試してみましたが、ダメでした。
    http://mawatari.jp/archives/twitter-bootstrap-dropdown-menu-not-clickable-on-touch-devices
    http://taneakashi.ad-mk.com/bootstrap3-dropdown-css.html

    何か解決法があればご教示頂ければ幸いです。

    • Takeshi

      Bootstrapのドロップダウンはデフォルト状態だと多階層には対応していないため、自分でJavascriptを書いていくしかないと思います。

      具体的には、jsでclickイベントを書いて、スタイルかclassを追加することで解決可能かと思います。

      もしくは開閉するのではなく、下の階層まで全て表示されたメニューを表示するかですね。