Autore: Fabio Di Matteo
Ultima revisione: 22/02/2012

In questo articolo vedremo come inserire il supporto ai menu dropdown (a tendina) nei nostri temi wordpress. I menu' saranno ovviamente editabili dal pannello di amministrazione.

Prima di tutto dobbiamo inserire nel file functions.php del nostro tema la funzione che abilita il supporto ai menu'.

...
//Registriamo il menu
register_nav_menus(array('menu0'));
...

Una navbar con i menu' a tendina di solito si realizza inscatolando una serie di elementi nel DOM della pagina. Si comincia con un <div> che fa da contenitore della navbar, poi si inserisce un <ul> i cui elementi <li> sono i menu a tendina, i quali questi ultimi sono ancora delle liste <ul></ul> con i rispettivi <li> .

Ecco un esempio di struttura

<div class="menu-container">
	<ul class="menus">
		<li><a href="#">Titolo primo menu</a>
			<ul>
				<li><a href="http://esempio.com">Prima voce</a></li>
				<li><a href="http://esempio.com">Seconda voce</a></li>
				<li><a href="http://esempio.com">Terza voce</a></li>
			</ul>
		</li>
 
		<li><a href="#">Titolo secondo menu</a>	
			<ul>
				<li><a href="http://esempio.com">Prima voce</a></li>
				<li><a href="http://esempio.com">Seconda voce</a></li>
				<li><a href="http://esempio.com">Terza voce</a></li>
			</ul>
		</li>	
 
			...(altri menu)...
 
	<ul>
</div>

navbar.php

<?php
	// Scandisce l'elenco dei menu' e li stampa
 
	//$menus è un'array di oggetti di voci di menu'
	$menus = wp_get_nav_menus();
 
 
	//Il div che include il menu ("Superfish" in questo caso)
	echo'<div class="sf-navbar">';
 
	//La voce statica "Home"
	echo   '<ul class="sf-menu"><li><a href="index.php">Home</a></li></ul>';
 
	//Ciclo che scandisce tutti i menu
	for ($i=0 ; $i<=count($menus)-1; $i++)
	{
		$menu_items = wp_get_nav_menu_items($menus[$i]);
 
		//Nome del menu
		echo   '<ul class="sf-menu"><li><a href="#">'.$menus[$i]->name.'</a><ul>';
 
 
 
		//Ciclo che scandisce il contenuto del menu
		foreach ($menu_items as $menu_item):
			echo "<li><a href='$menu_item->url' target='$menu_item->target' >$menu_item->title</a></li>";
		endforeach;
 
		//Tag html di chiusura del menu
		echo'</ul></li></ul>';
	}
	echo '</div>	';
 
	//Solo per debug
	//var_dump($menu_item);	
?>