Quando si passa su un link, l’elemento si anima e si inclina verso sinistra o destra. Gli effetti sono stati creati solo con i CSS.

Vengono utilizzate le funzionalità di transizione specifiche per ogni browser tramite hack CSS (dato che ciascuno ha il proprio prefisso). La durata della transizione è impostata su 250 millisecondi e la scala/rotazione è impostata ad un valore predefinito.
Sempre tramite CSS, allo stato hover dei link viene assegnato un colore di sfondo, gli angoli arrotondati per migliorare l’effetto e la scala/rotazione modificati per inclinare l’elemento.

Foglio di stile CSS

.cpojer-links a	{
  display: inline-block;
  padding: 4px;
  outline: 0;
  color: #3a599d;
  -webkit-transition-duration: 0.25s;
  -moz-transition-duration: 0.25s;
  -o-transition-duration: 0.25s;
  transition-duration: 0.25s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  -webkit-transform: scale(1) rotate(0);
  -moz-transform: scale(1) rotate(0);
  -o-transform: scale(1) rotate(0);
  transform: scale(1) rotate(0);
}
.cpojer-links a:hover {
  background: #3a599d;
  text-decoration: none;
  color: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -webkit-transform: scale(1.05) rotate(-1deg);
  -moz-transform: scale(1.05) rotate(-1deg);
  -o-transform: scale(1.05) rotate(-1deg);
  transform: scale(1.05) rotate(-1deg);
}
.cpojer-links a:nth-child(2n):hover {
  -webkit-transform: scale(1.05) rotate(1deg);
  -moz-transform: scale(1.05) rotate(1deg);
  -o-transform: scale(1.05) rotate(1deg);
  transform: scale(1.05) rotate(1deg);
}

Fonte David Walsh Blog e demo.

Funziona su tutte le ultime versioni di Opera, Chrome, Safari e Firefox, anche se su Opera e Firefox le trasformazioni non sono proprio ottime come Webkit, motore di Safari e Google Chroem.

Pagine HTML

<div id="shadows"><!--START ID shadows-->
  <article>
    <h1>CSS3 Wrapping Drop Shadows</h1>
    <p>With <del>out any</del> minimal extra bullshit markup(You need the first child to be a container element like a header, hgroup or a div). Oh and they stretch G. Webkit only for now, although I'm sure Firefox could do this trick as well.</p>
  </article>
</div>

Foglio di stile CSS3

body {
  font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif;
  font-size: 13px;
  background: #3a6682;
}
div#shadows {
  position: relative;
  width: 50%;
  margin: 20em auto;
}
article {
  background: #ccc;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 1.5em; color: rgba(0,0,0, .8);
  text-shadow: 0 1px 0 #fff;
  line-height: 1.5;
  text-align: center;
  display: block;
}
article:before, article:after {
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
  -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  position: absolute;
  bottom: 15px;
  z-index: -1;
  width: 50%;
  height: 20%;
  content: "";
  background: rgba(0, 0, 0, 0.7);
}
article:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  right: 10px;
  left: auto;
}
article:before {
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  right: auto;
  left: 10px;
}

Fonte Nimbupani Designs e demo.

Se state cercando uno script lightbox che è in grado di gestire gli iFrame, contenuti provenienti dal server tramite chiamate Ajax, contenuti HTML in linea, immagini, video e altro ancora, NyroModal è un ottimo plugin jQuery che permette tutto ciò.

Negli ultimi giorni mi sono trovato nella posizione di aver bisogno di un semplice, funzionale, plugin lightbox per jQuery facile da usare, una valida alternativa a Facebox. Dopo qualche ricerca, ho trovato diversi plugin sviluppati per questo scopo, e tutti hanno i loro pro e contro. Molti dei plugin supportano solo immagini, non utili alla mia richiesta di inserire contenuti in linea, video Flash e contenuto proveniente da chiamate Ajax.

Finalmente ho trovato e provato NyroModal e sono rimasto molto impressionato. Semplice da utilizzare, fondamentalmente tutto quello che dovremo fare è includere i file CSS e JavaScript appropriati, quindi applicare una classe di nyroModal agli elementi che si desidera aprire nel lightbox.

