Responsive design : convertir la navigation en menu déroulant
Posté le Sunday 23 September 2012 | Catégories : Javascript, Mootools, CSS3
Sur un smartphone, l'espace disponible est souvent trop réduit pour afficher un menu de navigation complet. Il vaut donc mieux utiliser un menu déroulant. Avec Mootools, il est possible de créer ce menu déroulant automatiquement.
Voici un exemple de menu classique:
<div id="nav">
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/produits">Produits</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
Et le code Mootools pour le convertir automatiquement en menu déroulant:
window.addEvent('domready', function(){
var select = new Element('select#nav-select');
$("nav").adopt(select);
// Ajouter l'option par défaut "Aller à..."
select.adopt(new Element('option', {
"selected": "selected",
"value" : "",
"text" : "Aller..."
}));
// Ajouter les différentes options
$$('#nav a').each(function(element){
select.adopt(new Element('option', {
"value" : element.getProperty('href'),
"text" : element.getProperty('text')
}))
});
// Changer de page lorsqu'on sélectionne une des options
select.addEvent("change", function() {
window.location = $("nav-select").getSelected().getProperty("value");
});
})
Il ne reste plus qu'à utiliser les media queries CSS pour afficher ou cacher l'un ou l'autre menu...
#nav select {
display: none;
}
@media (max-width: 960px) {
#nav ul { display: none; }
#nav select { display: inline-block; }
}
