ホームページ >ウェブフロントエンド >CSSチュートリアル >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 サイトの他の関連記事を参照してください。