Discussion :

[FirePrawn]

Créez un menu responsive en toutes circonstances
Grâce aux transitions CSS3

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 - Visualiser dans une fenêtre à part

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 - Visualiser dans une fenêtre à part

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 ?

[SylvainPV]

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.