web-dev-qa-db-fra.com

wp_nav_menu, ajouter une classe à chaque nième élément?

existe-t-il un moyen d'ajouter une classe à chaque nième élément d'un menu à l'aide de wp_nav_menu?

Essayer de créer des colonnes mais il faut ajouter une "dernière" classe au 3ème élément.

à votre santé! Dc

menuscolumns
3
v3nt

ça a fonctionné comme ça à la fin ...

function add_nthclass($items, $args){

  $scb = get_object_vars($args);

  switch($scb['menu']) {

        case 'mainpages':
            $nth = 2;
            $items = explode('</li>',$items);
            $newitems = array();
              // loop through the menu items, and add the new link at the right position
              foreach($items as $index => $item)                  {

                if(($index+1) % $nth == 0){
                    $newitems[] =  str_replace('class="', 'class="last ', $item);
                }else{                      
                $newitems[]= $item;                 
                }
              }
              // finally put all the menu items back together into a string using the ending <li> tag and return
              $newitems = implode('</li>',$newitems);

        case 'footer':
         // footer menu nth funcs...
        default:

            $newitems = $items;

    } // End switch

    return $newitems;    
}    
add_filter('wp_nav_menu_items', 'add_nthclass', 10, 2);
2
v3nt

Vous pouvez utiliser jQuery pour le faire. Essayez ceci dans votre entête:

$(document).ready(function() {
    $("#mymenu li:nth-child(3n+3)").addClass("last");
});

Note: pour que cela fonctionne, vous devez avoir mis en file d'attente jQuery .

2
mike23

Nth est déjà une classe, c'est une pseudo classe.

Pourquoi ne changez-vous pas le css appliqué à .last et appliquez-le à #nav li:nth-child(3). Si vous devez cibler chaque troisième élément de menu, ce sera #nav li:nth-child(3n+3)

Modifier:

Oh yah, j'ai oublié de mentionner le support pour ces saturés navigateurs de l'âge de pierre .

Heureusement, il existe quelques bonnes bibliothèques javascript et plugins jQuery qui ajoutent le support de css3 à IE <9

2
Chris_O

Si vous souhaitez simplement ajouter la classe .last au dernier élément de menu, cette méthode est beaucoup plus courte:

/**********************************************************/
/* add .last to last menu item                            */
/**********************************************************/

add_filter('wp_nav_menu', 'add_last');

function add_last($output) {
  $output = substr_replace($output, 'class="last menu-item', strripos($output, 'class="menu-item'), strlen('class="menu-item'));
  return $output;
};

Si vous avez également des sous-menus, vous pouvez utiliser le code suivant (grâce à cet article ).

add_filter('wp_nav_menu', 'add_last');

function add_last($menuHTML) {
  $last_items_ids  = array();
  // Get all custom menus
  $menus = wp_get_nav_menus();
  // For each menu find last items
  foreach ( $menus as $menu_maybe ) {
    // Get items of specific menu
    if ( $menu_items = wp_get_nav_menu_items($menu_maybe->term_id) ) {
      $items = array();
      foreach ( $menu_items as $menu_item ) {
        $items[$menu_item->menu_item_parent][] .= $menu_item->ID;
      }
      // Find IDs of last items
      foreach ( $items as $item ) {
        $last_items_ids[] .= end($item);
      }
   }
}
  foreach( $last_items_ids as $last_item_id ) {
    $items_add_class[] .= ' menu-item-'.$last_item_id;
    $replacement[]     .= ' menu-item-'.$last_item_id . ' last';
  }
  $menuHTML = str_replace($items_add_class, $replacement, $menuHTML);
  return $menuHTML;
};
0
ptriek