jQuery: menu a discesa slide down

Il segreto per realizzare menu a discesa efficaci in jQuery consiste nel rendere indipendente il sottomenu dal menu principale. Questo deve essere posizionato in modo assoluto rispetto alla pagina, non rispetto al menu principale. Se infatti si usa il floating e l'overflow nel menu principale, posizionare il sottomenu rispetto a tale menu può comportare spiacevoli effetti collaterali. Detto questo, vediamo i dettagli di questo esempio.

Partiamo dalla seguente marcatura:

<ul id="navigation">
	<li><a href="#">Home</a></li>
	<li><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="#">About</a></li>
	<li><a href="#">Contatti</a></li>
</ul>

Il sottomenu dovrà essere visualizzato come un menu con le voci sulla stessa riga. Ecco il nostro CSS:

#navigation {
	background: #000;
	height: 3em;
	border-top: 0.3em solid #d34545;
	margin: 0;
	padding: 0;
	list-style: none;
}

#navigation > li {
	float: left;
	height: 100%;
	margin-right: 1em;
}

#navigation > li > a {
	float: left;
	height: 100%;
	line-height: 3;
	padding: 0 1em;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
}

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

#navigation li ul {
	background: #000;
	margin: 0;
	padding: 0.4em 2em;
	list-style: none;
	text-align: center;
	border-radius: 0 0 6px 6px;
	position: absolute;
	display: none;
}

#navigation li ul li {
	display: inline;
	margin-right: 1em;
}

#navigation li ul li a {
	color: #fff;
	text-decoration: none;
}

Tramite il selettore del figlio (>) separiamo gli stili del menu principale da quelli del sottomenu, che è stato posizionato in modo assoluto e nascosto.

Con jQuery dobbiamo individuare le voci che contengono il sottomenu, posizionarlo e mostrarlo/nasconderlo con un effetto morbido di slide down:

$(function() {

    $('li', '#navigation').each(function() {
    
      var $li = $(this);
      
      if($li.has('ul')) {
      
        var $a = $('a:first', $li);
        var $ul = $a.next();
        var left = $li.position().left;
        var top = $('#navigation').height();
        
        $li.hover(function() {
        
          $ul.css({
            top: top,
            left: left
          }).stop(true, true).
          slideDown('slow');
        
        }, function() {
        
           $ul.stop(true, true).
           slideUp('slow');
        
        
        });
      
      
      }
    
    });

});

Come coordinate usiamo l'altezza del menu principale e l'offset sinistro della voce che contiene il sottomenu. Tramite il metodo stop() ci assicuriamo che le animazioni non si concatenino creando effetti indesiderati. Potete visionare l'esempio finale in questa pagina.