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.