So fügen Sie Bootstrap Untermenüs hinzu

Leon A. - July 19, 2024

Implementierung von Dropdown-Untermenüs

CSS-basierte Lösung für Bootstrap 5

Um Dropdown-Untermenüs in Bootstrap 5 hinzuzufügen, können Sie benutzerdefiniertes CSS verwenden. Diese Methode konzentriert sich auf die Positionierung der Untermenüs und das Hinzufügen von Hover-Effekten für Menüelemente.

Hier ist ein CSS-Beispiel für die Positionierung von Untermenüs:

.dropdown-submenu {
  position: relative;
}

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

Dieses CSS positioniert das Untermenü rechts neben seinem übergeordneten Menüelement. Um Hover-Effekte hinzuzufügen, fügen Sie Folgendes hinzu:

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

Dieses CSS zeigt das Untermenü an, wenn der Mauszeiger über dem übergeordneten Menüelement schwebt.

Tipp: Überlauf von Untermenüs verhindern

Um zu verhindern, dass Untermenüs auf kleineren Bildschirmen über den sichtbaren Bereich hinausragen, fügen Sie dieses CSS hinzu:

@media (max-width: 768px) {
  .dropdown-submenu .dropdown-menu {
    left: 0;
    top: 100%;
  }
}

Dies positioniert das Untermenü auf kleineren Bildschirmen unter seinem übergeordneten Element.

JavaScript-erweiterte Herangehensweise

Für mehr Kontrolle über das Verhalten von Untermenüs können Sie JavaScript verwenden. Diese Methode hilft, das Schließen von Untermenüs zu verhindern und fügt eine Funktion zum Ein- und Ausblenden hinzu.

Hier ist ein JavaScript-Beispiel:

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

Dieses Skript verhindert, dass sich das Untermenü schließt, wenn das übergeordnete Dropdown geöffnet ist. Es schaltet die Anzeige des Untermenüs zwischen 'block' und 'none' um, wenn es angeklickt wird.

Alternative Methoden

Nur-CSS Navbar Dropdown-Untermenüs

Sie können Navbar-Dropdown-Untermenüs ohne JavaScript erstellen. Diese Methode verwendet CSS, um verschachtelte Dropdown-Menüs zu gestalten und Untermenüs beim Überfahren mit der Maus zu aktivieren.

Um verschachtelte Dropdown-Menüs zu gestalten, verwenden Sie dieses CSS:

.dropdown-submenu {
  position: relative;
}

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

Dieses CSS positioniert das Untermenü rechts neben seinem übergeordneten Menüpunkt und erzeugt so ein verschachteltes Aussehen.

Um Untermenüs beim Überfahren mit der Maus zu aktivieren, fügen Sie dieses CSS hinzu:

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

Diese CSS-Regel zeigt das Untermenü an, wenn Sie mit der Maus über den übergeordneten Menüpunkt fahren, und erzeugt so eine flüssige Navigation.

Tipp: Verbessern Sie die Barrierefreiheit

Um Ihre reinen CSS-Untermenüs barrierefreier zu gestalten, fügen Sie Unterstützung für die Tastaturnavigation hinzu. Sie können dies tun, indem Sie die :focus-Pseudoklasse zusammen mit :hover in Ihren CSS-Regeln verwenden.

Anpassung an verschiedene Bootstrap-Versionen

Bootstrap 4 Untermenü-Implementierung

Bootstrap 4 benötigt CSS-Änderungen, um Dropdown-Untermenüs hinzuzufügen. Hier ist ein CSS-Beispiel für Bootstrap 4:

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

Dieses CSS platziert das Untermenü rechts neben seinem Elternelement und zeigt es beim Hover an.

Für klickbasierte Untermenü-Optionen können Sie diese JavaScript-Funktion verwenden:

$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
  if (!$(this).next().hasClass('show')) {
    $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
  }
  var $subMenu = $(this).next('.dropdown-menu');
  $subMenu.toggleClass('show');
  return false;
});

Dieses Skript schaltet die 'show'-Klasse für das Untermenü beim Klicken um und ermöglicht so eine klickbasierte Navigation.

Tipp: Verbesserung der Barrierefreiheit

Um die Barrierefreiheit zu verbessern, fügen Sie ARIA-Attribute zu Ihren Dropdown-Menüelementen hinzu. Zum Beispiel:

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <!-- Dropdown-Elemente hier -->
  </div>
</li>

Dies hilft Screenreadern, die Struktur und das Verhalten Ihrer Dropdown-Menüs zu verstehen.

Bootstrap 3 Legacy-Unterstützung

Für Bootstrap 3 benötigen Sie benutzerdefiniertes CSS, um Dropdown-Untermenüs zu erstellen. Hier ist ein Beispiel:

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

Dieses CSS positioniert das Untermenü und zeigt es beim Hover an.

Die HTML-Struktur für verschachtelte Dropdowns in Bootstrap 3 sieht wie folgt aus:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li class="dropdown-submenu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Untermenü</a>
            <ul class="dropdown-menu">
                <li><a href="#">Untermenü-Element 1</a></li>
                <li><a href="#">Untermenü-Element 2</a></li>
            </ul>
        </li>
    </ul>
</li>

Diese Struktur erstellt ein Dropdown mit einem verschachtelten Untermenü und ermöglicht so eine mehrstufige Navigation in Bootstrap 3.