CSS: creare un menu per i dispositivi mobile con le Media Queries

In questo breve tutorial vi mostrerò come trasformare un menu orizzontale pensato per il desktop in un menu verticale ottimizzato per i dispositivi mobile utilizzando le Media Queries CSS.

Abbiamo la seguente marcatura:

<nav id="navigation" role="navigation">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Contacts</a></li>
	</ul>
</nav>

Ora definiamo gli stili per gli schermi ad alta risoluzione:

#navigation {
	height: 3em;
	background: #343434;
}

#navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	height: 100%;
}

#navigation li {
	float: left;
	height: 100%;
	margin: 0 1em;
}

#navigation a {
	float: left;
	height: 100%;
	line-height: 3;
	color: #fff;
	text-decoration: none;
	padding: 0 1em;
}

#navigation a:hover {
	background: #666;
}

Quindi sovrascriviamo i nostri stili per i piccoli schermi:

@media only screen and (max-width: 320px) {
	#navigation,
	#navigation ul {
		height: auto;
	}
	#navigation li, #navigation a {
		float: none;
		display: block;
		margin: 0;
		height: auto;
	}
	
	#navigation a {
		width: auto;
		border-bottom: 1px solid rgba(0, 0, 0, 0.2);
		padding: 1em;
	}
}

Potete osservare il risultato finale nel video che segue.