L'effetto gloss è uno di quelli che più contraddistingue il Web 2.0. In questo articolo vedremo proprio come ottenere
un menu gloss con grafica e CSS e con un'accattivante
transizione grazie alla potente libreria jQuery.
L'ispirazione proviene dal sito Deezer,
da cui ho provato a replicare il menu senza l'utilizzo di Flash. I menu con
transizioni sono decisamente accattivanti, e dato che Deezer fa un uso estensivo
di Flash non solo per il menu, il suo utilizzo è più che giustificato.
È possibile però replicare l'effetto utilizzando HTML,CSS, grafica e Javascript: è questo lo scopo dell'articolo.
Nella prima parte vedremo come realizzare il menu gloss con rollover
mediante grafica e CSS, per poi aggiungere un bell'effetto fade con jQuery
nella seconda: otterremo un menu con markup leggero, accessibile e che degrada
bene anche in assenza di Javascript. Cominciamo subito.
Esempio 1: un menu a due stati con rollover
Il nostro primo esempio usa markup minimale,
due immagini di sfondo e poche regole CSS per ottenere un menu a due
stati (stato normale e hover/attivo assieme) decisamente accattivante.
Cominciamo dalla grafica. Ciascun link è di 120px per 30px, e l'immagine
di sfondo racchiude due linee di link, ovvero l'intero menu in stato normale e
quello con le voci attive. L'intera immagine di sfondo è larga
in totale quindi 480px e alta 60, eccola di seguito:
In aggiunta, sarà necessaria un'immagine da ripetere orizzontalmente
sull'intero contenitore del menu che è larga 10px e alta 30:
Passiamo ora all'HTML dell'esempio,
che è composto da una lista non ordinata di link contenuta in un div id="menu".
Da notare il fatto che ogni list-item ha un id univoco così da individuare le singole
voci del menu, e che il link che indica la pagina/sezione corrente ha class="active".
Ecco il codice:
<div id="menu">
<ul>
<li id="home"><a href="#">Home</a></li>
<li id="about"><a href="#">Chi siamo</a></li>
<li id="product"><a href="#" class="active">Prodotti</a></li>
<li id="contact"><a href="#">Contatti</a></li>
</ul>
</div>
Siamo pronti a procedere con il CSS dell'esempio, che è piuttosto
semplice: i lettori che hanno letto la serie
Menu grafici con rollover e preload via CSS
troveranno la sua implementazione piuttosto familiare.
Si tratta infatti di nascondere l'informazione testuale
dei link e mostrare la porzione relativa dell'immagine di sfondo che compone il menu. In fase :hover e per lo
stato attivo, la porzione grafica corrispondente al link sarà quella relativa alla seconda riga dell'immagine
di sfondo.
In questo caso, per i singoli link vengono usati i posizionamenti assoluti e per l'image replacement
viene usato il text-indent negativo.
Dopo questa breve introduzione, eccoci alle regole del menu che si divide in tre sezioni logiche distinte:
stili generici su lista, list-item e link; regole per i link in stato normale e infine regole per i link
in stato attivo/hover.
Vediamo a questo punto il CSS dell'esempio per intero:
#menu{position: relative;height: 30px;overflow: hidden;
background: url(menubk.png);margin-top: 100px}
#menu ul,#menu li{margin: 0;padding: 0;list-style: none}
#menu a{position: absolute;top: 0;width: 120px;height: 30px;
background-image: url(matrix.png);text-indent: -9999px}
#about a{left: 120px;background-position: -120px 0}
#product a{left: 240px;background-position: -240px 0}
#contact a{left: 360px;background-position: -360px 0}
#home a:hover,#home a.active{background-position: 0 -30px}
#about a:hover,#about a.active{background-position: -120px -30px}
#product a:hover,#product a.active{background-position: -240px -30px}
#contact a:hover,#contact a.active{background-position: -360px -30px}
Nella prima parte si dichiara il div posizionato relativamente, così
da consentire il posizionamento assoluto al suo interno, e si attribuisce
l'immagine di sfondo da ripetere orizzontalmente. Si eliminano poi margini
e padding da lista e list-item. Per ciò che riguarda i link vengono
infine specificate le dichiarazioni comuni: dimensioni, immagine
di sfondo e il text-indent negativo così da far "sparire" l'informazione
testuale.
Nel secondo blocco dichiarativo vengono specificate le coordinate
dello sfondo per ciascun link, insieme alla proprietà left
relativa al posizionamento assoluto. Da notare come la regola per
il primo link sia stata omessa, dato che ricalcherebbe i valori di
default (0 per left e 0 0 per
background-position).
Ricordo che per la proprietà background-position richiede
due valori: la coordinata orizzontale (x) e quella verticale (y), valori negativi
sull'asse x faranno slittare l'immagine verso la sinistra, mentre
valori negativi per la y la trasleranno verso l'alto. In effetti, nell'ultimo
blocco di regole, relativo agli stati attivi e :hover dei link, il valore
sull'asse y è proprio -30px così da mostrare la porzione
inferiore dell'immagine che combina l'intero menu nei due stati.
Il nostro primo esempio è così ultimato,
siamo pronti a procedere con il prossimo.
Esempio 2: un menu a tre stati con rollover
Nel secondo esempio abbiamo un menu
grafico con rollover a tre stati: normale, :hover e attivo. Le modifiche
rispetto al primo esempio sono davvero minime; per quanto riguarda
la grafica, si tratta ovviamente di preparare un'immagine che contenga
i tre stati dei link dell'intero menu:
Il markup del secondo esempio è identico
a quello del primo; e per il CSS le modifiche sono davvero minime: basta
infatti di separare gli stati attivo e hover per le voci
del menu (che nel primo esempio coincidevano) così da mostrare la porzione
di immagine corrispondente. Vediamo a questo punto il CSS per intero:
#menu{position: relative;height: 30px;overflow: hidden;
background: url(menubk.png);margin-top: 100px}
#menu ul,#menu li{margin: 0;padding: 0;list-style: none}
#menu a{position: absolute;top: 0;width: 120px;height: 30px;
background-image: url(matrix2.png);text-indent: -9999px}
#about a{left: 120px;background-position: -120px 0}
#product a{left: 240px;background-position: -240px 0}
#contact a{left: 360px;background-position: -360px 0}
#home a:hover{background-position: 0 -30px}
#about a:hover{background-position: -120px -30px}
#product a:hover{background-position: -240px -30px}
#contact a:hover{background-position: -360px -30px}
#home a.active{background-position: 0 -60px}
#about a.active{background-position: -120px -60px}
#product a.active{background-position: -240px -60px}
#contact a.active{background-position: -360px -60px}
Il nostro secondo esempio ha richiesto
davvero poche modifiche rispetto al primo, ed ha il pregio
di differenziare graficamente gli stati attivo e hover.
Entrambi gli esempi hanno una buona compatibilità: sono stati
testati con successo su IE dalla versione 5.5 alla 7, oltre
che sulle ultime versioni di Opera, Firefox e Safari.
Non ci resta a questo punto che addentrarci nella parte più
divertente e innovativa dell'articolo, ovvero come aggiungere
le transizioni ai nostri menu grafici grazie a jQuery.
Lo vedremo nel prossimo appuntamento: non mancate!
Aggiungere transizioni con JQuery: esempio 3
Entriamo ora nel vivo dell'articolo con il primo esempio
che usa jQuery e poche righe di codice aggiuntivo (5 per l'esattezza) per ottenere
un bell'effetto rollover, tipico dei menu fatti in Flash.
La base di partenza dell'esempio è il primo esempio
che abiamo visto nella prima parte, con alcune piccole modifiche e accorgimenti.
La prima differenza è nel markup, dato che nell'esempio che usa jQuery
all'interno dei link del menu vi è un'elemento span vuoto:
<div id="menu">
<ul>
<li id="home"><a href="#"><span></span>Home</a></li>
<li id="about"><a href="#"><span></span>Chi siamo</a></li>
<li id="product"><a href="#" class="active"><span></span>Prodotti</a></li>
<li id="contact"><a href="#"><span></span>Contatti</a></li>
</ul>
</div>
La logica che sta dietro all'esempio è abbastanza semplice: gli elementi
span vengono posizionati assolutamente all'interno dei link, e contengono la porzione del menu
relativa alla fase :hover; in questa fase, gli span vengono mostrati con un effetto
fade di transizione grazie a jQuery in modo da coprire i link con la porzione d'immagine dedicata
al rollover.
Per realizzare l'esempio, può essere utile disporre
di un esempio intermedio che possa aiutare la comprensione:
in esso non viene usato jQuery ma solo HTML e CSS. Le regole relative
a lista, list-item e link attivi sono identiche al menu visto nella prima parte;
in questo caso però il rollover è compito dello span che viene mostrato solo in fase :hover.
Ecco le regole relative:
#menu a:hover span{position: absolute;
top: 0;left: 0;width: 120px;height: 30px;
background-image: url(matrix.png);cursor: pointer}
#home span{background-position: 0 -30px}
#about span{background-position: -120px -30px}
#product span{background-position: -240px -30px}
#contact span{background-position: -360px -30px}
Si tratta a questo punto di modificare il CSS in modo da lasciare intatte tutte le dichiarazioni,
ma nascondere definitivamente gli span all'interno dei link, lasciando che sia jQuery ad occuparsi
di mostrarli in fase :hover. Ecco quindi il CSS dell'esempio con jQuery
per intero, in cui l'ultima sezione riguarda le regole necessarie per le transizioni:
#menu{position: relative;height: 30px;overflow: hidden;
background: url(menubk.png);margin-top: 100px}
#menu ul,#menu li{margin: 0;padding: 0;list-style: none}
#menu a{position: absolute;top: 0;width: 120px;height: 30px;
background-image: url(matrix.png);text-indent: -9999px}
#about a{left: 120px;background-position: -120px 0}
#product a{left: 240px;background-position: -240px 0}
#contact a{left: 360px;background-position: -360px 0}
#home a.active{background-position: 0 -30px}
#about a.active{background-position: -120px -30px}
#product a.active{background-position: -240px -30px}
#contact a.active{background-position: -360px -30px}
/*parte per JQuery*/
#menu span{display: none;position: absolute;
top: 0;left: 0;width: 120px;height: 30px;
background-image: url(matrix.png);cursor: pointer}
#home span{background-position: 0 -30px}
#about span{background-position: -120px -30px}
#product span{background-position: -240px -30px}
#contact span{background-position: -360px -30px}
Visto l'HTML e il CSS dell'esempio, possiamo
a questo punto passare al Javascript. È facile notare che nella sezione head
della pagina sono inseriti due elementi script:
<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="glossmenu.js"></script>
La prima riga è quella per aggiungere jQuery (giunto alla versione 1.2.2 nel momento in cui
scrivo), mentre la seconda contiene lo script specifico per ottenere le transizioni. jQuery
è una libreria potente e versatile, e sono bastate 5 righe di codice, eccole:
$(function(){
$("#menu a").not(".active").hover(
function(){$("span",this).fadeIn("slow");},
function(){$("span",this).fadeOut('fast');});
});
La funzione anonima, che si attiva appena il DOM è pronto, si occupa di mostrare
gli span in fase hover dei link del #menu (escluso quello con classe "active"):
questi verranno mostrati lentamente, ma nascosti più velocemente quando il mouse si
allontana dal link. Lo script non necessita di modifiche, salvo eventualmente la parte
mostrata in grassetto, ovvero il selettore CSS che individua i link del menu, ma
solo nel caso utilizzerete un id diverso da "menu".
Ricordo comunque che non c'è bisogno di conoscenze di Javascript per adottare
una soluzione simile, basta capire il meccanismo che vorrei riepilogare. Si tratta
in sostanza di realizzare un menu con rollover CSS, per poi far si che la fase
:hover diventi compito degli span vuoti inseriti all'interno dei
link. Questi poi vengono nascosti definitivamente con display:none
e, una volta aggiunti jQuery e lo script specifico alla pagina, saranno loro
ad occuparsi delle transizioni soft.
Esempio 4 e conclusioni
Analogamente all'esempio appena visto, grazie a jQuery e allo script specifico,
è possibile ottenere un menu a tre stati con transizioni.
Il CSS è per la maggiorparte identico alla sua versione classica
con solo HTML e CSS che abbiamo visto nella prima parte, escluse le regole relative agli span
che si occupano delle transizioni.
Gli esempi visti in questa seconda parte hanno una buona compatibilità: sono stati testati con successo
su IE6 e IE7, oltre che sulle ultime versioni di Opera, Firefox e Safari. Su IE5.x (browser non
supportati da jQuery) e con Javascript disabilitato degradano bene e sono perfettamente funzionali.
Verranno in questo caso mostrati i link in stato di riposo e il link attivo, ma si perderà
lo stato :hover.
Gli esempi, completi di codice, immagini e script, sono disponibili per il download:
dovrebbero essere un buon punto di partenza, dato che vi basterà adattarli alla vostra
grafica avendo cura di rivedere le voci e gli id del menu nell'HTML, le dimensioni e il
background-position nel CSS. Alla prossima!
