Come è noto lo stato di hover si riferisce all'aspetto o al comportamento di un elemento nel momento in cui il cursore del mouse passa sopra di esso. Nel CSS lo stato di hover viene definito con la pseudoclasse :hover e il suo utilizzo più comune si ha nella gestione dell'aspetto dei link.
Ripartendo dai link, facciamo l'esempio di un collegamento di questo tipo:
a:link {color: blue}posso fare in modo che il link appaia rosso e sottolineato al passaggio del
mouse semplicemente creando una regola ad hoc:
a:hover
{
color: red;
text-decoration: underline
}Il fatto che la pseudoclasse :hover sia usata prevalentemente con i link non è dovuto ad una sua limitazione intrinseca, ma al fatto che in passato IE la applicava esclusivamente sui link (anche se la cosa era bypassabile con qualche polyfill).
In realtà, è possibile applicare hover su tutti gli elementi, per modificarne l'aspetto al passaggio del mouse. Ad esempio passando con il mouse su questo paragrafo dovreste vedere uno sfondo giallo. L'effetto è ottenuto assegnando una classe "sfondogiallo" al paragrafo e definendo questa regola CSS:
p.sfondogiallo:hover
{
background: yellow
}Questa caratteristica apre la strada ad esperimenti molto interessanti. Quello più celebre è senz'altro la realizzazione di un menu a tendina basato solo sui CSS (Pure CSS Menus), uno dei tanti contributi offerti dal genio di Eric Meyer. Nel seguito dell'articolo realizzeremo una barra/menu orizzontale basata su questa tecnica. La notizia è che con IE7 l'esperimento può ora essere fruito anche su Explorer.
Cominciamo da questo primo esempio. Per realizzarlo sono partito da uno dei layout CSS presentati nella guida di Alessandro Fulciniti. L'ho innanzitutto modificato, passando da un tipo di layout fluido ad uno fisso. Ho quindi aggiunto un menu orizzontale con 5 voci e relativi sotto-menu all'interno della testata. Vediamo come abbiamo realizzato il tutto.
Il codice HTML per menu a tendina
Per prima cosa è necessario inserire un div che racchiuda il menu vero e proprio:
<div id="hormenu">
<!--qui il menu-->
</div>Al div ho assegnato l'id hormenu, che sta per horizontal menu.
Veniamo al menu. Si tratta di un insieme di liste annidate (riporto per comodità solo una parte del codice):
<div id="hormenu"><!-- div che contiene il menu -->
<ul> <!-- lista principale: definisce il menu nella sua interezza -->
<li>
<a href="#">Menu 1</a> <!-- primo list-item, prima voce del menu -->
<ul> <!-- Lista annidata: voci del sotto-menu -->
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 1</a></li>
</ul> <!-- Fine del sotto-menu -->
</li> <!-- Chiudo il list-item -->
<!--qui altri list-item -->
</div>Soffermiamoci un attimo sulla struttura. Se osservate il menu, noterete che esso è composto da 5 voci principali:
- Menu 1
- Menu 2
- Menu 3
- Menu 4
- Menu 5
Queste 5 voci, nel codice HTML, diventano altrettanti li (list item). Ciascuna voce del menu, poi, racchiude un suo sotto-menu. In HTML, ogni sotto-menu è rappresentato a sua volta da una lista. Sembra complicato ma non lo è. Il codice commentato qui sopra dovrebbe aiutare a comprendere meglio il tutto.
Passiamo ora ad esaminare il CSS.
Menu a tendina con CSS
Il codice HTML è davvero minimale, ridotto all'essenziale. Tutto il lavoro di presentazione è affidato ai CSS. La sfida è passare da questo:
- Menu 1
- Submenu 1-1
- Submenu 1-2
- Submenu 1-3
- Menu 2
- Submenu 2-1
- Submenu 2-2
alla barra orizzontale dell'esempio. Si inizia con la formattazione del div hormenu:
div#hormenu {
width: 100%;
float: left;
margin: 0;
padding: 0;
border-top: 1px solid black;
background: red;
}Due sono le cose da osservare e ricordare. Realizzando menu orizzontali basati su liste, se si vuole ottenere l'effetto di una barra orizzontale che si estende per tutta la larghezza del div, è necessario impostare la proprietà width su 100% e il float su left. Le regole possono essere definite o a livello del div contenitore o a livello della lista principale: qui si è seguita la prima strada.
Ora dobbiamo eliminare il marcatore dei singoli item in tutte le liste. Useremo un selettore discendente, in modo da applicare le regole a tutte le liste discendenti del div #hormenu:
div#hormenu ul
{
margin: 0;
padding: 0;
list-style-type: none;
}Le 5 voci principali del menu, quelle 'visibili' sulla barra rossa per intenderci. Devono innanzitutto essere affiancate l'una all'altra, per cui per ogni li impostiamo un float: left. La larghezza di ciascun elemento sarà di 100px, margini e padding si settano su 0. Il resto è pura decorazione. Ecco la regola:
div#hormenu li
{
width:100px;
float:left;
margin: 0;
padding: 0;
border-right: 1px solid black;
color:black;
}Dal momento che di un menu si tratta, è importante definire anche gli stili per i link:
div#hormenu a
{
display: block;
padding: 5px;
color: #000;
text-decoration: none;
}
div#hormenu a:hover
{
background-color: #000033;
color: #FFFFFF;
text-decoration: none;
}Ed eccoci alle due regole cruciali per la gestione del menu. Quando apro la pagina i sotto-menu non devono essere visibili. Devono comparire solo quando passo il mouse su una delle 5 voci. Dunque, nei CSS, devo scrivere una regola che più o meno suoni così: "Non mostrare le liste discendenti di elementi li". Eccola:
div#hormenu li ul
{
display: none
}Menu dinamico con CSS
L'altra regola deve occuparsi della comparsa dinamica dei sotto-menu: "Quando passo con il mouse su questo list-item, mostra il suo sotto-menu". Qui sfruttiamo la possibilità di avere l'hover su tutti gli elementi. Nel CSS avremo:
div#hormenu li:hover ul
{
display: block;
position: absolute;
z-index:1;
width:150px;
padding: 0;
margin: 0 0 0 -1px;
border:1px solid black;
background: white;
}Per comprendere bene la regola, leggiamola da destra a sinistra. La lista (ul) che discende da un list-item in stato di hover (li:hover) deve avere queste caratteristiche... Detto altrimenti: "quando passo con il mouse sopra questo list-item, la lista sua discendente deve avere queste caratteristiche".
Innanzitutto, deve essere visibile, cosa che ottengo con display:block. Deve poi essere posizionata assolutamente rispetto al suo elemento contenitore. Quindi, specificando lo z-index, facciamo in modo che sia sempre in primo piano.
Il CSS si chiude con un paio di regole relative ai link dei sotto-menu:
div#hormenu li li { border:none; width:150px; }
div#hormenu li li a { padding:2px 2px 2px 10px; }Fatto. Codice pulito, ben strutturato, poche regole CSS per ottenere quello che in genere è (era) possibile con complicati script.
