Uno degli elementi più importanti di un layout costruito per il Web è sicuramente il menu di navigazione. Questi elementi sono fondamentali all'interno di un sito, perché permettono all'utente di interagire con il sito stesso, con le sue sezioni e sottosezioni. All'interno di un layout moderno abbiamo a disposizione una moltitudine di "barre di navigazione" tra cui scegliere, ma la loro realizzazione non è sempre così immediata. Grazie a w3.css, creare menu di navigazione cross-browser e fully-responsive è davvero molto semplice e compatto, nel puro stile del suddetto framework: in questa lezione vedremo come.
Tipi di menu
Possiamo dividere i menu di un layout web (che nel contesto di w3.css vengono definiti "barre", termine che useremo come sinonimo) in due macrocategorie: menu orizzontali e menu verticali. Con w3.css possiamo realizzarli facilmente entrambi.
Un menu orizzontale viene prodotto grazie alla classe w3-bar, che è un elemento contenitore di ulteriori elementi aventi classe w3-bar-item che identificano a loro volta le singole voci del suddetto menu. Ad esempio, per creare un menu orizzontale contenente tre voci, indicanti ognuna una sezione differente del sito, scriveremo:
<div class="w3-bar w3-blue">
<div class="w3-bar-item">Home</div>
<div class="w3-bar-item">Products</div>
<div class="w3-bar-item">Get in touch</div>
</div>Lo scopo della classe w3-bar-item è sostanzialmente quello di fornire dimensioni e qualità coerenti delle singole voci del menu all'interno del menu stesso, che risulterà scalabile e correttamente dimensionato. La classe w3-bar-item fa fluttuare gli elementi sulla sinistra, dunque le voci compariranno nell'ordine cronologico con cui vengono inserite nel codice HTML.
Se, invece, vogliamo creare un menu verticale, utilizzeremo la classe contenitore w3-bar-block:
<div class="w3-bar-block w3-border w3-light-grey">
<div class="w3-bar-item">Home</div>
<div class="w3-bar-item">Products</div>
<div class="w3-bar-item">Get in touch</div>
</div>Anche in questo caso le voci del menu compariranno nell'ordine in cui vengono incluse nell'HTML. Come possiamo notare, gli elementi w3-bar-item possono essere inclusi sia come figli di w3-bar, sia come figli di w3-bar-block, così come un elemento li può essere figlio di un elemento ul o di un elemento ol e comportarsi diversamente a seconda del contesto in cui è posizionato.
Colori del menu
Tramite l'integrazione delle classi dedicate ai colori, possiamo colorare i nostri menu utilizzando tutte le classi offerte dal framework:
<div class="w3-bar w3-red">
<div class="w3-bar-item w3-blue">Home</div>
<div class="w3-bar-item w3-green">Products</div>
<div class="w3-bar-item w3-black">Get in touch</div>
</div>Possiamo dunque dare un colore di sfondo (o del testo) sia al corpo del menu sia ad ogni singola voce del menu.
Allo stesso modo, possiamo produrre degli effetti di hovering sulle voci, come abbiamo visto nella lezione dedicata ai colori, tramite le classi della famiglia w3-hover-colorName:
<div class="w3-bar w3-red">
<div class="w3-bar-item w3-hover-blue">Home</div>
<div class="w3-bar-item w3-hover-green">Products</div>
<div class="w3-bar-item w3-hover-black">Get in touch</div>
</div>Link
Fino a questo momento abbiamo prodotto delle voci del menu non cliccabili, che non sono dunque dei link che puntano ad altre pagine. Possiamo ovviare a questo problema sostituendo l'elemento div con l'elemento a, che indica la produzione di ancore cliccabili all'interno di una pagina web. I link prodotti avranno come grandezza di default la dimensione data dal testo del link stesso:
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-hover-green">Home</a>
<a href="#" class="w3-bar-item w3-hover-green">Products</a>
<a href="#" class="w3-bar-item w3-hover-green">Get in touch</a>
</div>
<div class="w3-bar-block w3-black">
<a href="#" class="w3-bar-item w3-hover-green">Home</a>
<a href="#" class="w3-bar-item w3-hover-green">Products</a>
<a href="#" class="w3-bar-item w3-hover-green">Get in touch</a>
</div>Abbiamo dunque applicato le stesse regole ai link, come elementi figli dei contenitori w3-bar e w3-bar-block, compresi i colori.
Infine, per dare un tocco di stile in più ai nostri link, possiamo applicare la classe w3-button, che fornisce le caratteristiche che abbiamo analizzato nella lezione dedicata ai pulsanti alle voci del nostro menu (ad esempio rimuovendo la sottolineatura dal testo dei link):
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-hover-green w3-button">Home</a>
<a href="#" class="w3-bar-item w3-hover-green w3-button">Products</a>
<a href="#" class="w3-bar-item w3-hover-green w3-button">Get in touch</a>
</div>
<div class="w3-bar-block w3-black">
<a href="#" class="w3-bar-item w3-hover-green w3-button">Home</a>
<a href="#" class="w3-bar-item w3-hover-green w3-button">Products</a>
<a href="#" class="w3-bar-item w3-hover-green w3-button">Get in touch</a>
</div>Responsiveness
Se vogliamo rendere i nostri menu responsive, ovvero sensibili alle dimensioni del dispositivo in uso, basterà applicare la classe w3-mobile alle singole voci del menu:
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-hover-green w3-button w3-mobile">Home</a>
<a href="#" class="w3-bar-item w3-hover-green w3-button w3-mobile">Products</a>
<a href="#" class="w3-bar-item w3-hover-green w3-button w3-mobile">Get in touch</a>
</div>
<div class="w3-bar-block w3-black">
<a href="#" class="w3-bar-item w3-hover-green w3-button w3-mobile">Home</a>
<a href="#" class="w3-bar-item w3-hover-green w3-button w3-mobile">Products</a>
<a href="#" class="w3-bar-item w3-hover-green w3-button w3-mobile">Get in touch</a>
</div>Per vedere l'effetto in azione, basterà ridimensionare la pagina: le voci del menu orizzontale formeranno una pila verticale tipica dei menu dei dispositivi mobile.
Posizionamento delle voci
Come abbiamo detto in precedenza, le voci all'interno del menu vengono fluttuate sulla sinistra, in modo che appaiano cronologicamente nell'ordine in cui sono prodotte. Ma è possibile cambiare questo comportamento e, ad esempio, muovere una voce sul lato destro del menu. Ciò può essere realizzato mediante la classe w3-right, che fluttua un elemento sulla destra del suo contenitore:
<div class="w3-bar w3-red">
<div class="w3-bar-item w3-blue">Home</div>
<div class="w3-bar-item w3-green">Products</div>
<div class="w3-bar-item w3-black w3-right">Get in touch</div>
</div>In questo caso, l'ultima voce del menu apparirà sul lato destro del menu stesso. È bene notare, però, che con la classe w3-right il flusso di apparizione si inverte: verranno visualizzati gli elementi in ordine cronologico inverso rispetto alla loro introduzione nel codice HTML (questo è il comportamento degli elementi fluttuanti sulla destra), dunque:
<div class="w3-bar w3-red">
<div class="w3-bar-item w3-blue">Home</div>
<div class="w3-bar-item w3-green">Products</div>
<div class="w3-bar-item w3-black w3-right">Get in touch</div>
<div class="w3-bar-item w3-black w3-right">Profile</div>
</div>In questo caso la voce Profile apparirà prima rispetto alla voce Get in touch, ma entrambe appariranno incolonnate sul lato destro del menu.