Un semplice menù a tendina con Jquery

Le potenzialità di jQuery sono davvero molte, tra le molte funzioni di base che vengono offerte vediamo ora come utilizzare le funzioni .slideUp() e .slideToggle() per realizzare un menù, in stile accordion, molto semplice, con una quantità di codice davvero minima.

Per vedere subito ciò che stiamo per realizzare potete vedere un’anteprima:

Iniziamo scrivendo il nostro codice xhtml che consisterà semplicemente, oltre all’inclusione di jQuery, di una semplice lista di voci:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<ul id="accordion">
	<li>Sports
		<ul>
			<li><a href="#">Golf</a></li>
			<li><a href="#">Cricket</a></li>
			<li><a href="#">Calcio</a></li>
		</ul>
	</li>
	<li>Community
		<ul>
			<li><a href="#">Forum</a></li>
			<li><a href="http://www.facebook.com">Facebook</a></li>
			<li><a href="http://www.twitter.com">Twitter</a></li>
		</ul>
	</li>
	<li>Contatti
		<ul>
			<li><a href="http://maps.google.it">Googlemap</a></li>
			<li><a href="#">Località</a></li>
		</ul>
	</li>
</ul>

Come potete osservare nel menù sono stati inseriti solo alcuni link reali ed a scopo puramente illustrativo.

Condiamo il nostro menù appena realizzato con il CSS:

body {
font-family:Verdana, Geneva, sans-serif;
}
#accordion {
list-style:none;
width:240px;
}
#accordion li {
background: #F99815;
font-size:14px;
cursor:pointer;
padding:4px;
color:#fff;
}
#accordion ul {
list-style:none;
display:none;
margin:0;
padding:0;
}
#accordion ul li {
background:#EBEBEB;
border:0;
padding-left:15px;
border-bottom:1px dashed #999;
border-left:1px dashed #999;
border-right:1px dashed #999;
}
#accordion ul li a {
text-decoration:none;
color:#333;
}
#accordion ul li a:hover {
color:#000;
}

L’unica nota da sottolineare è la rimozione dei “pallini” degli elementi listati per dar loro un aspetto più gradevole, per il resto si tratta solo di semplici accortezze puramente estetiche.

La parte interessante, ma anche molto semplice, della realizzazione del nostro menu accordion arriva nella fase di scrittura del codice jQuery. Vediamolo passo passo:

$(document).ready(function() {
$("#accordion > li").click(function(){

Abbiamo inserito la funzione document ready per far sì che il nostro script venga eseguito non appena la pagina viene caricata, dopodichè, nella riga 2, stiamo dicendo al browser di compiere un’azione nel momento in cui clicchiamo sopra un elemento <li> del nostro menu. Il simbolo “>” viene utilizzato nel css per selezionare solo una categoria di elementi immediatamente successivi a quella genitore. Per maggior chiarezza ed ulteriori approfondimenti vi invito a leggere l’articolo sui selettori figli e fratelli.

if(false == $("ul",this).is(':visible')) {
	$('#accordion ul').slideUp(300);
     }
$("ul",this).slideToggle(300);

Poi esegui la funzione Toggle che mi fa invece aprire la <ul> inerente alla voce su cui clicco.

Questo è lo script completo:

$(document).ready(function() {
	$("#accordion > li").click(function(){
		if(false == $("ul",this).is(':visible')) {
			$('#accordion ul').slideUp(300);
		}
		$("ul",this).slideToggle(300);
	});
});