Ein Dropdown-Menü in deinem eigenen Design

Wo es hingehört

An den Block des Menüs, mit dem Namen des Menüs als Wert. Darin zwei Vorlagen: wp-menu-tpl="link" für einen einfachen Eintrag und wp-menu-tpl="drop" für einen Eintrag mit Unterpunkten.

In den Vorlagen: wp="menu-title-link" (Name und Adresse des Eintrags) und wp="menu-children" an dem Element, das für jeden Unterpunkt wiederholt wird. Ist dieses Element selbst der Link mit Beschriftung, setzt der Build Name und Adresse des Unterpunkts ein.

Beispiel: „Menu“ mit Getränken und Küche

<nav class="nav" wp-menu-tree="Header Menu">
  <a href="#" class="nav-link" wp-menu-tpl="link"
     wp="menu-title-link">Home</a>
  <div class="dropdown" wp-menu-tpl="drop">
    <a href="#" class="nav-link" wp="menu-title-link">Menu</a>
    <div class="dropdown__list">
      <a href="#" class="dropdown__link" wp="menu-children">Drinks</a>
    </div>
  </div>
</nav>

Worauf es ankommt

• Beliebig viele Ebenen: wp="menu-children" in einem Unterpunkt gibt die nächste Ebene aus.
• Gibt es nur eine Vorlage, nutzt jeder Eintrag sie.
• Für ein einfaches Menü ist wp-menu kürzer.

Typische Fehler

Das Build-Protokoll ist der Tab „Logs“ deines Projekts auf themeforge.pro; die kostenlose Markup-Prüfung zeigt dieselben Hinweise.

<nav wp-menu-tree="Header Menu">
  <div class="item">
    <a href="#" wp="menu-title-link">Menu</a>
    <div class="sub" wp="menu-children">
      <span class="sub__text">Drinks</span>
    </div>
  </div>
</nav>

<nav wp-menu-tree="Header Menu">
  <div class="item">
    <a href="#" wp="menu-title-link">Menu</a>
    <div class="sub" wp="menu-children">
      <span class="sub__text" wp="menu-title">Drinks</span>
    </div>
  </div>
</nav>

Verwandte Aufgaben