Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » JQuery

Pagine:

RSS

Un menu smooth con jQuery

di: Egidio Murru 23 Febbraio 2009

Negli ultimi anni abbiamo assistito ad un susseguirsi di novità nell'ambito dei framework JavaScritp; questi ultimi si sono rivolti ai web designer non solo consentendo uno sviluppo più veloce delle applicazioni, ma anche con la possibilità di ampliare la compatibilità verso differenti browser.

Tra di essi è sicuramente jQuery quello che per varie ragioni sta riscuotendo un maggiore successo; per esempio perché permette un approccio diverso alla programmazione JavaScript, andando a sostituire alcune vecchie funzioni che creavano problemi di compatibilità con strutture più cross-browser; perché permette di ottenere grandi risultati con piccoli interventi, riuscendo a “comprimere” lunghe porzioni di codice in poche righe, facendo risparmiare tempo e ottimizzando velocità di esecuzione. Inoltre, jQuery può essere esteso con l'ausilio di plugin, alcuni molto interessanti: proprio uno di questi sarà alla base di questo tutorial.

Effetto smooth

Il menu che andremo a realizzare avrà come caratteristica quella di aprirsi con un effetto che fino a qualche tempo fa era tipico del mondo Flash. Si tratta dell'effetto definito smooth; secondo l'Adobe Developer Center:

"Il termine si riferisce ad una graduale accelerazione o decelerazione nel corso di una animazione che aiuta l'animazione ad apparire più realistica."

Per arrivare al risultato finale del tutorial utilizzeremo il plugin jQuery Easing, che ci permetterà di ottenere un effetto smooth molto simile a quello ottenibile in Flash.

Struttura

Prima d'iniziare con il nostro progetto dobbiamo definire la struttura del menu HTML e di tutti i file che andremo ad adoperare. Per comodità e abitudine ho creato un file XHTML di esempio nella root principale e poi le directory CSS, JS e IMG che andranno a contenere rispettivamente il foglio di stile, i file JavaScript e le immagini utilizzate.

Iniziamo ad analizzare il codice della sezione head della pagina:

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Esempio menu con jQuery</title> 
<link href="css/styles.css" rel="stylesheet" type="text/css" /> 
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script> 
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script> 
<script src="js/menu.js" type="text/javascript"></script> 
</head>

Come si può intuire facilmente eseguamo un richiamo diretto al foglio di stile contenuto all'interno della cartella CSS, mentre per richiamare il framework jQuery impostiamo l'URL assoluto del file che risiede su Google Code. Gli altri due file richiamati fanno riferimento al plugin jQuery Easing e al file JavaScript che controllerà l'esecuzione del menu; questi due sono entrambi posizionati nella directory JS.

A questo punto abbiamo tutto quello che ci serve per iniziare.

Pagina successiva

Pagine: