WordPress genera i menu di navigazione del sito attraverso la funzione wp_nav_menu(). Questa funzione genera una marcatura precisa con attributi HTML che possono essere definiti nei parametri di funzione. Questi attributi sono fondamentali per assegnare degli stili CSS ai menu. Vediamo come fare.
Se usiamo la funzione wp_nav_menu() in questo modo:
<?php wp_nav_menu(array(
'sort_column' => 'menu_order',
'menu' => 'categorie',
'container_class' => 'main-menu',
'container_id' => 'header',
'theme_location' => 'header')
);?>
viene generata la seguente struttura HTML:
<div id="header" class="main-menu">
<ul id="menu-categorie" class="menu"></ul>
</div>
Il parametro menu viene aggiunto all'ID della lista più esterna, container_class e container_id definiscono invece la classe CSS e l'ID applicate al contenitore più esterno del menu (un elemento div).
A questo punto WordPress genera una serie di classi CSS per gli elementi all'interno del menu. Per prima cosa dobbiamo assegnare degli stili al contenitore principale e alle liste e ai link all'interno di esso:
#header .main-menu{} // classe del contenitore
#header .main-menu ul {} // prima lista del contenitore
#header .main-menu ul ul {} // lista all'interno di un'altra lista
#header .main-menu li {} // voce di navigazione
#header .main-menu li a {} // link di ciascuna voce di navigazione
#header .main-menu li ul {} // lista dell'eventuale sottomenu dropdown
#header .main-menu li li {} // voce del menu dropdown
#header .main-menu li li a {} // link di ciascuna voce del menu dropdown
Infine, possiamo usare le seguenti classi CSS applicate alle voci di lista per dare stili alle sezioni correnti:
.current_page_item{} // classe per la pagina corrente
.current-cat{} // classe per la categoria corrente
.current-menu-item{} // classe per le altre voci correnti del menu
.menu-item-type-taxonomy{} // classe per una categoria
.menu-item-type-post_type{} // classe per una pagina
.menu-item-type-custom{} // classe per le voci custom aggiunte dall'utente
.menu-item-home{} // classe per la home page