WordPress: assegnare stili CSS al menu di navigazione

Supponiamo di aver creato un nostro menu di navigazione principale utilizzando la funzione di WordPress wp_nav_menu(). Ora si tratta semplicemente di assegnare a questo menu degli stili CSS. Vediamo come fare.

Per prima cosa inseriamo il nostro menu nel tema dove vogliamo che appaia:

[php htmlscript="true"] <div id="navigation"> <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?> </div>

Ecco la visualizzazione predefinita del menu con i soli stili di base della pagina:

[caption id="attachment_2515" align="aligncenter" width="245" caption="Il menu con i soli stili di base"][/caption]

Analizziamo quindi la struttura HTML del nostro menu:

[caption id="attachment_2516" align="aligncenter" width="649" caption="La struttura interna del menu"][/caption]

Dato che abbiamo dei sottomenu, dovremo creare un effetto di menu dropdown con i CSS. Ecco il codice:


/* = Navigation */

#navigation {
	height: 3em;
	background: #222;
	margin-bottom: 1em;
}

#navigation div.menu {
	height: 100%;
}

#navigation div.menu > ul {
	height: 100%;
}

#navigation div.menu > ul > li {
	float: left;
	height: 100%;
	padding: 0 1em;
	position: relative;
}

#navigation div.menu > ul > li > a {
	float: left;
	height: 100%;
	line-height: 3;
	color: #fff;
	font-weight: bold;
	padding: 0 1em;
}

#navigation div.menu > ul > li > a:hover {
	background: #000;
}

#navigation div.menu > ul > li ul {
	width: 10em;
	background: #000;
	position: absolute;
	top: 3em;
	left: -1000em;
}

#navigation div.menu > ul > li ul li {
	margin-bottom: 5px;
	display: block;
	padding: 0.4em 0 0 0;
}

#navigation div.menu > ul > li ul li a {
	display: block;
	padding: 0.3em;
	color: #fff;
	font-variant: small-caps;
}

#navigation div.menu > ul > li ul li a:hover {
	background: #222;
}

#navigation div.menu > ul > li:hover ul {
	left: 1em;
}

Abbiamo usato il selettore del figlio per operare una distinzione tra le voci primarie del menu e quelle del sottomenu. Quindi abbiamo creato un posizionamento contestuale sulle voci del menu primario e abbiamo nascosto inizialmente il sottomenu con un valore negativo molto elevato della proprietà left. Quando il mouse viene passato su una voce del menu primario, il sottomenu viene riposizionato in modo che appaia sotto la voce corrente.

Potete visionare l'effetto finale nel video che segue.

Torna su