Responsive Nav

Publié le : 9 avril 2016 – Dernière modification le 9 octobre 2023 – par jeanmarie – 35 commentaires

1
2
3
4
5
13 votes

Un menu responsive dans vos squelettes

ATTENTION : ce plugin n’est plus maintenu, aucun support ne sera fourni par le développeur.
Voir la discussion à ce propos

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 

<?php

if (!defined('_ECRIRE_INC_VERSION')) return;

define('_RESPONSIVENAV_ANIMATE', 'true');
define('_RESPONSIVENAV_OPENPOS', 'static');
define('_RESPONSIVENAV_JSCLASS', 'js-perso');

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.

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

5 discussions

  • 2
    Raphael

    Bonjour bonjour,

    Le plugin Responsive Nav est indiqué compatible jusqu’à la version 4.0 de SPIP : Quelqu’un l’aurait-il déjà testé avec la version 4.1 ?

    Merci d’avance !

    Répondre à ce message

  • 2
    André

    Bonjour
    Merci pour le menu, mais comment doit-on l’appeler dans un squelette ?
    Merci pour votre aide

    • DD

      Bonsoir,
      Dans la config de ce plugin il faut compléter le champ :
      « Sélecteur
      Indiquer le sélecteur cible. »
      avec la classe css qui englobe ton menu.

      Donc tu dois déjà avoir un menu et ensuite le menu « responsive nav » lui permet d’être responsive (au cas ou ton squelette ne le fait pas par défaut).
      dd

    • André

      Bonjour
      Merci pour tes explications
      Bonne journée

    Répondre à ce message

  • 1
    kris

    Bonjour Jean-Marie,
    Je rencontre sur ce site un problème d’affichage du menu sur petits écrans :
    https://chambredhote-vivavilla.fr
    La hauteur du menu semble être contrainte (?). En effet, si on clique pour accéder aux items du menu, seuls les deux premiers éléments sont accessibles... Mais si on tripote un peu (sur Firefox), comme glisser un des deux premiers éléments, à ce moment le menu prend bien sa place, et lorsqu’on replie le menu et le réouvre, là ça marche !
    Je suppose un conflit mais lequel ?
    Merci de ton aide...

    • kris

      Dans l’urgence j’ai dû réduire la taille de typo de manière à ce que tous les items soient visibles.
      En parcourant d’autres forums, j’ai comme l’impression que ça pourrait venir du mode « transition » du menu qui est fixé avec un max-height peut-être un peu trop court... Mais ce n’est qu’une supposition...
      D’autres idées ?

    Répondre à ce message

  • 3
    kris

    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 ?

    • kris

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

    • BD

      Bonjour,

      Merci pour ce plug-in, il est très pratique mais, en effet, le « overflow : hidden » passé dans la balise html par le js semble poser pas mal de problèmes :
      1. le menu déroulants constituent quasiment la norme
      2. tlm ne maîtrise pas cette propriété (j’ai mis du temps à trouver !)
      3. il est passé dans la balise ce qui implique non pas de modifier le css mais les classes js (ce que je n’ai pas encore fait, je me demande d’ailleurs si je vais pas utiliser un autre plugin ou tout faire en css, ne connaissant rien au js).

      J’en viens donc au point suivant : qu’est-ce qui justifie le passage de cette propriété dans la balise ? J’ai l’impression que cela fait perdre au plugin son efficacité pratique (étant donné l’usage des webdev l’utilisant) sans bien comprendre ce que cela apport (sinon pas de scoll dans le menu — ce qui ne devrait pas arriver si le menu est correctement fait non ?)

      Cdlt, BD.

    • BD

      Je viens de comprendre que la classe js peut être modifié par le css en appelant la-dite classe. Ce n’est donc pas si compliqué à fixer. Reste mon interrogation concernant ce choix par défaut. Cdlt, BD.

    Répondre à ce message

  • 5
    Carber

    Bonjour
    Je me permet de vous écrire pour demandé de l’aide sur un plugins que vous avez participer c’est responsive nav
    J’ai installer votre plugin sur mon site tout marche bien quand je suis sur les petits écran mais quand je suis sur mon grand écran il me change mon menu d’origine qui horizontal
    Est ce que c’est possible que je puisse affiche mon menu que j’ai fait sur les grands écrans
    Si vous pouvez me conseiller je vous remercie
    Cordialement

    • jeanmarie

      Bonjour,

      avez-vous une adresse pour qu’on puisse voir le problème ?

    • carber

      Bonjour voila l’adresse du site
      http://centre-lecture.org/_questions2/
      je souhaite afficher mon menu normal a l’ouverture du site et avoir le menu burger en haut a droite a la résolution du mobile je n’arrive pas a trouvé comment le faire ?

      merci

    • DD

      Bonjour,
      J’ai aussi opté pour 1 menu horizontal visible sur grand écran et replié pour petits écrans mais je n’ai pas utilisé responsive nav.
      Par défaut sur le squelette phantom le menu est réduit tout le temps. J’ai donc ajouté 2 classes css « mini » et « maxi » pour différencier le comportement :

      <nav class="menu-head">
    <ul class="maxi">
        <BOUCLE_rubriques(RUBRIQUES) {par num titre, titre}{racine}>
            <li>
                <a href="#URL_RUBRIQUE" [ class=" (#EXPOSE{on active})" ]>#TITRE</a>
            </li>
            </BOUCLE_rubriques>
    </ul>
    <ul class="mini">
        <li><small>Menu</small>
            <a href="#menu"></a>
        </li>
    </ul>
</nav>

      et donc dans la css :

      @media screen and (min-width: 736px) {
    #header nav ul.mini {
        display: none;
    }
}

@media screen and (max-width: 736px) {
    #header nav ul.maxi {
        display: none;
    }
}

      Je ne sais pas si c’est la meilleure manière de le faire mais cela fonctionne.

    • Carber

      Merci pour ta réponse possible de voir ton site ?
      1- mon menu j, ai installé avec plugin menu je ne sais si ça va mâche en même temp que menu du site lui même
      Cordialement

    • jeanmarie

      Alors, il semble y avoir plusieurs problèmes :

      -  vous utilisez le thème qui a sa propre gestion du menu https://contrib.spip.net/PHANTOM-HTML5UP

      -  dans ce menu, vous avez un <div class="farouk"> qui empêche le bon fonctionnement du menu

      Je pense qu’il ne faut pas utiliser Responsive Nav et garder le menu par défaut du thème Phantom et à voir, ensuite, comment rajouter des entrées si besoin.

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom