Wie erstelle ich einen mehrstufigen Dropdown in Bootstrap Navbar?

So erstellen Sie ein mehrstufiges Dropdown-Menü in der Bootstrap-Navigationsleiste, 1. Sie müssen ein mehrstufiges Menü über einen verschachtelten & lt; ul & gt erstellen. Struktur; 2. Fügen Sie ein benutzerdefiniertes CSS hinzu, um die Untermenüposition zu steuern, z. 3. Verwenden Sie Data-BS-Toggle = "Dropdown" oder benutzerdefinierte JS, um die Submenu-Erweiterungslogik zu implementieren, z. B. Klicken, um den Anzeigestatus zu wechseln. 4. Optimieren Sie die mobile Interaktion, es wird empfohlen, zu klicken, um die Ebenen zu erweitern, zu begrenzen und das gefaltete Menü zu verwenden, um sich an Touchscreen -Vorgänge anzupassen.

Die Navigationsleiste von Bootstrap (NAVBAR) unterstützt nur standardmäßig einschichtige Dropdown-Menüs. Es ist eigentlich nicht schwierig, diese Funktion zu implementieren. Es erweitert hauptsächlich die nativen Funktionen von Bootstrap über benutzerdefinierte CSS und JS.

Das Folgende sind die spezifischen Betriebsmethoden und Vorsichtsmaßnahmen:

So erstellen Sie in der Bootstrap-Navigationsleiste ein mehrstufiges Dropdown-Menü

Bootstrap selbst unterstützt mehrstufige Dropdown-Menüs nicht direkt, daher müssen Sie die HTML-Struktur manuell ändern und mit einigen CSS oder JavaScript zusammenarbeiten, um das sekundäre Menü anzuzeigen. Der entscheidende Punkt besteht darin, die Elemente <ul></ul> korrekt zu nisten und zu steuern, wie sie erscheinen.

Die Grundstruktur ist wie folgt:

 <ul class = "navbar-nav">
  <li class = "nav-iTem Dropdown">
    <a class = "nav-link dropdown-toggle" href = "#" id = "navbardropdown" rollen = "button" data-bs-toggle = "Dropdown"> Menü erster Ebene </a>
    <ul class = "Dropdown-Menu">
      <li> <a class = "dropdown-item" href = "#"> submenu1 </a> </li>
      <li class = "Dropdown-Submenu">
        <a class = "Dropdown-item Dropdown-Toggle" href = "#" data-bs-toggle = "Dropdown"> Elemente mit Submenu </a>
        <ul class = "Dropdown-Menu">
          <li> <a class = "Dropdown-item" href = "#"> Menü der zweiten Ebene 1 </a> </li>
          <li> <a class = "Dropdown-item" href = "#"> Menü der zweiten Ebene 2 </a> </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Dadurch wird eine grundlegende Struktur mit mehreren Ebenen erstellt, aber es erfordert auch eine Stilunterstützung, um sie normal anzuzeigen.

Fügen Sie den CSS -Stil hinzu, um die Position des Untermenüs zu steuern

Standardmäßig ist .dropdown-menu von Bootstrap versteckt, und selbst wenn Sie eine verschachtelte .dropdown-menu einrichten, wird es unter dem übergeordneten Menü angezeigt, nicht daneben.

Sie müssen ein CSS hinzufügen, damit es horizontal angezeigt wird und es an der richtigen Stelle positionieren:

 .dropdown-submenu {
  Position: Relativ;
}

.dropdown-Submenu .dropdown-menu {
  Top: 0;
  Links: 100%;
  Rand: -1px;
}

Mit diesem CSS kann das Untermenü nach rechts auftauchen und es gegen das übergeordnete Menü anzeigen. Wenn Sie von rechts nach links auftauchen möchten, können Sie es nach right: 100% .

Verwenden Sie JavaScript, um zu steuern, wie Submenü ausgelöst wird

Obwohl Bootstrap data-bs-toggle="dropdown" -attribut zur Steuerung der Anzeige des Primärmenüs liefert, wird die Standardeinstellung für das sekundäre Menü nicht automatisch erweitert. Sie können die folgenden Möglichkeiten auswählen, um damit umzugehen:

• Dropdown-Plugin mit Bootstrap : data-bs-toggle="dropdown" -attribut zum Link zum Untermenü hinzufügen.
• Fügen Sie benutzerdefinierte JS hinzu : Das Menü schließt beim Klicken oder automatisch erweitert, wenn das Schwebewechsel automatisch erweitert wird.

Zum Beispiel:

 document.querySelectorAll ('. Dropdown-Submenu> a'). foreach (link => {
  link.addeventListener ('klick', function (e) {
    E.Stoppropagation ();
    E.PreventDefault ();
    const submenu = this.NextElementSibling;
    submenu.classlist.toggle ('show');
  });
});

Auf diese Weise kann der Benutzer beim Klicken auf ein Element mit einem Untermenü den Anzeigestatus des Untermenus manuell wechseln.

Mobile Anpassung und Interaktionsoptimierung

Multi-Level-Menüs sind auf dem Handy möglicherweise nicht sehr freundlich, insbesondere wenn sie zu tief verschachtelt sind. Es wird empfohlen, die folgenden Optimierungen vorzunehmen:

• Deaktivieren Sie das Schwebeverhalten des Untermenüs auf dem kleinen Bildschirm und klicken Sie, um stattdessen zu erweitern.
• Vermeiden Sie es, zu viele Ebenen zu nisten. Es ist am besten, höchstens zwei Schichten zu haben.
• Erwägen Sie, ein Faltmenü (Zusammenbruch) anstelle eines Dropdown-Menüs zu verwenden, das besser für Touchscreen-Vorgänge geeignet ist.

Grundsätzlich ist das. Der Schlüssel zur Implementierung von Dropdown-Menüs auf mehreren Ebenen ist die strukturelle Verschachtelung, die CSS-Positionierung und die angemessene Interaktionslogik. Es scheint nicht kompliziert zu sein, aber es ist einfach, Details in tatsächlichen Projekten zu ignorieren, insbesondere im reaktionsschnellen Designteil.

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen mehrstufigen Dropdown in Bootstrap Navbar?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!