SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

290 Plugins, 198 contribs sur SPIP-Zone, 92 visiteurs en ce moment

Accueil > Navigation > Menus réactifs > Responsive Nav > Responsive Nav

Responsive Nav

9 avril 2016 – par jeanmarie – 18 commentaires

12 votes

Un menu responsive dans vos squelettes

Adaptation du plugin Responsive Nav pour SPIP.

Installation

Ce plugin s’installe comme tous les plugins. Voir http://www.spip.net/fr_article3396.html

Il fonctionne avec le squelette dist par défaut ainsi qu’avec ZPIP V1 + menu et ZPIP V2.

Personnalisation

Les principales variables du plugin sont configurables depuis l’espace privé :

Breakpoint
Accepte toute unité (px, em...) (par défaut 40em)
Taille de la fenêtre pour déclencher le menu.

Sélecteur
Accepte toute classe ou identifiant (par défaut : #nav)
Le sélecteur cible (celui qui contient le menu).
Note : le script n’accepte pas les syntaxes type « #nav .menu ».

Label
(par défaut : ☰ Menu)
Le texte du bouton déclenchant le menu.

Position du bouton
Position du bouton par rapport au menu.

Menu burger
Affiche le menu sous la forme d’un menu burger et masque le texte.
Note : pour une meilleure accessibilité, ne pas activer le menu burger.

Personnalisation avancée

Pour personnaliser les autres variables prévues par le plugin original, il suffit de créer un fichier mes_fonctions.php à la racine du dossier squelettes et d’y définir les valeurs des constantes PHP qui assurent la configuration du plugin.

_RESPONSIVENAV_ANIMATE
true ou false (par défaut : true)
Animation ou non du menu.

_RESPONSIVENAV_TRANSITION
Millisecondes (par défaut : 284)
Durée de l’animation en millisecondes.

_RESPONSIVENAV_CUSTOMTOGGLE
Identifiant du sélecteur du bouton personnalisé si ajouté dans le squelette.

_RESPONSIVENAV_CLOSEONNAVCLICK
true ou false (par défaut : false)
Referme le menu au clic sur une entrée.

_RESPONSIVENAV_OPENPOS
static, relative, fixed ou absolute (par défaut : relative)
Position du menu ouvert.

_RESPONSIVENAV_NAVCLASS
(par défaut : nav-collapse)
Classe du menu.
Note : à modifier également dans la css si changement.

_RESPONSIVENAV_NAVACTIVECLASS
(par défaut : js-nav-active)
Classe ajoutée à la balise html lorsque le menu est ouvert.

_RESPONSIVENAV_JSCLASS
(par défaut : js-responsivenav)
Classe ajoutée à la balise html par le script si javascript est activé.

Note : à la différence du fichier mes_options.php qui est rechargé à chaque hit, mes_fonctions.php n’est rechargé qu’au recalcule des squelettes. Attention donc à bien recalculer les pages lors de vos tests.

Exemple de fichier mes_fonctions.php

  1. <?php
  2.  
  3. if (!defined('_ECRIRE_INC_VERSION')) return;
  4.  
  5. define('_RESPONSIVENAV_ANIMATE', 'true');
  6. define('_RESPONSIVENAV_OPENPOS', 'static');
  7. define('_RESPONSIVENAV_JSCLASS', 'js-perso');

Télécharger

Dépendances

Le plugin nécessite Saisies 2.4+.
Note : le script original est indépendant de jQuery

Plus d’infos

http://responsive-nav.com
https://github.com/viljamis/responsive-nav.js

Licence du script original : © 2013 Viljami Salminen, http://viljamis.com

V 0.1.0 (29/03/2016) : embarque la version 1.0.39 du script original.

Dernière modification de cette page le 9 mai 2017

Retour en haut de la page

Vos commentaires

  • Le 20 mars 2017 à 13:17, par Lucie En réponse à : Responsive Nav

    Bravo pour ce plugin, qui dans mon cas fonctionne de paire avec le plugin Menuder !
    Je suis débutante en programmation avec SPIP, et suis vraiment ignorante en PHP...
    Je souhaite faire figurer l’icône du menu à droite de la navigation. J’ai beau changer la position du bouton dans les paramètres du plugin (gauche / droite), rien n’y fait ! Avez-vous une idée de la cause de ce non changement, ou bien savez-vous comment procéder ? En vous remerciant,
    Lucie

    • Le 20 mars 2017 à 16:56, par jeanmarie En réponse à : Responsive Nav

      Bonjour Lucy,

      n’utilisant pas le plugin menuder, il me faudrait un lien pour pouvoir tenter de t’aider.

      jean marie

    • Le 20 mars 2017 à 19:16, par Lucie En réponse à : Responsive Nav

      Je travaille encore en local, je ne peux donc pas envoyer de lien :-(
      Si vous avez une idée, je reste preneuse... Le cas échéant, je reviendrai vers vous une fois le site mis en ligne... Merci et bonne fin de journée.

    • Le 18 octobre à 16:56, par seblaur En réponse à : Responsive Nav

      Bonjour,

      Je souhaite réaliser un menu « rollover »multi-niveau mais aussi « responsive » compatible bootstrap (plugin Bootstrap3 SASS).
      Une des solutions serait de combiner le plugin Menuder et Responsiv nav. Apparemment Lucie aurait réussi à faire fonctionner les 2 (plus de précisions seraient bienvenues )....

      Chez moi Menuder fonctionne bien mais je n’arrive pas à faire fonctionner Responsiv nav.
      Si j’ai bien compris, pour tester son fonctionnement, il s’agit remplacer dans le fichier nav du « dist » le sélecteur id=« nav » par id=« dropdown-menu » (qui est le sélecteur cible noté par défaut dans le plugin). Est-ce bien cela ? Si c’est bien ça, ça ne fonctionne pas chez moi (Menuder est désactivé). Peut-être y a-t il un conflit avec Bootstrap3 SASS ?

      Y aurait-il une autre solution, par exemple, implanter « smartmenu jquery »dans spip ?
      J’ai essayé mais sans résultat.
      Merci pour votre aide.

    Répondre à ce message

  • Le 27 février à 18:26, par kris En réponse à : Responsive Nav

    Bonjour, et merci pour ce plugin !
    Je rencontre cependant un problème : lorsque je lui impose la position absolute (défini dans le fichier mes_fonctions.php, et dans ma css), il me cache le menu...
    Avec l’inspecteur, je m’aperçois qu’à la ligne 16 du fichier responsive-nav.css.html, la valeur est la suivante :

    .js-responsivenav .nav-collapse {
            clip: rect(0 0 0 0);

    Si je modifie comme ceci ça fonctionne :

    .js-responsivenav .nav-collapse {
            clip: auto;

    Le problème est que ces styles sont insérés APRES les miens, et que je ne peux donc pas les surcharger, sauf à les mettre en dur dans mon squelette...
    Une idée docteur ?
    Merci

    • Le 28 février à 12:10, par jeanmarie En réponse à : Responsive Nav

      Salut,

      tu aurais une URL ?

      jean marie

    • Le 1er mars à 19:28, par kris En réponse à : Responsive Nav

      Bonjour, et merci de ton attention.
      Je développe en local donc pas d’url publique :-/
      Tu n’as jamais rencontré ce problème ?
      Je précise que SPIP est à jour en 3.2 ainsi que les plugins...

    • Le 30 mars à 11:50, par jeanmarie En réponse à : Responsive Nav

      Salut,

      non, je n’ai jamais été confronté à ce souci et sans exemple en ligne, pas facile de voir ce qu’il se passe :(

      jean marie

    Répondre à ce message

  • Le 27 janvier 2017 à 18:43, par kris En réponse à : Responsive Nav

    Bonjour, et merci pour cette contribution :)

    J’ai un élément de mon menu qui a un sous-menu qui devrait apparaitre au hover sur le « li » ou sur le « li a » et je n’arrive pas à le faire fonctionner correctement (css ou js, ou les deux...).
    Est-ce lié au plugin ? C’est normal docteur ?

    • Le 28 janvier 2017 à 21:19, par kris En réponse à : Responsive Nav

      Oups ! Je me réponds, un « overflow : hidden » qui trainait...
      Désolé du bruit :)

    Répondre à ce message

  • Le 4 novembre 2016 à 15:35, par Antoine En réponse à : Responsive Nav

    Merci pour ce plugin. J’ai deux questions.

    Où est-ce qu’on indique les entrées du menu qu’affichera le bouton ? J’ai trois menus sur le site que je souhaite combiner, il faut donc que je puisse indiquer ce qui doit y figurer... sous forme de boucles ou de liste. Je n’ai trouvé aucun fichier à customiser dans les dossiers du plugin.

    J’ai renommé le sélecteur #responsive puisque j’utilise déjà #nav. Problème : rien ne s’affiche sur le site à l’endroit où j’ai placé #RESPONSIVE, l’icône n’apparaît pas.
    Comment doit-on intégrer le menu dans un squelette ?

    • Le 7 novembre 2016 à 15:55, par jeanmarie En réponse à : Responsive Nav

      Salut,

      le plugin ne gère pas le menu en tant que tel, il ne fait que gérer son affichage en fonction des tailles d’écran. C’est donc à toi de faire le nécessaire dans ton squelette.
      Par contre, il est prévu pour fonctionne avec un seul menu et non plusieurs.

      Pour ce qui est du sélecteur, c’est la classe ou l’identifiant de ton menu (généré par ton squelette) et non une balise spip pour insérer le menu.

      jean marie

    Répondre à ce message

  • Le 15 octobre 2016 à 07:49, par Renee Picard En réponse à : Responsive Nav

    Je n’arrive pas à faire afficher tous les items du menu (il y en a 5) sur ce site : www.coffretsforest.com

    • Le 17 octobre 2016 à 12:02, par jeanmarie En réponse à : Responsive Nav

      Salut !

      Là comme ça, pas facile à dire... il faudrait désactiver la compression css pour que les feuilles du styles soient lisibles.
      Aussi, le thème utilisé est déjà responsive et gère le menu (en tout cas, il le masque sur petit écran), il y peut être un conflit.

    Répondre à ce message

  • Le 13 avril 2016 à 18:33, par AlainF En réponse à : Responsive Nav

    Bonne idée,
    mais perturbe le menu existant avec Zoundation sous Spip 3.1.1
    je désinstalle donc !!!
    Dommage, Alain.

    • Le 21 avril 2016 à 10:11, par jeanmarie En réponse à : Responsive Nav

      Salut,

      pas testé avec Zoundation, mais tout est à base de CSS, donc ça devrait pouvoir se surcharger.

    • Le 21 avril 2016 à 15:13, par AlainF En réponse à : Responsive Nav

      C’est vrai qu’en surchargeant le css, ça devrait marcher, mais pourquoi pas ne rien toucher à la version écran normal ou grand et n’afficher le burger que sur les petits écrans...

    Répondre à ce message

  • Le 11 avril 2016 à 16:53, par ydikoi En réponse à : Responsive Nav

    génial, merci :)

    mis en place sur deux sites, c’est rapide et efficace. Bravo :)

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Jeux pour SPIP 3

    27 juillet 2012 – 53 commentaires

    Un portage pour SPIP 3 du plugin Jeux a été fait. Explications et nouveautés. Cet article concerne une mise à jour du plugin Jeux dont la description complète est disponible ici : Des jeux dans vos articles !. Le code du plugin Jeux est un code (...)

  • Plugin Vidéo(s)

    23 novembre 2010 – 704 commentaires

    Interface de gestion et modèle d’insertion des vidéos : Dailymotion Vimeo Youtube Modèle de la balise HTML5 video avec alternative flash html5media : Lecture HTML5/Flash pour tout navigateur des fichiers MP4/H264/Ogg/WebM/Mkv Support mobile, iPad, (...)

  • Vidéo Accessible

    6 avril 2011 – 168 commentaires

    Un plugin pour faciliter la diffusion de vidéos accessibles. Accessibilité des vidéos Accessibilité de la vidéo Afin d’être pleinement accessible, une vidéo (composée d’images et de sons) doit répondre à plusieurs critères. Le critère de base est (...)

  • Groupes de mots clés arborescents

    26 juillet 2012 – 37 commentaires

    Ce plugin permet de gérer une arborescence de groupes de mots clés. Les sous groupes de mots héritent des propriétés du groupe racine (sur quoi peut on le lier ? peut il y avoir un ou plusieurs mots). Les formulaires de liens qui permettent de lier (...)

  • Mailshot

    16 janvier 2013 – 336 commentaires

    Ce plugin prend en charge l’envoi en nombre d’info-lettres par email. Mailshot permet l’envoi en nombre d’emails au moyen d’un SMTP (ou d’un service externe) dédié à cet effet. Il permet de limiter la cadence d’envoi. Enfin, ce plugin implémente la (...)