Un menu déroulant à votre propre design

Où le placer

Sur le bloc du menu, avec le nom du menu comme valeur. À l’intérieur, deux modèles : wp-menu-tpl="link" pour un élément simple et wp-menu-tpl="drop" pour un élément avec sous-éléments.

Dans les modèles : wp="menu-title-link" (le nom et l’adresse de l’élément), et wp="menu-children" sur l’élément répété pour chaque sous-élément. Si cet élément est le lien lui-même avec son libellé, la génération y place le nom et l’adresse du sous-élément.

Exemple : « Menu » avec les boissons et la cuisine

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

À retenir

• Autant de niveaux que nécessaire : wp="menu-children" dans un sous-élément affiche le niveau suivant.
• S’il n’y a qu’un seul modèle, tous les éléments l’utilisent.
• Pour un menu simple, wp-menu est plus court.

Erreurs fréquentes

Le journal de génération est l’onglet « Journaux » de votre projet sur themeforge.pro ; la vérification gratuite du balisage affiche les mêmes remarques.

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

Tâches liées