In un sito web responsive, uno degli elementi in esso contenuto e che riveste una grande importanza è il menu di navigazione. Così come tutta la struttura, anch'esso deve adattarsi alla dimensione del tipo di media dal quale viene richiamata la pagina.
Tra le tantissime risorse presenti in rete, alcune si dimostrano poco usabili, altre un po' di più. Premetto che, per qualsiasi tipologia di progetto web, tendenzialmente evito, per quanto è possibile, di installare framework quali JQuery o simili. L'articolo odierno tratta la realizzazione di un semplice menu con 4 voci orizzontali, con i soli fogli di stile, posto nella header della pagina.
Poniamo il caso di avere 4 voci per la navigazione:
- Home
- Blog
- About
- Contact
Il markup HTML
<nav class="navigation" role="navigation"> <ul> <li>HOME</li> <li>BLOG</li> <li>ABOUT</li> <li>CONTACT</li> </ul> </nav>
Il codice CSS per il menu
Per l'esempio in oggetto, ho previsto 2 Breakpoints: viewport con dimensione inferiore a 650px e da 651px in su. Dichiariamo prima il codice CSS "generale".
.navigation {
background:#f4421a;
position:relative;
}
.navigation ul {
list-style:none;
overflow:hidden;
}
.navigation li a {
text-decoration:none;
color:#fff;
text-align:center;
border:none;
}
.navigation li a:hover {text-decoration:underline;}
Adattiamo, adesso, il menu per device con dimensione del viewport fino a 650px. Il codice CSS prevede che le 4 voci abbiano ognuna dimensione del 50%, siano flottanti e sovrapposte, come riportato nell'immagine all'inizio dell'articolo.
@media screen and (max-width:650px){
.navigation li a {
width:50%;
float:left;
display:block;
height: 40px;
line-height:40px;
}
}
Assegnare il bordo inferiore a tutte le voci non avrebbe senso, se la pagina ha un background di colore bianco. Si vogliono solo "staccare" le prime due voci superiori da quelle inferiori. Assegnare delle classi alle singole voci, implicherebbe dover scrivere codice HTML aggiuntivo, inutile. Possiamo bypassare questo, utilizzando nth-child selector, come già trattato nell'articolo delle tabelle con righe di colore alterno.
Il selettore nth-child
Le voci del menu, come si può vedere nell'immagine di seguito riportata, sono state numerate per comprendere meglio il funzionamento del selettore.
Come si è detto, fino alla dimensione di 650px, si vuole applicare un bordo alla base delle voci 1) e 2). Il codice CSS è il seguente:
@media screen and (max-width:650px){
.navigation li:nth-child(1) a,
.navigation li:nth-child(2) a{
border-bottom:1px solid #fff;
}
Alle voci 1) e 3) vogliamo un bordo destro, per "staccarle" dalle successive. Allo stesso modo del codice riportato su, abbiamo:
@media screen and (max-width:650px){
.navigation li:nth-child(1) a,
.navigation li:nth-child(3) a{
border-right:1px solid #fff;}
}
Il codice CSS per il menu con viewport più grandi
Quando la dimensione del viewport sarà superiore a 650px, il menu avrà l'aspetto orizzontale. Il codice CSS sarà:
@media screen and (min-width:651px){
.navigation li a {
width:25%;
float:left;
display:block;
height: 60px;
line-height:60px;
}
}
Rispetto al menu precedente, nel menu orizzontale verranno assegnati i bordi solo alle prime tre voci e solo sul lato destro. Utilizzando sempre i selettori, è molto semplice la scrittura del codice:
@media screen and (min-width:651px){
.navigation li:nth-child(1) a,
.navigation li:nth-child(2) a,
.navigation li:nth-child(3) a{
border-right:1px solid #fff;
}
}
Per vedere il menu responsive in azione, è sufficiente restringere la finestra del browser. Si noterà la sovrapposizione e l'affiancamento delle voci del menu, quando la dimensione della finestra del device è inferiore o uguale a 650 pixel. Altrimenti avremo il menu disposto in orizzontale.