Attraverso l’uso della funzione animate() di jQuery è possibile, con poche righe di codice, sperimentare soluzioni creative e carine per il nostro sito web. Una di queste è la possibilità di realizzare un menù a comparsa/scomparsa laterale che si apre solamente al passaggio del mouse sulla sporgenza della nostra linguetta. Il risultato che vogliamo ottenere è il seguente:
Come possiamo vedere l’effetto, ovviamente adattato e aggraziato è molto carino e poco invasivo! Vediamo ora come strutturare il nostro markup:
Il codice HTML
<ul id="navigation"> <li><a href="#" class="voce1"></a></li> <li><a href="#" class="voce2"></a></li> <li><a href="#" class="voce3"></a></li> <li><a href="#" class="voce4"></a></li> </ul>
Tutto qua, una semplice lista di navigazione contenente dei link. Non serve nient’altro! Nel caso dell’esempio abbiamo utilizzato una classe per ogni link per poter associare ad ognuno di essi un’immagine dei background diversa. Tuttavia la soluzione sicuramente più elegante e pulita è quella di utilizzare gli sprites css (se volete sperimentare un modo alternativo di usare gli sprites potete dare un’occhiata qui!).
PS: ricordatevi di includere la libreria jQuery all’interno del tag !
Il codice CSS
body{
background:#fff;
font-family: Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 10px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 100px;
}
ul#navigation li a {
text-decoration:none;
display: block;
margin-left: -2px;
width: 60px;
height: 40px;
font-size:16px;
font-weight:bold;
background-color:#fff;
background-repeat:no-repeat;
background-position:center center;
background-repeat:no-repeat;
border-radius:0px 10px 10px 0px;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
border:1px solid #ccc;
}
.voce1 {background: url(blue_monster_happy.png)}
.voce2 {background:url(green_monster_angry.png)}
.voce3 {background:url(red_monster_angry.png)}
.voce4 {background:url(yellow_monster_happy.png)}E’ tutto piuttosto semplice, la maggior parte delle proprietà servono solo a fini stilistici! L’unica nota di merito va fatta alla scelta di usare il position:fixed. Questa ovviamente è una scelta che deve essere valutata e ponderata in base al progetto, non sempre vorremo infatti vedere il nostro menù sempre ancorato alla pagina! E’ bene però tener conto che un menù a comparsa laterale che “sparisse” causerebbe non pochi problemi di navigazione ai nostri poveri utenti!
Lo script jQuery
$('#navigation a').stop().animate({'marginLeft':'-50px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-7px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);
}
);Come possiamo vedere il trucco si svela molto rapidamente. Attraverso la funzione animate facciamo in modo che appena la pagina viene caricata il menù si sposta a sinistra di 50px (così l’utente ha il tempo di vedere meglio che c’è, ma potremmo tranquillamente rimuovere questo parametro!). Al passaggio del mouse sopra un elemento della lista invece il margine sinistro diminuisce fino a -7px, così la nostra linguetta sporge in fuori (ad una velocità di 200 millisecondi).
Quando usciamo dalla linguetta questa rientrerà nella posizione di partenza (il margine torna a -50px). Ed il gioco è fatto! La funzione .stop() permette di impedire che si sovrappongano animazioni e permette quindi di terminare l’animazione iniziata prima di eseguirne un’altra (visivamente non sembrerà così ma… provate a toglierla e vedrete le vostre linguette ondeggiare liberamente senza sosta!).
Nota: il simbolo “>” è un selettore CSS che serve per indicare l’elemento figlio. Per un approfondimento vi rimando a questo articolo. Buona sperimentazione!
PPS: Non imitate mai il sistema ad iframe che ho utilizzato per mostrarvi l’esempio in pagina mi raccomando :D!
