Twitter Bootstrap 2 で複数レベルのドロップダウン メニューを作成するにはどうすればよいですか?

Twitter Bootstrap 2 を使用した複数レベルのドロップダウン メニューの作成

Twitter Bootstrap 2 は堅牢なコンポーネントのセットを提供しますが、複数レベルのドロップダウン メニューはネイティブにサポートされていません。この問題は GitHub コミュニティ内で懸念を引き起こし、多くの開発者が代替ソリューションを模索するようになりました。

この制限に対処するには、次の 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;
}

この CSS を追加することで、アプリケーションにカスタム .sub-menu クラスを作成して、標準のドロップダウンを拡張して追加のレベルを含めることができます。サブメニューの位置と可視性は CSS を通じて制御できます。

このソリューションは、マルチレベル ドロップダウンのネイティブ サポートが導入された Bootstrap バージョン 3 より前に作成されました。 Bootstrap バージョン 2 を使用している場合、このソリューションは同様の機能を実現するのに適しています。ただし、Bootstrap バージョン 3 以降では、このソリューションを使用する必要はなくなりました。

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