wp_nav_menu, ¿agregar clase a cada n º elemento?

2

¿hay una manera de agregar una clase a cada elemento nth en un menú usando wp_nav_menu?

Intentando crear columnas, pero es necesario agregar una clase 'última' al tercer elemento.

¡salud! Dc

    
pregunta v3nt 13.07.2011 - 11:00

4 respuestas

1

consiguió que esto funcionara así al final ...

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);
    
respondido por el v3nt 21.07.2011 - 14:09
2

Puedes usar jQuery para hacer eso. Prueba esto en tu encabezado:

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

Nota : para que esto funcione, debes tener encolado jQuery .

    
respondido por el mike23 14.07.2011 - 09:01
2

Nth ya es una clase, es una pseudo clase.

¿Por qué no cambias los valores de css aplicados a .last y los aplicas a #nav li:nth-child(3) ? Si necesita apuntar a cada tercer elemento del menú, sería #nav li:nth-child(3n+3)

Editar:

Oh yah, olvidé mencionar el soporte para esos molestos navegadores de la Edad de Piedra .

Afortunadamente, hay algunas buenas bibliotecas de javascript y complementos de jQuery que agregan soporte css3 a IE < 9

respondido por el Chris_O 14.07.2011 - 09:49
0

Si solo desea agregar la clase .last al último elemento del menú, esta es una forma mucho más corta de hacerlo:

/**********************************************************/
/* 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 también tiene submenús, puede usar el siguiente código (gracias a este artículo ).

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;
};
    
respondido por el ptriek 19.12.2011 - 10:51

Lea otras preguntas en las etiquetas