CSS: menu a tab dinamico

Short link

Vogliamo creare con i CSS un menu a tab dinamico in cui ciascuna voce si espanda in altezza al passaggio del mouse. Tipicamente questo è un effetto che si ottiene con jQuery, specie se vogliamo aggiungervi un'animazione. In realtà è possibile farlo con i soli CSS. Vediamo come.

Partiamo dalla seguente marcatura:


<ul id="navigation">
	
	<li><a href="#">Home</a></li>
	<li><a href="#">Articoli</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contatti</a></li>
	
</ul>

Useremo il floating per allineare le voci. Iniziamo dagli stili generali:


body {
	
	margin: 0;
	padding: 0;
	font: 76% Arial, Helvetica, sans-serif;
	background: #fff;
	color: #333;
	
}

#navigation {
	
	height: 2em;
	margin: 1em 0;
	padding: 0 0 0 1em;
	list-style: none;
	border-bottom: 1px solid #d34545;
	font-size: 1.3em;
	
}

L'altezza del menu di navigazione è di 2em. Il colore del suo bordo inferiore sarà lo stesso di quello dello sfondo dei tab nel loro stato normale. Ora allineiamo le voci:


#navigation li {
	
	float: left;
	height: 100%;
	margin-right: 0.5em;
}

Impostando l'altezza di ciascuna voce su 100% la rendiamo alta esattamente come il menu di navigazione. A questo punto assegniamo gli stili allo stato normale dei link:


#navigation a {
	
	height: 1.5em;
	line-height: 1.5;
	display: block;
	padding: 0 1em;
	text-decoration: none;
	background: #d34545;
	color: #fff;
	font-weight: bold;
	border-radius: 6px 6px 0 0;
	margin-top: 0.6em;
	
}

I link hanno un'altezza inferiore alle voci del menu. Perchè? Perchè abbiamo assegnato loro un margine superiore che li farà apparire a ridosso del bordo inferiore del menu. Notate come l'interlinea sia uguale all'altezza per centrare il testo in verticale. Abbiamo 1.5em + 0.6em = 2.1em. Quel valore di 0.1em in più serve a fare in modo che non vi sia uno spazio tra il limite inferiore del link e il bordo di 1 pixel del menu. Ricordiamo che l'altezza del menu è di 2em.

Ora dobbiamo creare l'effetto di espansione in verticale:


#navigation a:hover {
	
	background: #f40;
	height: 2em;
	line-height: 2;
	margin-top: 0;
	
}

Abbiamo rimosso il margine superiore dal link, aumentato la sua altezza fino a che sia pari all'altezza del menu e cambiato la sua interlinea per far si che il testo sia sempre centrato in verticale. L'effetto finale è questo: quando si passa col mouse sul link, questo si espanderà in altezza.

Potete visionare l'esempio finale in questa pagina.

L'autore

Gabriele Romanato, sviluppatore web full stack specializzato in siti, applicativi web ed e-commerce con Node.js e PHP.