web-dev-qa-db-fra.com

Style de menu pour le dernier élément de menu

ok donc j'utilise le code suivant pour obtenir mes liens ...

<?php wp_nav_menu( array('theme_location' => 'primary', 'container' => '', 'menu_class' => 'mainnav') ); ?>

C'est mon CSS pour le nav ...

.mainnav a {
    font-family: gooddog_plainregular, Arial, sans-serif;
    font-size: 30px;
    color: #ffea00;
    text-decoration:none;
}

.mainnav li:after {
content: url('images/nav-divider.png');
}

.mainnav li.last:after {
content: none;
}

.mainnav li {
    list-style: none;
    display: inline;
    font-size: 30px;
    margin-bottom: 10px;
}

.mainnav li.last {
    list-style: none;
    display: inline;
    font-size: 30px;
    margin-bottom: 10px;
}

Le problème que j'ai est que le li.last ne fonctionne pas, comment puis-je y ajouter la classe?

Merci :)

menusnavigation
1
JoshuaBrand

Voici une fonction que j'utilise pour ajouter une première/dernière classe aux éléments wp_nav_menu():

function add_first_and_last($items) {
    $items[1]->classes[] = 'first';
    $items[count($items)]->classes[] = 'last';
    return $items;
}
add_filter('wp_nav_menu_objects', 'add_first_and_last');

Ressources pour les développeurs - wp_nav_menu_objects Hook

4
Howdy_McGee

Utilisez la last-child pseudoclass dans le CSS:

.mainnav li:last-child
  {
    /* your code */
  }
2
Giacomo Paita

La fonction mentionnée par Howdee_McGee était excellente, mais ne semblait fonctionner que pour les menus sans éléments de sous-menu. Pour un menu avec des éléments de sous-menu, essayez:

function add_first_and_last_top_level($items) {
$topitems = [];
foreach($items as $menu_item){
    if($menu_item->menu_item_parent==0){
        $topitems[] = $menu_item->menu_order;
    }        
}
$itemcount = end($topitems);
$items[1]->classes[] = 'menu-item-first';
$items[$itemcount]->classes[] = 'menu-item-last';
return $items;
}

add_filter('wp_nav_menu_objects', 'add_first_and_last_top_level');
1
garymarkfuller