Twitter Bootstrap 2 でマルチレベルのドロップダウン メニューを作成する方法?

Twitter Bootstrap 2 の複数レベルのドロップダウン メニュー

この機能はネイティブでサポートされていませんが、Twitter Bootstrap 2 の要素を使用して複数レベルのドロップダウン メニューを作成することができます。 .

更新された回答 (ブートストラップ) v2.1.1)

ブートストラップは、v2.1.1 でデフォルトでマルチレベルのドロップダウンをサポートするようになりました。更新されたスタイルシートは、ネストされたドロップダウン メニューのスタイルを提供します。

元の回答

元々、Bootstrap はサブメニューのサポートを提供していませんでした。ただし、CSS と HTML を利用してカスタム ソリューションを実装できます。

CSS

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
    display: block;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

HTML

追加ネストされたドロップダウン メニューへの .sub-menu クラスitems:

<ul class="dropdown-menu">
  <li>Item 1</li>
  <li class="sub-menu">
    <a href="#">Item 2</a>
    <ul class="dropdown-menu">
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

このソリューションは、ネストされたドロップダウン メニューを親メニュー項目の右側に配置し、クリック可能なサブメニューを示す矢印を追加します。

以上がTwitter Bootstrap 2 でマルチレベルのドロップダウン メニューを作成する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。