Arte del Web – Il blog dei e per i designers » Blog Archive » Come creare una fantastica barra di navigazione con jQuery e CSS3

gennaio 26th, 2010

Un buon ed efficace menu di navigazione è indispensabile all’interno di un sito web per permettere ad un utente di navigare in maniera semplice ed intuitiva tra i suoi contenuti. A livello di design possiamo notare spesso come tutta la struttura di una pagina web giri in torno al menu rendendolo elemento centrale anche a livello strutturale e grafico. Ma, ora, bando alle ciance, e veniamo al dunque; in questa guida vedremo come creare un attraente menu di navigazione potenziato da jQuery. La sua particolarità è la completa e facilissima personalizzazione. Infatti utilizzeremo una sola immagine cercando di sfruttare tutte le potenzialità di CSS3.

La barra di navigazione è stata testata ed è compatibile con Firefox e Chrome, mentre non lo è (e ti pareva) con IE, per motivi che credo siano ovvi.
Potete vedere una demo cliccando qui, mentre scaricare i file utilizzati cliccando qui.
Ecco come sarà organizzato il nostro menu:

Ma in cosa consiste il dinamismo conferito dal jQuery in questo menu? Semplice, al passaggio su una categoria, questa si allargherà rivelando delle brevi parole di spiegazione. Un effetto molto accattivante a livello visivo!

Per prima cosa, dobbiamo creare la nostra sfumatura lineare in Photoshop. Create, quindi, un documento (1×50px) e vi applicate un gradiente che và dal #8d8d8d (in alto) al #4a4a4a (in basso). Infine salvatelo con il nome “bg_nav.jpg”.

I file su cui lavoreremo saranno index.html e style.css.. iniziamo a scrivere un pò di html!

<div id="nav">
<ul>
	<li><a href="#">Home</a> <span class="more">Vai alla homepage</span></li>
	<li><a href="#">Tutorials</a> <span class="more">Leggi le nostre guide</span></li>
	<li><a href="#">Ispirations</a> <span class="more">Prendi inspirazione</span></li>
	<li><a href="#">Photography</a> <span class="more">Guarda la nostra galleria fotografica</span></li>
	<li><a href="#">Web design</a> <span class="more">Sfoglia le ultime guide sul web design</span></li>
</ul>
</div>

Naturalmente le varie voci del menu verranno inserite in una lista, ed in ogni voce potrete notare uno span. In questo verrà inserito il contenuto aggiuntivo da mostrare. Senza alcun CSS, ecco come si mostrerà la pagina:

Iniziamo a scrivere qualche riga di convenzione nel CSS in modo tale che tutti i browser vedano allo stesso modo.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}

..impostiamo il colore di sfondo:

body{
background-color:#171717;
}

Ed iniziamo a personalizzare il menu. Il primo passo, consisterà nel creare la barra di sfondo.

#nav{
//Utilizziamo lo sfondo precedentemente creato con repeat-x in modo tale che si ripeta orizzontalmente.
background:transparent url(bg_nav.jpg) repeat-x scroll 0 0;
//Impostiamo l\altezza del menu pari a 50px mentre la larghezza 100%
height:50px;
width:100%;
//Aggiungiamo un margine superiore (opzionale naturalmente)
margin-top:100px;
}

Dovreste ottenere una cosa del genere:

Impostiamo un margine e l’altezza pari a 100% alla lista:

#nav ul{
padding-left:50px;
height:100%;
}

E iniziamo a personalizzare i singoli elementi della lista:

#nav li{
//Tramite questa stringa di codice possiamo modificare tonalità del gradiente rendendolo maggiormente scuro. I primi 3 valori (0, 0, 0) costituiscono il codice RGB del nostro colore (in questo caso nero), mentre l\ultimo l\opacità. Ciò ci permette di creare infinite combinazione di gradienti utilizzando solo una stringa di codice anzichè un\immagine!
background-color:rgba(0, 0, 0, 0.4);
//Rendiamo i vari elementi disposti orizzontalmente
display:inline-block;
//Aggiungiamo dei padding e dei margin per rendere il tutto più gradevole
padding-left:25px;
padding-right:25px;
margin-left:5px;
margin-top:2px;
//Impostiamo l\altezza pari a 90%
height:90%;
//Il line-height serve a posizionare il testo all\interno dell\elemento ad una certa altezza
line-height:40px;
//Impostiamo come cursore la manina
cursor:pointer;
//Utilizziamo le varie potenzialità di CSS3, prima creando i bordi arrotondati, poi, creando 1px di luce dal basso, facendo uso della tecnica del pixel popping
-moz-border-radius:10px;
-webkit-border-radius: 10px;
-moz-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.2);
-webkit-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.2);
//Formattiamo il testo
font-family:Segoe UI;
color:#fff;
text-shadow:0px 1px 0px #000;
}

Ed ora passiamo a cambiare il colore e ad azzerare le decorazioni dei link all’interno del menu

#nav a{
color:#fff;
text-decoration:none;
}

Impostiamo gli eventi al passaggio del mouse e al click:

#nav li:hover{
//Come detto prima, grazie ad rgba, andremo a schiarire il gradiente al passaggio del mouse..
background-color:rgba(0, 0, 0, 0.3);
}
#nav li:active{
//Mentre a scurirlo al click
background-color:rgba(0, 0, 0, 0.5);
}

Infine impostiamo lo stile per il testo aggiuntivo, rendendolo non visibile:

.more{
display:none;
font-size:8pt;
margin-left:10px;
-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.2);
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:rgba(0, 0, 0, 0.2);
padding:5px;
}

Il vostro menu dovrebbe presentarsi così:

Esteticamente è pronto! E’ il momento di passare al jQuery, quindi, lo richiamiamo all’interno dell’html.

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

E scriviamo il nostro script:

//Lasciamo caricare tutti gli oggetti della pagina
$(document).ready(function () {
//Al passaggio del mouse su una categoria
	$('#nav li').hover(function(){
//Si cercherà l'elemento con classe more all'interno di questa e verrà fatto comparire
		$(this).find(".more").stop(true).fadeIn("slow");
//Infine, grazie a questo piccolo trucchetto, dopo 750ms (1000 è un secondo) verrà fatto sparire
		$(this).find(".more").fadeTo(750,1).fadeOut(1000);
	});
});

Ed ecco pronta la nostra barra di navigazione! Potete scaricare i file utilizzati cliccando qui, mentre vedere una demo cliccando qui. Per qualsiasi domanda o dubbio vi rimandiamo, come al solito, ai commenti

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.