Responsive Desing: Come convertire un menù in una tendina

Una delle tecniche più utilizzate nel Responsive Design, consiste nella conversione di menù di navigazione in tendine selezionabili, così da ridurre drasticamente gli ingombri su smartphone con display ridotto ed ottimizzare l’usabilità del sito.
Per farlo è necessario utilizzare un semplice script jQuery che trasformi i nostri link in elementi della tendina, senza rimuoverli.

Dal menù a tendina alla select

Output HTML Prima:

<nav> 
	<ul> 
		<li><a href="#">Home</a></li> 
		<li><a href="#">Chi Siamo</a></li> 
		<li><a href="#">Servizi</a></li> 
		<li><a href="#">Contatti</a></li> 
	</ul>
</nav>

Output HTML dopo:

<select>
	<option selected="selected" value="">Vai a...</option>
	<option value="#">Home</option>
	<option value="#">Chi Siamo</option>
	<option value="#">Servizi</option>
	<option value="#">Contatti</option>
</select>

Come possiamo vedere sostanzialmente convertiamo i link in <option> di una select.

Il codice jQuery

Quello che andremo a fare con il nostro script non sarà sostituire i link bensì nasconderli quando le dimensioni dello schermo si riducono “trasformandoli” in una tendina. Vediamo nel dettaglio come fare:

$(function() {
// Appendiamo la tendina al <nav>
$("<select />").appendTo("nav");
	// Creiamo un'opzione di default "Vai a..."
	$("<option />", {
	 "selected": "selected",
	 "value"   : "",
	 "text"    : "Vai a..."
	}).appendTo("nav select");
	// Valorizziamo gli elementi della tendina prendendo l'attributo
	// href dei link ed inserendolo nel value delle <option>
	$("nav a").each(function() {
	var el = $(this);
	$("<option />", {
	   "value"   : el.attr("href"),
	   "text"    : el.text()
	}).appendTo("nav select");
	});
	// Per rendere funzionante la tendina, ogni volta che viene
	// cambiato il valore della select, effetuiamo un redirect
	// alla pagina interessata (value della option)
	$("nav select").change(function() {
	window.location = $(this).find("option:selected").val();
	});
});

Come possiamo vedere dal commento al codice creeremo un opzione di default che non linkerà ad alcuna pagina, andremo quindi a creare la tendina valorizzando l’attributo value delle <option> con l’href dei links. Infine facciamo in modo che al “change” della selezione, venga effettuato un reindirizzamento alla pagina interessata. Questa tecnica può essere applicata a qualsiasi menù, sia che si stia realizzando un layout statico, sia che si stia utilizzando un CMS come WordPress o Drupal, senza necessità di ricorrere a plugin esterni che appesantiscano inutilmente il nostro sito web.

Quello che resterà da far, per concludere, e sarà utilizzare le media queries CSS3 per nascondere i links e mostrare la tendina e viceversa utilizzando la classica sintassi del tipo:

@media screen and (max-width: 800px) {
    /* Se lo schermo è inferiore a 800px allora... */
}

Codice tratto da: http://css-tricks.com/examples/ConvertMenuToDropdown/