I menu a discesa (o "dropdown") sono largamente utilizzati all'interno delle applicazioni web.
Per realizzare effetti di dropdown abbiamo a disposizione una nutrita collezione di script e plug-in Javascript, ma grazie all'avvento delle specifiche CSS3 non è più necessario ricorrere ad ulteriori artifici per produrre questo effetto: con w3.css bastano poche righe di codice HTML e le opportune classi per realizzare dropdown anche molto accattivanti.
Le classi w3.css per il dropdown
All'interno di w3.css abbiamo a disposizione le classi della famiglia w3-dropdown-* per realizzare menu dropdown, come ad esempio:
w3-dropdown-hover: indica l'elemento che funge da parte visibile del menu di dropdown, al cui passaggio del mouse verrà aperto il corrispettivo menùw3-dropdown-content: la parte da mostrare al passaggio del mouse sul precedente elemento contenitore, che verrà nuovamente nascosta quando l'utente sposterà il cursore del mouse dallo stesso menù o dall'elemento contenitore
L'elemento con classe w3-dropdown-hover e quello con classe w3-dropdown-content stanno dunque in una relazione di genitore-figlio all'interno della struttrura HTML. Possiamo applicare questo tipo di costruzione ad una moltitudine di elementi HTML: il più utilizzato è sicuramente il box per eccellenza, il div, ma possiamo utilizzare anche elementi semantici o paragrafi p, che a loro volta contengono elementi w3-dropdown-content differenti:
<p class="w3-dropdown-hover">Passa il mouse sopra!
<span class="w3-dropdown-content w3-blue w3-padding">Ciao!</span>
</p>Questo codice semplice e conciso produce un dropdown: quando l'utente passerà il mouse sopra all'elemento p, comparirà l'elemento span contenuto al suo interno, a cui abbiamo applicato un colore di sfondo blu ed un padding in linea con la formattazione del layout.
Se invece applichiamo la stessa struttura a due elementi div innestati, avremo:
<div class="w3-dropdown-hover"> <div>Passa il mouse sopra!</div>
<div class="w3-dropdown-content w3-blue w3-padding">Ciao!</div>
</div>Dato che i due elementi stanno in una relazione di genitore-figlio, l'effetto sarà correttamente prodotto fintantoché l'utente avrà il mouse posizionato su tutto il contenuto del menu, per evitare quei fastidiosi bug di scomparsa tipici di alcune strutture che tentano di realizzare dropdown. Di default, il contenitore del dropdown possiede proprietà display impostata al valore inline-block, dunque il menu coprirà la dimensione dettata dal suo contenuto.
Possiamo ovviamente liberare la fantasia e realizzare una moltitudine di effetti, come ad esempio un dropdown basato su immagini:
<div class="w3-dropdown-hover">
<img src="img_nome1.jpg" alt="image 1" style="width:20%">
<div class="w3-dropdown-content" style="width:300px">
<img src="img_nome2.jpg" alt="image 2" style="width:100%">
</div>
</div>In questo caso abbiamo un menu che contiene un'immagine in miniatura che mostrerà una versione ingrandita quando l'utente passerà il mouse sopra la prima immagine.
O ancora, un contenuto HTML articolato che contiene immagini, testi, descrizioni, titoli e link, a cui possiamo anche applicare l'accattivante effetto w3-card che mostrerà un'ombreggiatura sul contenuto del dropdown:
<div class="w3-dropdown-hover">London
<div class="w3-dropdown-content w3-card-4" style="width:250px">
<img src="img_london.jpg" alt="London" style="width:100%">
<div class="w3-container">
<p>Londra</p>
<p>Descrizione di Londra</p>
</div>
</div>
</div>Barre dropdown
Ora che abbiamo visto come realizzare un semplice effetto dropdown singolo, possiamo complicare leggermente la faccenda andando ad inserirlo all'interno di un menù completo. Un menu può infatti presentare delle voci che rimandano direttamente ad altri contenuti oppure contenere un insieme di varie sottosezioni. Questo è il caso perfetto per applicare un dropdown:
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
</div>Come abbiamo visto nella precedente lezione, per creare un menu o barra di navigazione abbiamo a disposizione le classi w3-bar e w3-bar-item rispettivamente per il contenitore del menu e per le singole voci. Possiamo applicare quest'ultima classe a più elementi figli, come ad esempio degli elementi a che identificano direttamente dei collegamenti cliccabili. Se invece non vogliamo rendere la sezione-voce cliccabile, ma solo far apparire il menu al passaggio del mouse, creeremo un contenitore per il menu come abbiamo visto nel precedente esempio, con classe w3-dropdown-content, con all'interno un elemento button che funge da parte visibile, ed un contenitore w3-dropdown-content che contiene altrettanti elementi a che appariranno al passaggio del mouse sul pulsante e scompariranno quando il mouse verrà spostato dalla corrente posizione.
Questo codice HTML andrà a produrre un menu di navigazione orizzontale avente voci singole e voci dropdown.
Dropdown animati
Come abbiamo visto in molti esempi di questa guida, la potenza di un framework sta anche nel combinare insieme più funzionalità differenti per ottenere un prodotto ancor più performante. Come abbiamo visto nella lezione dedicata alle animazioni, grazie alla famiglia di classi w3-animate-* possiamo animare gli elementi HTML in differenti modalità.
Possiamo unire questa funzionalità al menu dropdown facendo in modo che quando l'utente passa il mouse sopra la parte visibile il contenuto verrà mostrato, ad esempio, con effetto zoom di entrata:
<div class="w3-dropdown-hover">
<button class="w3-button">Passa il mouse sopra qui!</button>
<div id="Demo" class="w3-dropdown-content w3-bar-block w3-animate-zoom">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>In questo caso la classe che abbiamo utilizzato, applicata all'elemento che deve essere reso visibile è w3-animate-zoom. Possiamo sbizzarrirci e provare tutte le classi di animazione offerte da w3.css oppure crearne delle nostre! Ad esempio, produciamo un effetto ad entrata in dissolvenza, con la classe w3-animate-opacity:
<div class="w3-dropdown-hover">
<button class="w3-button">Passa il mouse sopra qui!</button>
<div id="Demo" class="w3-dropdown-content w3-bar-block w3-animate-opacity">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>Dropdown cliccabili
Infine, w3.css mette a disposizione una terza classe per lavorare con i dropdown chiamata w3-dropdown-click, che permette di azionare il dropdown non al passaggio del mouse sopra di esso, ma al click.
Questo effetto è leggermente più complesso della sua controparte hover perchè necessita di un (semplice) codice Javascript, che si occuperà di rendere visibile o meno il contenuto del menù basandosi sulla sua visibilità corrente:
<div class="w3-dropdown-click">
<button onclick="dropdownFn()" class="w3-button w3-black">Cliccami!</button>
<div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
<script>
function dropdownFn() {
var x = document.getElementById("Demo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>La struttura del codice HTML è identica alla controparte hover, fatta eccezione per la presenza del gestore degli eventi onlick sul pulsante e per la classe w3-dropdown-click. La funzione dropodownFn recupera l'elemento con classe w3-dropdown-content e lo rende visibile o invisibile basandosi sulla sua corrente visibilità (toggling). Questa funzione è agganciata al gestore degli eventi.