NyroModal è altamente personalizzabile, è possibile cambiare il suo aspetto grafico utilizzando i CSS, modificare le animazioni utilizzando le funzioni jQuery e personalizzare la sua funzionalità attraverso varie funzioni e proprietà.

Per impostazione predefinita, qualsiasi finestra modale (con eccezione dei file SWF) si ridimensiona automaticamente in base alla dimensione corrente della finestra del browser. Se l’utente ridimensiona il suo browser, anche la finestra modale si ridimensiona fino alla dimensione massima del contenuto.

NyroModal permette di impostare una galleria di contenuti con estrema facilità, semplicemente assegnando un identico valore all’attributo rel da attribuire a ciascuna voce della galleria: è anche possibile implementare gallerie multiple sulla stessa pagina utilizzando diversi attributi rel a cui applicare diverse impostazioni del plugin.

Un’altra funzionalità supportata, quella di effettuare l’upload di file tramite Ajax e gestire le informazioni del file ricevute, semplicemente associando la classe nyroModal al tag form del modulo.

Caratteristiche

• Chiamate Ajax
• Chiamata Ajax con targeting del contenuto
• Immagine singola
• Galleria immagini con freccie di navigazione
• Galleria con ogni tipo di contenuto
• Form
• Form in iFrame
• Form con targeting del contenuto
• Form con upload di file
• Dom Element
• IFrame
• Gestione degli errori
• Finestra modale ridimensionata in base alle dimensioni della finestra del browser
• Bottone ESC da tastiera per chiudere il lightbox
• Animazioni personalizzabili
• Aspetto personalizzabile
• Titolo alla finestra modale
• Standard W3C HTML valido (transitional)

NyroModal è disponibile per il download sotto licenza MIT. Potete trovare ulteriori informazioni, demo e download sul sito web del progetto NyroModal.

jTwitter è un semplice plugin jQuery che ci fornisce un facile accesso alle Twitter API per prelevare informazioni su uno specifico utente di twitter tramite il suo nome utente.

Il risultato della consultazione delle Twitter API è un oggetto JSON costituito dai dettagli dell’utente, quali nome completo, URL homepage, conteggi vari come seguaci, amici, favoriti, numero stati (tweets), localizzazione, etc.

Utilizzo

Per prima cosa nell’intestazione head della nostra pagina HTML dobbiamo richiamare la libreria jQuery (dai server di Google), includere il plugin e poi scrivere il seguente script JavaScript per utilizzare le funzionalità del plugin:

$jTwitter('nome_utente_twitter', num_tweet, function(tweets){
  // funzione richiamata per l'utilizzo delle info ricevute
});

E’ possibile specificare il nome utente twitter di cui si richiedano le informazioni e gli ultimi stati, e opzionalmente il numero di ultimi tweets postati dall’utente, se non specificato verranno prelevati gli ultimi 5 stati. Infine la funzione in cui gestire e manipolare le informazioni ricevute sotto forma di oggeto JSON

Ecco un mio piccolo esempio:

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

  <script type="text/javascript">
    $(document).ready(function(){
      // Ottiene gli ultimi 10 stati dal mio account
      $.jTwitter('mainick', 10, function(tweets){
        $('#stati').empty();
        $.each(data, function(i, tweet){
          $('#stati').append(
            '<div class="stato">'
            +' <div class="msg">'
            +    tweet.text
            +' </div>'
            +'</div>'
          );
        });
      });
    });
  </script>
</head>
<body>
  <h1>Tweet by MaiNick</h1>
  <div id="posts">Attendere...</div>
</body>
</html>

SliderNav è un plugin per jQuery che permette di scorrere una lista dinamica mediante una barra di navigazione verticale, costituita da indici. L’autore prende ispirazione dalla rabrica telefonica dell’iPhone, infatti è realizzato principalmente per un elenco alfabetico, ad esempio una rubrica di contatti, ma può essere utilizzato per qualsiasi cosa.

Il plugin aggiunge automaticamente la barra di navigazione e imposta l’altezza per la lista in base a quanto è alta la barra. E’ possibile scorrere il contenuto della lista utilizzando la rotellina del mouse.

Utilizzo

SliderNav è semplice da far funzionare, ma prima nell’intestazione head della nostra pagina HTML dobbiamo richiamare la libreria jQuery (dai server di Google), includere il plugin e il foglio di stile CSS associato:

