Realizzare un menù a tendina con CSS3 e HTML

Giovanni Canella

20/09/2013

67671

In qualunque sito web il menù è il punto di riferimento di un utente, dove può trovare informazioni utili quali gli estremi per contattare l'amministratore, le sezioni, prodotti, login ecc. In questo articolo vediamo come crearne uno ad effetto con il semplice utilizzo di HTML e CSS3.

La logica che c'è dietro a questo tipo di menù è molto semplice: infatti non si tratta altro che liste contenenti sotto-liste: se quella voce ha più elementi quando ci passeremo sopra con il mouse, faremo in modo di mostrare tale contenuto. Ecco il risultato di quello che andremo a realizzare:

Risultato finale menù a tendina

DEMO

HTML

Per arrivare a quel risultato partiamo dalla struttura (accennata precedentemente) del menù:

<!DOCTYPE html>
<html lang="it" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8" />
	<title>Menu a tendina</title>
</head>
<body>
	<div id="menu">
		<!-- Lista generale -->
		<ul>
			<!-- 1° Elemento	-->
			<li><a href="#">Home</a></li>

			<!-- 2° Elemento -->
			<li><a href="#">Contattami</a></li>

			<!-- 3° Elemento: (Sottomenu) -->
			<li>
				<a href="#">Sezioni</a>
				<ul>
					<li><a href="#">Windows</a></li>
					<li><a href="#">Sicurezza</a></li>
					<li><a href="#">Attualità</a></li>
				</ul>
			</li>
			
			<li><a href="#">Mi presento</a></li>
		</ul>
	</div>
</body>
</html>

Che produrrà:

Struttura base HTML del menù

CSS3

Ora veniamo ai fogli di stile: come prima cosa "improntiamo" il menù:

  1. Disponendo le voci in orizzontale (float: left), 
  2. Togliendo i dischetti laterali delle liste (list-style: none) e 
  3. Definendo la durata delle animazioni di 0.2s molto veloce, così da non dover far attendere troppo tempo all'utente, tramite transition e come animazione ease-in-out.
body {
	background: #CCC;
	font-family: Arial, Helvetica, sans-serif;
}

#menu ul {
	padding: 0;
	margin: 0;
}

#menu li {
	position: relative;
	float: left;
	width: 140px;
	text-align: center;
	list-style: none;
}

Ora passiamo allo stile dell'elemento definendo:

  1. Un padding di 15px, in modo da non "appiccicare" il testo al div,
  2. Uno sfondo con colore vicino al nero (#454545),
  3. Un carattere bianco  centrato (a mio parere ottima combinazione con uno sfondo scuro),
  4. Un bordo inferiore di diverso colore per ogni voce, identificata univocamente con l'id definito nel codice HTML.
#menu li a {
	background-color: #454545;
	color: #FFF;
	padding: 15px 20px;
	text-decoration: none;
	display: block;
}

#home:hover { 
	border-bottom: 3px solid #FFFFFF;
}

#feed:hover { 
	border-bottom: 3px solid #F4C166;
}

#sezioni:hover { 
	border-bottom: 3px solid #66F49E; 
}

Successivamente passiamo agli "effetti speciali", quando l'utente passa sopra una voce del menu, in cui:

  1. Illuminando il testo con un bianco puro (#FFFFFF)
  2. Aggiungendo una sfumatura nel sottomenu di un colore tendente al nero in modo da fare contrasto (#7C7C7C).
#menu li a:hover {
	text-shadow: 0px 0px 1px #FFF;
}

#menu ul ul:hover {
	box-shadow: 0px 20px 30px #7C7C7C;
}

Ora manca solo la parte dove dobbiamo fare in modo di rendere visibile la tendina solo quando passiamo con il mouse nella relative voce. Esempio. se passiamo su "Sezioni", vogliamo che vengano mostrate tutte le voci, mentre quando togliamo il mouse dobbiamo nasconderle. Per far questo usiamo visibility: hidden/visible;

#menu ul ul {
	position: absolute;
	top: 48px;
	visibility: hidden;
}

#menu ul li:hover ul{
	visibility: visible;
}

Codice completo

#menu ul {
	padding: 0;
	margin: 0;
}

#menu li {
	position: relative;
	float: left;
	width: 140px;
	text-align: center;
	list-style: none;
}

#menu li a {
	background-color: #454545;
	color: #FFF;
	padding: 15px 20px;
	text-decoration: none;
	display: block;
}

#menu li a:hover {
	background-color: #4d4d4d;
	text-shadow: 0px 0px 1px #FFF;
}

#menu ul ul {
	position: absolute;
	top: 48px;
	visibility: hidden;
}

#menu ul li:hover ul {
	visibility: visible;
}

#menu ul ul:hover {
	box-shadow: 0px 20px 30px #7C7C7C;
}

#menu ul ul li a {
	background-color: #3A3A3A;
}

#menu ul ul li a:hover {
	background-color: #3F3F3F;
}

Compatibilità

Il menù è compratibile con tutti i principali browser: Chrome, Firefox, Opera, Safari e Internet Explorer

 

DEMO

Ti potrebbero interessare

I più letti