Realizziamo un fantastico menu potenziato da CSS 3 e jQuery

Articolo pubblicato il 26-12-2009. Categorie: CSS, jQuery, PHP e.., Tutorial testuali. Commenti: 0.

Realizziamo un fantastico menu potenziato da CSS 3 e jQuery
Abbiamo già parlato sia del jQuery che del CSS 3 in alcuni articoli precedenti, mostrandone solo alcune delle potenzialità nella creazione di un form o di un bottone; oggi, invece, ci interesseremo a creare un menu verticale dinamico e versatile.
Potete vedere una demo qui, mentre scaricare l’esempio da qui.

Partiamo, innanzitutto, da una bozza grafica del nostro menu fatta a mano o con un editor grafico per schiarirci le idee su ciò che vogliamo creare.

Dobbiamo sempre ricordarci di minimizzare l’utilizzo di immagini dove è possibile in modo tale da rendere il nostro contenuto più veloce da modificare e più leggero da caricare per gli utenti.

In pratica, quindi, ci serviranno solo 2 immagini per la creazione di questo menu: il gradiente verde e l’effetto pixel popping (1px shadow e 1px highlight) che potete vedere sotto ogni categoria. Ricordiamoci che i gradienti lineari, possono essere ripetuti orizzontalmente e quindi ci basterà utilizzare anche un solo pixel di larghezza; vale lo stesso per l’effetto pixel popping.

Iniziamo a scrivere un pò di codice! Per quanto riguarda l’organizzazione dei div, utilizzeremo qualcosa di simile:

Che in codice, diventa:

<div class="cat_container">
	<div class="cat_title">
	Categories
	</div>
	<div class="cat_list">
		<ul>
			<li><a href="#">Web design</a></li>
			<li><a href="#">Photoshop</a></li>
			<li><a href="#">Illustrations</a></li>
			<li><a href="#">Download</a></li>
			<li><a href="#">Ispirations</a></li>
			<li><a href="#">Web design</a></li>
			<li><a href="#">Photoshop</a></li>
			<li><a href="#">Illustrations</a></li>
			<li><a href="#">Download</a></li>
		</ul>
	</div>
</div>

Ora impostiamo il nostro CSS; è tutto commentato e quindi credo sia abbastanza facile da capire:

body{
/* Opzionale */
background:transparent url(bg.jpg) repeat scroll 0 0;
 
/* Impostiamo il font che vogliamo utilizzare */
font-family: Tahoma, Sans-Serif;
}
.cat_container{
/* Questo ci servirà per gl'angoli arrotondati del box grigio */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
 
/* Questa è l'ombra esterna posizionata verso la fine del menu. RGBA presenta i 3 valori di Rosso, Verde e Blu e il canale Alpha per la trasparenza */
-moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
 
/* Impostiamo sfondo e la larghezza del menu */
background-color: #e9e9e9;
width: 250px;
 
/* Il padding ci servirà a far si che dopo le categorie ci sia un pò di spazio vuoto */
padding-bottom: 5px;
margin: 10px;
}
.cat_title{
/* Impostiamo, anche qui, gli angoli arrotondati */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
 
/* Creiamo un'altra ombra */
-moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.35);
 
/* Utilizziamo il gradiente verde precedentemente creato con repeat-x in modo tale che si ripeta orizzontalmente */
background: transparent url(bg_cat_title.jpg) repeat-x scroll 0 0;
height: 50px;
 
/* Impostiamo il testo */
font-size: 16pt;
color: #fff;
 
/* Impostiamo l'ombra di 1px */
text-shadow: 0px 1px 0px #000;
 
/* Line-height ci serve per centrare verticalmente il testo */
line-height: 40px;
 
/* Mettiamo un pò di margine a sinistra in modo tale che la scritta sia ben posizionata */
padding-left: 10px;
 
