jQuery: menu drop down complesso

Un menu drop down complesso in jQuery è un menu che contiene delle sottovoci dalla struttura annidata. Non si tratta di una semplice lista annidata, ma di una serie di elementi annidati. Gran parte del lavoro preparatorio è svolto dai CSS che, tramite il posizionamento contestuale e la proprietà display, fanno in modo che la struttura annidata presente nelle voci sia posizionata in alto a sinistra del menu principale e quindi nascosta. Sarà jQuery a mostrarla al passaggio del mouse sistemando anche l'offset verticale di ciascuna struttura. Vediamo i dettagli.

La struttura HTML è la seguente (la struttura annidata ha la classe CSS submenu):

<ul id="navigation">
    <li><a href="#">Home</a></li>
	<li class="sub"><a href="#">About</a>
	
		<div class="submenu">
		
			<ul>
			
			  <li><a href="#">Chi siamo</a></li>
			  <li><a href="#">Dove siamo</a></li>
			  <li><a href="#">Come raggiungerci</a></li>
			
			</ul>
			
			<ul>
			
			  <li><a href="#">Staff</a></li>
			  <li><a href="#">Contatti</a></li>
			  <li><a href="#">Portfolio</a></li>
			
			</ul>

		
		</div>
	
	</li>
	<li class="sub"><a href="#">Articoli</a>
	
		<div class="submenu">
		
			<ul>
			
			  <li><a href="#">CSS</a></li>
			  <li><a href="#">jQuery</a></li>
			  <li><a href="#">Wordpress</a></li>
			
			</ul>
			
			<ul>
			
			  <li><a href="#">HTML5</a></li>
			  <li><a href="#">JavaScript</a></li>
			  <li><a href="#">PHP</a></li>
			
			</ul>

		
		</div>
	
	</li>

</ul>

Le regole CSS operano una distinzione tra le voci del menu principale e le altre voci tramite l'utilizzo del selettore del figlio:

#navigation {
	width: 45em;
	height: 10em;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	position: relative;
}

#navigation > li {
	float: left;
	width: 15em;
	height: 100%;
}

#navigation > li > a {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 5;
	text-align: center;
	text-transform: uppercase;
	background: #666;
	color: #fff;
	text-decoration: none;
	font-size: 2em;
	font-family: 'Arial Black', Arial, sans-serif;
	letter-spacing: 0.1em;
}

#navigation > li > a:hover {
	background: #999;
}

#navigation div.submenu {
	width: 45em;
	background: #333;
	display: none;
	position: absolute;
	left: 0;
}

#navigation div.submenu ul {
	margin: 0;
	padding: 1em;
	width: 30%;
	float: left;
	list-style: none;
}

#navigation div.submenu ul li {
	display: block;
	border-bottom: 1px dotted #fff;
	padding-bottom: 2px;
}

#navigation div.submenu ul li a {
	color: #fff;
	text-decoration: none;
	font-variant: small-caps;
}

#navigation div.submenu ul li a:hover {
	text-decoration: underline;
}

Come si può notare, la larghezza della struttura annidata è pari a quella del menu principale. I float all'interno di tale struttura vengono automaticamente contenuti dalla dichiarazione di posizionamento assoluto specificata sulla struttura annidata.

Con jQuery dobbiamo semplicemente aggiungere un gestore di eventi hover sulle voci del menu principale che contengono una struttura annidata e mostrare/nascondere tale struttura con un effetto slideDown()/slideUp():

$(function() {

  $('li.sub', '#navigation').each(function() {
  
    var $li = $(this);
    var $div = $('div.submenu', $li);
    var top = $li.height();
    
    $li.hover(function() {
    
      $div.css('top', top).
      stop(true, true).
      slideDown('slow');
    
    
    },
    
    function() {
    
      $div.
      stop(true, true).
      slideUp('slow');
    
    });
  
  });

});

L'uso del metodo stop() serve a fare in modo che una sola animazione per volta venga eseguita. Potete visionare l'esempio finale in questa pagina.