Wie implementiert man Untermenüs in Bootstrap-Dropdowns?

Fehlendes Untermenü im Bootstrap-Dropdown beheben

Einführung

Bootstrap 3, eine ältere Version des beliebten Frontends Framework fehlte eine dedizierte Klasse zum Implementieren von Untermenüs in Dropdowns. Dieses Fehlen lässt sich auf die sich entwickelnden Webdesign-Trends zurückführen, die einfachere Benutzeroberflächen und eine reduzierte Verwendung von Untermenüs bevorzugen. Es gibt jedoch Möglichkeiten, die Funktionalität von Untermenüs mithilfe von zusätzlichem CSS zu erreichen.

Bootstraps 5 (aktualisiert 2023)

Implementieren Sie JavaScript, um das automatische Schließen von Untermenüs beim Öffnen des übergeordneten Menüs zu deaktivieren Dropdown-Liste ist geöffnet:

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'
    })
})

Alternativ können Sie CSS für die Navigationsleiste verwenden Dropdowns:

.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 (aktualisiert 2018)

Aufgrund der Entfernung der Dropdown-Untermenü-Klasse in Bootstrap 3 ist eine Problemumgehung mithilfe von CSS erforderlich:

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

.dropdown-submenu {
    position: relative;
}

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

Bootstraps 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;
}

Markup:

<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>

Das obige ist der detaillierte Inhalt vonWie implementiert man Untermenüs in Bootstrap-Dropdowns?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!