/* Impostiamo come cursore la manina */
cursor: pointer;
}
.cat_list ul{
/* Eliminiamo il padding che di è default 50px */
padding: 0;
}
.cat_list li{
/* Utilizziamo come sfondo il divisore con effetto pixel popping, ripetuto orizzontalmente, e posizionato in basso */
background: transparent url(divisor.jpg) repeat-x scroll 0 bottom;
 
/* Eliminiamo i pallini a fianco ad ogni voce della lista */
list-style: none;
 
/* Aggiungiamo un padding per posizionare meglio orizzontalmente il testo */
padding-left: 20px;
 
/* Impostiamo un l'altezza di ogni categoria */
height: 25px;
 
/* Formattiamo il testo */
color: #9c9c9c;
text-shadow: 0px 1px 0px #fff;
font-size: 9pt;
line-height: 25px;
}
.cat_list a{
/* Formattiamo nuovamente il testo, nel caso in cui le categorie presentano un link */
color: #9c9c9c;
text-shadow: 0px 1px 0px #fff;
font-size: 9pt;
line-height: 25px;
text-decoration: none;
}
.cat_list li:hover{
/* Utilizziamo un altro colore di sfondo al passaggio del mouse su una categoria */
background-color: #e4e4e4;
}

Già ora il nostro menu ha preso vita ed esteticamente è molto bello. Passiamo, però, all’aggiunta di qualche effetto jQuery per renderlo dinamico:

// Quando sono carichi tutti i documenti della pagina, possono partire gli effetti jQuery
$(document).ready(function(){
	//Quando si passa sopra ad un link presente nel div "cat_list"..
	$(".cat_list a").mouseover(function () {
		//Al link si aggiunge un padding-left di 20px, e l'effetto dura per 700 ms (1000 è un secondo)
		$(this).animate({paddingLeft: 20}, 700);
	});
	//Quando si leva il mouse da un link del div "cat_list"..
	$(".cat_list a").mouseout(function () {
		//Questo ritorna al padding originario (cioè 0)
		$(this).animate({paddingLeft: 0}, 700);
	});
	//Quando si clicca sopra al div "cat_title" (cioè sopra al nome del menu)..
	$(".cat_title").click(function () {
		//Il div "cat_list" verrà chiuso con un effetto slide
		$(".cat_list").slideToggle("slow");
	});
});

Ed il nostro menu è pronto ; ecco il codice completo del file index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
<head>
<title>jQuery categories</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
// Quando sono carichi tutti i documenti della pagina, possono partire gli effetti jQuery
$(document).ready(function(){
	//Quando si passa sopra ad un link presente nel div "cat_list"..
	$(".cat_list a").mouseover(function () {
		//Al link si aggiunge un padding-left di 20px, e l'effetto dura per 700 ms (1000 è un secondo)
		$(this).animate({paddingLeft: 20}, 700);
	});
	//Quando si leva il mouse da un link del div "cat_list"..
	$(".cat_list a").mouseout(function () {
		//Questo ritorna al padding originario (cioè 0)
		$(this).animate({paddingLeft: 0}, 700);
	});
	//Quando si clicca sopra al div "cat_title" (cioè sopra al nome del menu)..
	$(".cat_title").click(function () {
		//Il div "cat_list" verrà chiuso con un effetto slide
		$(".cat_list").slideToggle("slow");
	});
});
</script>
</head>
 
 
<body>
<div class="cat_container">
	<div class="cat_title">
	Categories
	</div>
	<div class="cat_list">
		<ul>
			<li><a href="#">Web design</a></li>
			<li><a href="#">Photoshop</a></li>
			<li><a href="#">Illustrations</a></li>
			<li><a href="#">Download</a></li>
			<li><a href="#">Ispirations</a></li>
			<li><a href="#">Web design</a></li>
			<li><a href="#">Photoshop</a></li>
			<li><a href="#">Illustrations</a></li>
			<li><a href="#">Download</a></li>
		</ul>
	</div>
</div>
</body>
</html>

Vi ricordo che potete scaricare il menu da qui, e vedere una demo da qui. Infine, vi rimando ai commenti per qualsiasi domanda o dubbio