<link rel="stylesheet" type="text/css" href="slidernav.css" media="screen, projection" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="slidernav.js"></script>

Aggiungiamo il codice HTML che crea la nostra lista di contatti utilizzando la struttura seguente:

<div id="slider">
  <div class="slider-content">
    <ul>
      <li id="a"><a name="a" class="title">A</a>
        <ul>
          <li><a href="/">Adam</a></li>
          <li><a href="/">Alex</a></li>
          <li><a href="/">Ali</a></li>
          <li><a href="/">Apple</a></li>
          <li><a href="/">Arthur</a></li>
          <li><a href="/">Ashley</a></li>
        </ul>
      </li>
      <li id="b"><a name="b" class="title">B</a>
        <ul>
          <li><a href="/">Barry</a></li>
          <li><a href="/">Becky</a></li>
          <li><a href="/">Biff</a></li>
          <li><a href="/">Billy</a></li>
          <li><a href="/">Bozarking</a></li>
          <li><a href="/">Bryan</a></li>
        </ul>
      </li>
      etc...
    </ul>
  </div>
</div>

Una volta impostato l’intera lista, è semplicemente una questione di chiamare la funzione sliderNav sull’elemento che abbiamo appena creato:

<script type="text/javascript">
$(document).ready(function(){
  $('#slider').sliderNav();
});
</script>

il codice sopra è da scrivere nell’intestazione head della nostra pagina HTML, dopo aver richiamato il plugin.

Opzioni

E’ possibile inizializzare il plugin modificando le impostazioni predefinite in base alle proprie esigenze:

• height: impostare questo valore in pixel se si vuole evitare il rilevamento automatico basato sull’altezza della barra di navigazione verticale.
• items: per default il plugin genera la navigazione in ordine alfabetico utilizzando tutte le 26 lettere dell’alfabeto inglese, ma è possibile inizializzarlo utilizzando delle voci personalizzate.
• arrows: il plugin visualizza delle frecce di scorrimento sulla lista, utili per gli utenti che non dispongono di un mouse con rotellina; i valori possibili di tipo booleano sono true (visualizza) o false (nasconde).

Ecco il codice per inizializzare il plugin, da sostituire a quello semplice:

<script type="text/javascript">
$(document).ready(function(){
  $('#slider').sliderNav({
    items: ['voce1','voce2','voce3'],
    height: '200',
    arrows: false
  });
});
</script>

Conclusioni

SliderNav, come ci consiglia lo stesso autore, può tornare utile principalmente quando vogliamo mostrare molte informazioni in un piccolo box organizzate con un ordine alfabetico (o per data).
Sulla pagina dedicata al plugin SliderNav è possibile scaricare il codice, visualizzare la demo e ottenere ulteriori aggiornamenti.

Cloud Zoom è un plugin jQuery, di peso leggero, che permette di creare un effetto zoom sulle immagini nelle vostre pagine web. E’ altamente personalizzabile con diverse caratteristiche come l’effetto tinta, zoom interno o un sottile effetto di focus, e soprattutto è cross-browser, funziona in tutti i browser web più importanti tra cui il caro vecchio IE6.

Cloud Zoom è molto semplice da implementare, il sito del progetto non manca di una ricca documentazione. Si può facilmente personalizzare l’aspetto con una gallery, lente o finestra di zoom usando i CSS.
Offre diverse opzioni di configurazione che consentono di personalizzare il suo comportamento, tra cui: altezza, larghezza e posizione della finestra di zoom, tinta da applicare sulla parte di immagine non zoommata, opacità, dimensione porzione della parte da zoommare, abilitare o disabilitare i titoli.

Caratteristiche

Riassumento, le caratteristiche che rendono questo plugin davvero ottimo sono:

• Facile integrazione con HTML
• Peso leggero (nella versione compressa solo 6Kb)
• Movimento nello zoom precisi e morbidi
• Modalità gallery
• Effetti tinta, zoom interno o soft-focus
• Completamente accessibile senza JavaScript, CSS o browser testuali

Cloud Zoom è disponibile per il download sotto licenza MIT, per ulteriori informazioni, demo e download fare riferimento al sito del progetto di Cloud Zoom.

Durante il Google I/O 2010, Google ha fatto grandi annunci. Uno di questi riguarda le Google Fonts API

