ブートストラップ ドロップダウンにサブメニューを実装するにはどうすればよいですか?

Bootstrap ドロップダウンで欠落しているサブメニューを解決する

はじめに

Bootstrap 3 (人気のあるフロントエンドの古いバージョン)フレームワークには、ドロップダウンにサブメニューを実装するための専用のクラスがありませんでした。この欠如は、よりシンプルなインターフェイスを好み、サブメニューの使用を減らすという進化する Web デザインのトレンドに起因すると考えられます。ただし、追加の CSS を使用してサブメニューの機能を実現する方法があります。

Bootstraps 5 (Updated 2023)

JavaScript を実装して、親が閉じたときにサブメニューが自動的に閉じるのを無効にします。ドロップダウンが開いています:

let dropdowns = document.querySelectorAll('.dropdown-toggle')
dropdowns.forEach((dd) => {
    dd.addEventListener('click', function (e) {
        var el = this.nextElementSibling
        el.style.display = el.style.display === 'block' ? 'none' : 'block'
    })
})

または、CSS を使用しますNavbar ドロップダウンの場合:

.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}
.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}

Bootstraps 4 (Updated 2018)

Bootstrap 3 ではドロップダウン サブメニュー クラスが削除されたため、CSS を使用した回避策は次のとおりです。必要:

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
}

ブートストラップ 3

CSS:

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

.dropdown-submenu > a:after {
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #cccccc;
    margin-top: 5px;
}

.dropdown-submenu:hover > a:after {
    border-left-color: #ffffff;
}

マークアップ:

<ul class="nav navbar-nav">
    <li class="menu-item dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li class="menu-item dropdown dropdown-submenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
                <ul class="dropdown-menu">
                    <li class="menu-item">
                        <a href="#">Link 1</a>
                    </li>
                    <li class="menu-item dropdown dropdown-submenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Link 3</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

以上がブートストラップ ドロップダウンにサブメニューを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。