Newsletter Developpez.com

Inscrivez-vous gratuitement au Club pour recevoir
la newsletter hebdomadaire des développeurs et IT pro

Responsive Nav : votre menu responsive compatible mobiles et tablettes
Grâce aux transitions CSS3

Le , 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 : Sélectionner tout
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 : Sélectionner tout
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 ?


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de SylvainPV SylvainPV - Rédacteur/Modérateur https://www.developpez.com
le 24/09/2013 à 10:33
Je l'ai essayé. Il est important de préciser que le plug-in n'est pas accompagné d'un "thème" de base, et que vous devrez styliser le menu en CSS vous même.

Dans le même genre :
http://www.benplum.com/formstone/naver/
http://jasonweaver.name/lab/flexiblenavigation/
http://responsivemobilemenu.com/demo/

Personnellement je préfère les menus qui recouvrent un bord de l'écran, comme ça :
http://www.berriart.com/sidr/

mais je n'ai trouvé aucun plug-in qui répondait parfaitement à mes attentes ; du coup je suis parti sur une solution plus simple qui est de remplacer le texte de chaque lien de mon menu par une icône. Simple et élégant, même si c'est moins explicite.
Offres d'emploi IT
Ingénieur intégration, validation, qualification du système de drone H/F
Safran - Ile de France - Éragny (95610)
Expert décisionnel business intelligence H/F
Safran - Ile de France - Évry (91090)
Architecte technique des systèmes d'information H/F
Safran - Ile de France - Évry (91090)

Voir plus d'offres Voir la carte des offres IT
Responsable bénévole de la rubrique JavaScript : Xavier Lecomte -