Letteralmente, è possibile integrare tipi di caratteri diversi da quelli web-safe, universalmente diffusi su tutti i device, semplicemente collegando il nostro documento ad un carattere tra quelli ora disponibili, memorizzati sui server di Google (risparmiando banda per le prestazioni di caching).

Utilizzo

Per usufruire delle Google Font API, abbiamo bisogno di un link al nostro carattere desiderato, e farne riferimento nella proprietà font-family del css. Questo è tutto!

<html>
  <head>
    <title>Utilizzo Google Font API</title>
    <link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css" />
    <style>
      body { font-family: 'Lobster', arial, serif; font-size: 70px; }
    </style>
  </head>
  <body>
    Hello World
  </body>
</html>

Per la lista aggiornata dei fonts disponibili è possibile far riferimento alla Google Font Directory.

Per conoscere le operazioni eseguite dietro le quinte dalle Google Font API potete leggere l’articolo sul blog di Html.it

In questo tutorial di oggi vedremo come creare miniature di immagini con PHP e l’uso della libreria GD.

Caricare sul server immagini in dimensioni originali può essere dispendioso per lo spazio a disposizione ma soprattutto per la banda quando bisogna visualizzarle ad ogni richiesta al server.
In questo caso la libreria GD si rivela utilissima perché permette di poter prendere un’immagine jpg, gif o png e crearne una nuova con dimensioni ridotte, quindi più leggera e più veloce da caricare.
Durante il ridimensionamento delle immagini è inoltre possibile ridefinire il livello di compressione, regolando quindi il rapporto qualità/dimensione, rendendo così più veloce il caricamento della miniatura.

Questa funzione php permette il resize di immagini jpeg, gif e png. I parametri da settare per la funzione sono il nome del file da ridimensionare, la cartella dove è presente l’immagine, la cartella dove salvare la nuova immagine e la larghezza della nuova immagine.
Ho deciso di poter passare solo la larghezza perché una dimensione fissa dei lati dell’immagine potrebbe portare a creare un’immagine che non mantiene le proporzioni e quindi deformata.

Funzione per creare e salvare sul server un’immagine ridimensionata

/**
 * =---------------------------------------------------------------------=
 * createThumbnail
 * =---------------------------------------------------------------------=
 * Questa funzione creerà una miniatura dell'immagine caricata.
 *
 * @param $filename	- nome immagine.
 * @param $dir_in		- directory dove è presente l'immagine.
 * @param $dir_out		- directory dove caricare l'immagine.
 * @param $width_image	- larghezza immagine da creare.
 */
function createThumbnail($filename, $dir_in, $dir_out, $width_image) {
  // apro l'immagine originale (jpeg,gif,png)
  if (preg_match('/[.]jpg$/', $filename)) {
    $im = imagecreatefromjpeg($dir_in.$filename);
  }
  else if (preg_match('/[.]gif$/', $filename)) {
    $im = imagecreatefromgif($dir_in.$filename);
  }
  else if (preg_match('/[.]png$/', $filename)) {
    $im = imagecreatefrompng($dir_in.$filename);
  }
  // calcolo la larghezza e l'altezza dell'immagine originale
  $ox = imagesx($im);
  $oy = imagesy($im);
  // larghezza della miniatura data in input
  $nx = $width_image;
  // altezza calcolata proporzionalmente all'immagine originale
  $ny = floor($oy * ($width_image / $ox));
  // creo l'immagine della miniatura
  $nm = imagecreatetruecolor($nx, $ny);
  // copio l'immagine originale in quella della miniatura ridimensionaldola
  imagecopyresized($nm, $im, 0,0,0,0, $nx, $ny, $ox, $oy);
  // verifico l'esistenza della cartella dove salvare la miniatura
  if (!file_exists($dir_out)) {
    if (!mkdir($dir_out)) {
      die("There was a problem.");
    }
  }
  // salvo l'immagine della miniatura
  if (imagejpeg($nm, $dir_out.$filename)) {
    return TRUE;
  } else {
    return FALSE;
  }
}

