IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Responsive Nav : votre menu responsive


Sujet :

JavaScript

  1. #1
    Expert éminent sénior

    Avatar de FirePrawn
    Homme Profil pro
    Consultant technique
    Inscrit en
    mars 2011
    Messages
    3 180
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Consultant technique

    Informations forums :
    Inscription : mars 2011
    Messages : 3 180
    Points : 20 065
    Points
    20 065
    Par défaut Responsive Nav : votre menu responsive
    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 ?
    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

  2. #2
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    novembre 2012
    Messages
    3 344
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : novembre 2012
    Messages : 3 344
    Points : 9 863
    Points
    9 863
    Par défaut
    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.
    One Web to rule them all

Discussions similaires

  1. Mise en place d'un menu responsive
    Par masson_r dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 15/07/2015, 00h00
  2. Bootstrap 3.1.1 : menu responsive
    Par Shandler dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 04/05/2014, 17h22
  3. [SP 2007 ] faire menu responsive
    Par truser dans le forum SharePoint
    Réponses: 2
    Dernier message: 23/04/2014, 19h12
  4. Responsive Nav
    Par forum dans le forum Téléchargez
    Réponses: 0
    Dernier message: 24/09/2013, 14h29

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo