ホームページ >ウェブフロントエンド >CSSチュートリアル >Twitter Bootstrap 2 で複数レベルのドロップダウン メニューを作成する方法?

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

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-11-27 04:59:091016ブラウズ

How to Create a Multilevel Dropdown Menu in Twitter Bootstrap 2?

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

Twitter Bootstrap 2 の要素を使用してマルチレベル ドロップダウン メニューを作成するには、カスタム実装が必要です。

元の応答v2.1.1 より前の

Bootstrap 2 は、マルチレベルのドロップダウンをネイティブにサポートしていません。これを実現するには、追加の 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 {
  /* Styling for the arrow pointer */
  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 {
  /* Additional styling for the arrow pointer */
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}

Updated Response v2.1.1 以降

ブートストラップ用バージョン 2.1.1 以降では、マルチレベルのドロップダウンがデフォルトで含まれています。ドキュメントのガイドラインに従ってください:

[Bootstrap Multilevel Dropdown Documentation](https://getbootstrap.com/docs/2.3.2/components/#dropdowns)

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。