Un menu a tendine solo con i CSS

20 marzo 2006

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 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.

Se vuoi aggiornamenti su Un menu a tendine solo con i CSS inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Un menu a tendine solo con i CSS

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy