Responsive Nav : votre menu responsive compatible mobiles et tablettes

Grâce aux transitions CSS3

Le 2013-09-24 09:55:19, par FirePrawn, Expert éminent sénior

Le responsive design est devenu bien plus qu'une mode, c'est une véritable bonne habitude à prendre lorsque l'on veut un site propre.
Avec le marché des mobiles et des tablettes qui ne cessent de croître, rendre son site lisible et adaptable à n'importe quelle résolution est très important.

Responsive Nav est un plugin JavaScript ultra léger (1.7kb minifié) qui va vous permettre de manière très simple de créer un menu responsive.
En effet ce plugin utilise les transitions CSS3 pour adapter la taille du menu à la résolution.
Le plugin permet également l'utilisation d'événements liés au tactile ce qui rend le menu utilisable sur smartphone et tablette.
Il est totalement indépendant et fonctionne sur tous les navigateurs (y compris Internet Explorer 6 oui monsieur !) ainsi que sur tous types de smartphones ou tablettes.

Pour l'utiliser il vous suffit d'ajouter un "markup" sur votre menu :

Code html :

1
2
3
4
5
6
7
8
<nav class="nav-collapse"> 
  <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Projects</a></li> 
    <li><a href="#">Contact</a></li> 
  </ul> 
</nav>

Il faut bien sûr instancier le plugin :

Code html :

1
2
3
4
<!-- Put this right before the </body> closing tag --> 
<script> 
  var nav = responsiveNav(".nav-collapse"); 
</script>

Vous disposez ensuite de toute une série d'options personnalisables ainsi que de plusieurs méthodes (comme pour redimensionner votre menu par exemple).

Pour plus d'informations je vous invite à consulter le site officiel sur lequel vous trouverez des exemples ainsi que de la documentation.

Télécharger Responsive Nav.

Source : thechangelog.com

Et vous ?

Faites-vous du responsive design ?
Avez-vous déjà créé des sites fonctionnant également sur mobile et/ou tablette ?