web-dev-qa-db-fra.com

Ajouter une classe (flèches) aux liens du menu principal ayant des enfants?

Je me demande s'il est possible d'ajouter différentes classes aux éléments de deuxième/troisième/quatrième/niveau/etc ayant des enfants dans l'arborescence Apparence> Menus?

C'est comme ça que j'appelle le menu:

 <?php $menu_args = array(
    'container'       => '', 
    'menu_class'      => '', 
    'menu_id'         => 'my-menu',
    'walker'          => new Description_Walker);

    wp_nav_menu($menu_args );   
 ?>

Je sais que chaque lien possède un ID différent comme <li id="menu-item-3230">, mais je souhaite que la solution soit dynamique afin de ne pas avoir à modifier le code à chaque fois que je modifie quelque chose. Je suppose que le moyen le plus simple sera d’attacher une classe supplémentaire à ces éléments, mais comment?

enter image description here

menusjavascriptwalker
2
Wordpressor

Il y a deux façons de le faire:

  • Javascript. Vous pouvez utiliser JQuery pour sélectionner le <li> qui a <ul> enfants de la classe 'sous-menu', insérant du contenu ou ajoutant une classe CSS que vous stylisez ensuite. Par exemple: $('.sub-menu').parent().addClass('myclass')

  • PHP, une nouvelle fonction de marcheur. Copiez le code de wp-includes/nav-menu-template.php (jusqu’à la ligne 109 environ) dans votre themes functions.php pour créer un nouveau lecteur. Passez ce marcheur comme argument à votre appel de menu. Dans le Walker modifié, insérez un <span> pour une flèche sur un élément de niveau de sous-menu.

    function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<span class=\"right-arrow\">&rarr;</span><ul class=\"sub-menu\">\n";
}

    Cela ajoutera une petite flèche que vous pourrez ensuite styler juste avant l'élément de liste du sous-menu.

3
Jamie

Vous pouvez étendre le menu et ajouter une classe "has_children" aux éléments comportant des sous-menus:

class My_Walker_Nav_Menu extends Walker_Nav_Menu{
  public function display_element($el, &$children, $max_depth, $depth = 0, $args, &$output){
    $id = $this->db_fields['id'];    

    if(isset($children[$el->$id]))
      $el->classes[] = 'has_children';    

    parent::display_element($el, $children, $max_depth, $depth, $args, $output);
  }
}

et passez votre instance de la classe en argument dans wp_nav_menu() :

wp_nav_menu(array(
  'theme_location'  => 'whatever',
  'walker'          => new My_Walker_Nav_Menu(),
));

Puis ajoutez votre flèche avec CSS, comme Philip posté:

li.has_children > a:after { content: " →"; }
5
onetrickpony

Une solution consiste à ajouter une classe CSS personnalisée lors de la création/modification de votre menu dans l'administrateur. Si vous ne voyez pas encore la case d'option CSS, allez dans les options d'écran de la page d'administration du menu et cochez-la.

3
SarahA

avec css, vous pouvez également utiliser la propriété content , quelque chose comme ceci doit faire l'affaire,

#div-id ul li a:after { content: " →"; }
2
Philip