Con le prime istruzioni condizionali apriamo l’immagine originale sia che essa sia jpeg, gif e png. Poi memorizziamo le dimensioni (larghezza $ox e altezza $oy) dell’immagine originale e le dimensioni della miniatura da creare; la larghezza $width_image fissa passata in input alla funzione e l’altezza calcolate per mantenere la proporzione e non deformare l’immagine nella miniatura.
Una volta creata la base per la miniatura, andiamo a copiare il contenuto dell’immagine originale con le nuove dimensioni (imagecopyresized()). Copiata l’immagine la salviamo con imagejpeg() nel formato jpeg: il terzo parametro, omesso, rappresenta il grado di compressione che può essere un valore variabile da 0 a 100 (più l’immagine è compressa più è leggera e allo stesso tempo più perde di definizione).

Possiamo modificare l’ultima parte della funzione per salvare l’immagine di miniatura nello stesso formato del file originale utilizzando, come nella prima parte, delle istruzioni condizionali e le rispettive funzioni imagejpeg(), imagegif() e imagepng(), di cui è facile intuire il significato.

In conclusione ricordo che la libreria GD è nativa su PHP a partire dalla versione 4.3.0, questo comporta il non funzionamento della funzione createThumbnail() con una versione di PHP inferiore.

Avendo bisogno di implementare una rubrica in un progetto ho avuto l’esigenza di memorizzare per ciascun contatto un numero non precisato di recapiti.

Per la duplicazione del campo recapito ho utilizzato il plugin jquery relCopy che copia un qualsiasi elemento, e suoi figli, dal DOM.
Opzioni del plugin sono:

• excludeSelector (string): selettore jQuery utilizzato per escludere un elemento ed i suoi figli.
• limit (integer): numero di copie permesse [Default 0: illimitato].
• append (string): HTML da allegare alla fine di ogni copia.
• copyClass (string): una classe da associare a ciascuna copia [Default 'copy'].
• clearInputs (boolean): opzione per cancellare i valori dei campi input e textarea clonati [Default true].

Per utilizzarlo basta chiamare $('selettore').relCopy({opzioni}) su un qualsiasi elemento del DOM con un selettore di tipo jQuery definito nell’attributo rel dell’elemento.

Documento HTML

Il modulo visualizzato contiene i campi descrittivi del contatto più la possibilità di associarvi quanti recapiti vogliamo:

<p class="clone"><input type="text" name="recapiti[]" class='input'/></p>
<p><a href="#" class="add" rel=".clone">Aggiungi recapito</a></p>
<p><input type="submit" value="Salva" /></p>

Dopo i campi predefiniti per descrivere un contatto abbiamo un paragrafo con un campo di tipo testo. Il paragrafo ha la classe clone la stessa utilizzata nell’attributo rel del link posto sotto, il quale ha la funzione di clonarlo.

Abbiamo indicato recapiti[] nell’attributo name del campo del recapito in modo da ottenere un array di tutti i recapiti inseriti nell’array globale $_POST: non mettendo le parentesi quadrate il modulo invierebbe il valore dell’ultimo recapito aggiunto.

Script jQuery

Per prima cosa bisogna includere la libreria jQuery (dai server di Google) poi il plugin relCopy ed infine il nostro file di script:

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

Ecco il codice del nostro file di script:

$(document).ready(function(){
  // link inserito alla fine dell'elemento clonato che permette di eliminarlo
  var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>';

  // chiamata permette di clonare il paragrafo con all'interno il campo di testo del recapito
  $('a.add').relCopy({ append: removeLink });
});

Tramite la chiamata $('a.add').relCopy({ append: removeLink}); associamo al collegamento la funzione di clonare il recapito. Nell’opzione append utilizzata del plugin abbiamo definito un link che tramite un metodo jQuery permette di eliminare il corrispondente elemento clonato.

Salva contatto in PHP

Il codice che segue scandisce l’array $_POST['recapiti'] per estrarre i singoli valori inseriti:

<?php
if($_POST['recapiti']){
  $array_recapiti = $_POST['recapiti'];
  foreach ($array_recapiti as $recapito) {
    if (strlen($recapito)>0) {
      //operazioni sul singolo recapito
      echo $recapito."<br />";
    }
  }
}
?>

Demo Download

In questo tutoriale faremo un semplice menu verticale con jQuery ma che cattura l’attenzione del navigatore con l’aiuto di CSS e del plugin Easing per l’effetto a fisarmonica.

