jQuery: menu a discesa

Con jQuery i menu a discesa sono molto più efficaci dei menu a discesa realizzati con i CSS. Questo perchè jQuery ci permette di controllare con molta più precisione l'effetto di comparsa e scomparsa del menu. I menu a discesa vengono realizzati annidando delle liste non ordinate nella marcatura. I CSS faranno in modo che il sottomenu non sia visibile e jQuery lo mostrerà quando l'utente passerà col mouse su un ben determinato link del menu principale. L'effetto che andremo ad implementare sarà ottenuto tramite i metodi slideDown() (comparsa) e slideUp() (scomparsa).

Per prima cosa creiamo la marcatura:

<ul id="navigation">
	<li><a href="#">Home</a></li>
	<li class="submenu"><a href="#">Articoli</a>
	
		<ul>
			<li><a href="#">Articolo 1</a></li>
			<li><a href="#">Articolo 2</a></li>
			<li><a href="#">Articolo 3</a></li>
		</ul>
	
	</li>
	<li><a href="#">Contatti</a></li>
</ul>

La voce di lista con classe submenu contiene il nostro menu a discesa. Con i CSS dobbiamo creare un menu principale con altezza e larghezza definite, in modo che il sottomenu venga considerato come contenuto in eccesso e mostrato sotto la voce di lista corrispondente. Ovviamente dobbiamo prestare attenzione alla cascata per dare stili diversi ai link e alle voci di lista in base alla loro appartenenza al menu principale o al menu a discesa:

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#navigation {
	height: 2em;
	background: #333 url(gradient.png) repeat-x;
	width: 100%;
}

#navigation li {
	float: left;
	height: 100%;
	margin-right: 0.5em;
	line-height: 2;
	width: 9em;
	text-align: center;
}

#navigation a {
	font-weight: bold;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
}

#navigation a:hover {
	text-decoration: underline;
}

#navigation li ul {
	width: 100%;
	background: #444;
	display: none;
}

#navigation li ul li {
	float: none;
	margin: 0 0 0.3em 0;
	line-height: normal;
	text-align: left;
	width: 100%;
}

#navigation li ul li a {
	display: block;
	width: 100%;
	padding: 1em 0;
	text-indent: 1em;
}

#navigation li ul li a:hover {
	background: #000;
}

A questo punto useremo jQuery sfruttando gli eventi mouseover (sui link) e mouseleave (sul menu a discesa). Il secondo evento va usato sul sottomenu per consentire all'utente di navigare tra le sue voci senza che questo scompaia subito:

$(function() {

  $('li.submenu', '#navigation').each(function() {
  
    var $li = $(this);
    var $a = $li.find('a:first');
    var $ul = $li.find('ul');
    
    $a.mouseover(function() {
    
      $ul.slideDown('slow');
    
    
    });
    
    $ul.mouseleave(function() {
    
      $ul.slideUp('slow');
    
    });
  
  
  });


});

Potete vedere l'esempio finale in questa pagina.