Come realizzare menu con effetto rollover con css e html

Realizzare un menu in html e css è un’operazione molto semplice, utilizzando le liste abbiamo a disposizione diverse metodologie che permettono di cambiare lo stile solo con i css. Diventa invece problematico a volte utilizzare le pseudoclassi dinamiche dei link per ottenere effetti interattivi, in questo tutorial vediamo come affrontare gli incovenienti più comuni.Nelle liste tradizionali le regole css di norma servono solo a gestire la grafica o a cambiare la disposizione delle voci da verticale ad orizzontale con un display:inline; le problematiche possibili sono facilmente risolvibili gestendo l’altezza delle voci per internet explorer e gestendo lo spazio tra le voci.

Nel caso si debba rendere i link con un effetto rollover è possibile realizzare l’effetto utilizzando le pseudoclassi dinamiche dei link (:hover :visited :link :active). Per adottare questa soluzione occorre utilizzare l’elemento link come elemento di blocco e apportare dovute modifiche alle classiche regole per un menu verticale o orizzontale.

In un menu verticale per esempio occorre considerare le problematiche inerenti ad internet explorer 6, il quale inserisce uno spazio tra le varie voci della lista e nel caso di un link come elemento di blocco l’area cliccabile non si espande.

Per risolvere queste problematiche è possibile settare regole specifiche per Internet explorer.

* html #verticaleHover li{display:inline;}
* html #verticaleHover li a{height:0;}

La prima regola definisce l’elemento di una lista come inline eliminando gli spazi tra le voci, la seconda imposta un’altezza al link permettendo un corretto rendering come elemento di blocco. Per questa soluzione si è utilizzato il selettore * html interpretato solo da internet explorer 6 e precedenti per windows e mac ma è altrettanto efficace l’utilizzo di un if selettivo nel head della pagina html.

<!-- [if lte IE 6]>
<style type="text/css">
#verticaleHover li{display:inline;}
#verticaleHover li a{height:0;}
</style>
<![endif]-->

Per un menu orizzontale le cose diventano leggermente più complicate in quanto impostando l’elemento link come elemento di blocco non è possibile utilizzare display:inline; per allineare le voci del menu. E’ quindi obbligatorio utilizzare la proprietà float sulle voci e sui link per disporle correttamente.

Con questa metodologia occorre settare la proprietà list-style:none; per eliminare i marcatori degli elementi di linea in quanto a differenza che con display:inline; la lista mantiene i marcatori di default.

Per vedere la soluzione in azione guarda l’esempio.

L’esempio proposto è a solo scopo dimostrativo, questa soluzione implica l’annullamento degli spazi tra le diverse zone cliccabili, questa pratica compromette l’accessibilità dell’utente che passando sulle voci non percepisce un cambiamento del puntatore rendendo poco chiara la differenza tra le aree cliccabili dei vari link. Nel caso si utilizzi questa metodologia sarebbe opportuno utilizzare i margini per distanziare le voci e il background della lista per mantenere un’estetica piacevole.

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Tutorial e contrassegnata con , , . Contrassegna il permalink.

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>