Documento HTML

Come potete vedere in seguito dalla demo, il menu è diviso in quattro voci, ciascuna definita da un elemento LI posizionati all’interno dell’elenco principale UL:

<li class="menu"> <!-- costituisce ogni sezione del menu principale -->
  <ul>
    <!-- titolo della sezione che fa aprire il sotto menu -->
    <li class="title"><a href="#">Categoria Firefox</a></li>
    <li class="sub-menu">
      <ul>
        <li><a href="http://www.mainickweb.com/hack-css-per-firefox-opera-safari-e-internet-explorer/">Articolo 1</a></li>
        <li><a href="http://www.mainickweb.com/firefox-3-le-caratteristiche/">Articolo 2</a></li>
      </ul>
    </li>
  </ul>
</li>

Ogni voce del menu contiene un altro elenco UL, formato dalla voce del menu principale (li.title) e da un altro elenco UL che rappresenta il sotto menu (li.sub-menu).
All’interno dell’elemento li.title abbiamo un ancora a cui poi associamo un gestore di eventi jQuery che fa aprire il sotto menu corrispondente: il menu a discesa è nascosto di default tramite la proprietà css display: none.

Foglio di stile CSS

Con uno stile accattivante, anche la più semplice idea può fare una grande differenza nell’attenzione del visitatore.
E’ importante fare particolare attenzione che il codice CSS sia valido e che funzioni bene in tutti i browser:

li.menu {
	/* Voci dell'elenco principale */
	width: 100%;
	padding: 5px 0;
}

li.title a {
	/* Voce del menu principale */
	display: block;
	position: relative;
	width: 200px;
	height: 34px;
	padding: 10px 20px 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: #cc0000;
	color: #ffffff;
	font-family: BPreplay,Arial,Helvetica,sans-serif;
	font-size: 21px;
	overflow: hidden;
}

li.title a:hover {
	background-color: #f40000;
	text-decoration: none;
}

li.title a span {
	/* Questo span agisce come parte finale della sezione title */
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 4px;
	height: 44px;
}

.sub-menu {
	/* Sotto menu */
	display: none;
	width: 100%;
	padding-top: 5px;
}

.sub-menu li {
	/* Voci del sotto menu */
	margin: 5px 0;
	padding: 4px 18px;
	border: 1px solid #40392c;
	background-color: #2F2F2F;
	color: #cccccc;
}

Effetti con jQuery

In primo luogo abbiamo bisogno di includere alcuni script nel documento HTML (questo codice va messo all’interno della sezione HEAD):

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

Per prima cosa bisogna includere la libreria jQuery (in questo caso dai server di Google), poi il plugin Easing e infine il nostro file di script.

Come potete notare dalla demo, l’effetto che si ha nell’aprire un sotto menu è simile ad un rimbalzo. Questo risultato è ottenuto con l’aiuto del plugin Easing per jQuery: esso prevede una serie di effetti interessanti.

Ecco il codice del nostro file di script:

$(document).ready(function(){

  /* Cambiare l'effetto da utilizzare */
  $.easing.def = "easeOutBounce";

  /* Associare una funzione all'evento click sul link */
  $('li.title a').click(function(e){

    /* Finding the drop down list that corresponds to the current section: */
    var subMenu = $(this).parent().next();

    /* Trovare il sotto menu che corrisponde alla voce cliccata */
    $('.sub-menu').not(subMenu).slideUp('slow');
    subMenu.stop(false,true).slideToggle('slow');

    /* Prevenire l'evento predefinito (che sarebbe di seguire il collegamento) */
    e.preventDefault();
  })

});

Per prima cosa bisogna impostare l’effetto da utilizzare (easeOutBounce), e quindi associare una funzione da compiere per l’evento click sul link in li.title: si ottiene il corrispondente sotto menu (linea ) e lo si mostra (linea ), nascondendo tutti gli altri (linea ).

Il metodo slideToggle di jQuery controlla se l’elemento è già visibile sulla pagina, e decide se mostrarlo o nasconderlo: in questo modo, quando si fa click su una sezione del menu già aperta, essa viene semplicemente chiusa.
Dopo questo, usiamo e.preventDefault() per impedire al browser di seguire il collegamento (il comportamento normale per avere cliccato su un link).

Demo Download