Un menú desplegable con tu propio diseño

Dónde va

En el bloque del menú, con el nombre del menú como valor. Dentro, dos patrones: wp-menu-tpl="link" para un elemento simple y wp-menu-tpl="drop" para un elemento con subelementos.

Dentro de los patrones: wp="menu-title-link" (el nombre y la dirección del elemento) y wp="menu-children" en el elemento que se repite para cada subelemento. Si ese elemento es el propio enlace con su texto, la generación pone en él el nombre y la dirección del subelemento.

Ejemplo: «Menu» con bebidas y cocina

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

Lo importante

• Tantos niveles como quieras: wp="menu-children" dentro de un subelemento muestra el siguiente nivel.
• Si solo hay un patrón, todos los elementos lo usan.
• Para un menú sencillo, wp-menu es más corto.

Errores frecuentes

El registro de la generación es la pestaña «Registros» de tu proyecto en themeforge.pro; la revisión gratuita del marcado muestra los mismos avisos.

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

Tareas relacionadas