web-dev-qa-db-fra.com

Créer un menu à remplissage automatique et ajouter des divs supplémentaires à la disposition du menu

Ce que j'essaie de réaliser:

Un menu avec un niveau de sous-menus:

PAGE 1<br>
--- Page 1 sub-page 1<br>
--- Page 1 sub-page 2<br>
PAGE 2<br>
--- Page 2 sub-page 1<br>
--- Page 2 sub-page 2<br>
--- Page 2 sub-page 3<br>
PAGE 3<br>
--- Page 3 sub-page 1<br>
--- Page 3 sub-page 2<br>

Sur la PAGE 1, affichez toutes les sous-pages de la PAGE 1 dans une section située au-dessous des pages de niveau supérieur. Sur la PAGE 1 et survolez la PAGE 2, affichez toutes les sous-pages de la PAGE 2 dans une section située au-dessous des pages de niveau supérieur.

Pour l'afficher correctement sur mon site Web, je dois ajouter une div à l'intérieur du ul.sub-menu

<ul>
  <li><a>...</a>
    <ul class="sub-menu">
      <div class="container">
        <li><a>...</a></li>
        <li><a>...</a></li>
        <li><a>...</a></li>
      </div>
    </ul>
  </li>
</ul>

Pour ce faire, j'ai essayé de créer une classe Walker, mais lorsque je l'ajoute à ma fonction wp_nav_menu (), il supprime tous les menus. C'est la classe Walker que j'ai utilisée:

class custom_wp_walker extends Walker_Nav_Menu{
  function start_lvl(&$output, $depth) {
    $output .= '<ul class="children"> 
                  <div class="container">';
  }
  function end_lvl(&$output, $depth) {
    $output .= '
        </div>
        </ul>';
  }
}

Maintenant, pour que mon menu soit auto-peuplant, je n’ai pas créé de menu dans le backend de wordpress (Apparence -> Menus). Et si je supprime la classe walker, tous les éléments de menu, y compris les éléments enfants, sont ajoutés au début. Je ne peux tout simplement pas le coiffer correctement.

Si, toutefois, je crée un menu dans le backend et ajoute manuellement les éléments que j'ai, la classe Walker fonctionne et ajoute le div supplémentaire. Le problème est que les éléments enfants ne sont pas ajoutés automatiquement et j'en ai besoin. La classe Walker nécessite-t-elle que des pages soient ajoutées manuellement dans le backend pour fonctionner?

Les personnes pour lesquelles je construis le site sont un peu mal à l'aise sur le plan technologique. Il doit donc se peupler car elles ne peuvent le faire elles-mêmes.

Ma question est donc la suivante: comment puis-je ajouter cette div supplémentaire dans le ul.sub-menu tout en conservant un menu entièrement auto-peuplant? Y a-t-il un autre moyen que la classe Walker? J'ai essayé de chercher une solution sur Google, mais je n'ai rien trouvé d'autre.

theme-developmentmenuswalkersub-menu
2
laura.f

Votre structure html devrait ressembler à

<ul class="parent-class">
  <li>Page 1</li>
  <li>
    <ul class="child-class">
      <li> Sub menu item 1</li>
      <li> Sub menu item 2</li>
    </ul>
  </li>
</ul>

Wordpress devrait automatiquement ajouter une classe "active" à la page active, vous devriez donc pouvoir tout mettre en style avec css. Quelque chose comme

.parent-class li ul {
   Display:none;
}

.Active li ul {
   display:block;
}

.parent-class:hover > .parent-class li ul {
   display:block

}
0
mrmadhat