SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 252 visiteurs en ce moment

Accueil > Navigation > Menus réactifs > Menu déroulant hiérarchique > Menu déroulant 2

Menu déroulant 2

17 juin 2011 – par tetue – 66 commentaires

20 votes

Menu déroulant dynamique full CSS, qui plonge en profondeur et descend dans tous les niveaux de la hiérarchie, sans limitation.

Ce menu déroulant, valide W3C, fonctionne dans tous les navigateurs :
-  en CSS dans les navigateurs modernes,
-  avec une rustine javascript pour Internet Explorer.

Note de version

Attention à la mise à jour ! Cette seconde version du plugin fait la même chose que la version précédente, mais rompt la compatibilité, en étendant la fonctionnalité afin de pouvoir l’utiliser sur plusieurs menus d’une même page.

Lors d’une mise à jour vers cette version, il vous faudra certainement modifier certains noms, notamment remplacer « #nav » par « .menuder ». D’une façon générale, feuille de style, classes, noisettes, etc. tout s’appelle désormais « menuder » dans ce plugin. Notez que la version précédente fonctionne correctement sous SPIP 2.

Utilisation

  1. Ce plugin s’installe comme n’importe quel plugin SPIP (pas de dépendance particulière).
  2. Prévisualisez en affichant la page de démo :
    ?page=demo/menuder
  3. Insérez la noisette
    <INCLURE{fond=inclure/menuder}>
    dans vos squelettes, à l’endroit où vous souhaitez afficher ce menu
  4. N’oubliez pas de recalculer pour vider le cache
  5. Ajustez les styles à votre goût en copiant le fichier menuder.css avant de le modifier (dans le répertoire /css de votre dossier « squelettes »).

Vous pouvez créer plusieurs menus déroulants dans la même page, en ajoutant simplement la classe « menuder » sur les listes (ul li ou ol li) qui doivent fonctionner en menu déroulant.

Pour annuler les styles du plugin, déposez un fichier menuder.css vide dans le répertoire /css de votre dossier « squelettes ».

Voir en ligne : http://plugins.spip.net/menuder

Dernière modification de cette page le 5 décembre 2015

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 25 février à 10:43, par mimi55 En réponse à : Menu déroulant 2

    Bonjour,

    J’utilisais ce plugin avec zpip sou spip 3.0 et cela fonctionnait sans problème. Je viens de passer à spipr (remplaçant de zpip) sous spip 3.1 et j’ai un soucis : les sous menu s’affichent directement sous forme de liste sous mes menus au lieu d’apparaitre uniquement lorsque je clique sur le menu (C.F. capture ci-joint). Que dois-je modifier pour que ça fonctionne correctement ?

    Merci

    PNG - 12.6 ko
    • Le 25 février à 10:48, par mimi55 En réponse à : Menu déroulant 2

      Ne tenez pas compte de ce message je l’ai posté par erreur sur cette page. il concernait un autre plugin.

    Répondre à ce message

  • Le 25 février à 10:45, par mimi55 En réponse à : Menu déroulant 2

    Bonjour,

    J’utilisais ce plugin avec zpip sou spip 3.0 et cela fonctionnait sans problème. Je viens de passer à spipr (remplaçant de zpip) sous spip 3.1 et j’ai un soucis : les sous menu s’affichent directement sous forme de liste sous mes menus au lieu d’apparaitre uniquement lorsque je clique sur le menu (C.F. capture ci-joint). Que dois-je modifier pour que ça fonctionne correctement ?

    Merci

    PNG - 12.6 ko

    Répondre à ce message

  • Le 9 février à 12:12, par Stéphane Santon En réponse à : Menu déroulant 2

    Bonjour,
    Moi aussi, tout part en vrac.

    -  Pourquoi ces largeurs fixes de bloc ? Ça fait de gros espaces blancs de largeurs variables entre les entrées ?
    -  C’est quoi ces redéfinitions de largeurs sur la même ligne :
    width: 10em; w\idth: 6em; ?
    C’est la seconde avec le “\” qui est prise en compte dans Firefox...
    -  Avec Bootstrap, menuder est appelé avant, donc j’ai mis un
    <utilise nom="bootstrap" compatibilite="[3.0.0;[" />
    dans le paquet de menuder.
    - Menuder a-t-il besoin de définir des couleurs de fond et de bordures ? Ne peut-il pas ajouter la fonctionnalité Menu Deroulant sans changer la charte graphique ?

    Merci

    Répondre à ce message

  • Le 23 novembre 2015 à 18:39, par Seb En réponse à : Menu déroulant 2

    Bonjour j’ai un souci récurrent, mon menu déroulant se met en vrac, il perd tout le css
    est-ce un problème de cache ? je dois vider le cache et/ou tenter une réparation pour remettre le tout (les diaporamas se retrouvent souvent images les unes en dessous des autres par le même phénomène). Comment résoudre se problème vraiment usant ?
    j’ai essayé de placer le menuder.css également à la racine du squelette mais rien ne change par moment le menu est en vrac
    exemple sur mon site www.judoenlignes.com
    merci de votre aide

    Répondre à ce message

  • Le 3 novembre 2015 à 13:36, par Eric En réponse à : Menu déroulant 2

    Bonjour, prévoyez-vous une mise-à-jour vers spip 3.1 ? Merci.

    • Le 6 novembre 2015 à 16:44, par AlainF En réponse à : Menu déroulant 2

      Bonjour,
      j’ai modifié dans paquet.xml du plugin :
      compatibilite="[3.0.0;3.1.*]"
      Et j’ai ajouté la class « menuder » dans « Menus » mais ce n’est pas l’effet attendu

      Partie 1 actuellement en ligne
      Partie 2 test passage à Bootstrap et Spip 3.1
      Partie 3 test passage à Bootstrap et Spip 3.1avec Menuder

      On est mal Patron ?

      Cordialement

      JPEG - 334.7 ko
    • Le 9 novembre 2015 à 09:27, par Eric En réponse à : Menu déroulant 2

      Bonjour, je n’utilise pas le menu bootstrap... Peut-être faut-il aussi veiller à ce que le plugin bootstrap soit compatible spip 3.1 ??...

    • Le 9 novembre 2015 à 09:58, par AlainF En réponse à : Menu déroulant 2

      Bootstrap n’est pas un menu mais une collection d’outils utiles à la création de sites et d’applications web adaptatifs (traduction du système de boucle des bottes de ski qui s’adaptent aux pieds)
      De plus en plus demandé.
      Voila pour l’info !

    • Le 9 novembre 2015 à 10:27, par Eric En réponse à : Menu déroulant 2

      C’est bien ce que je pensais... Je ne connais pas ;-)

    Répondre à ce message

  • Le 30 août 2015 à 18:45, par Lafontanelle En réponse à : Menu déroulant 2

    Bonsoir,

    Je souhaitais juste proposer une modification dans le fichier menuder_pipelines.php afin de passer la validation en html5. En effet dans cette version de html, la valeur « projection » de media est marquée comme dépréciée.

    Ainsi, sur mon site j’ai remplacé, à la ligne 13

    1. $flux .= '<link rel="stylesheet" href="'.direction_css(find_in_path('css/menuder.css')).'" type="text/css" media="projection, screen" />';

    par

    1. $flux .= '<link rel="stylesheet" href="'.direction_css(find_in_path('css/menuder.css')).'" type="text/css" media="all" />';

    Cordialement,

    Lafontanelle

    • Le 9 septembre 2015 à 03:43, par Lafontanelle En réponse à : Menu déroulant 2

      À bien y réfléchir, media="screen" tout court est peut-être mieux que « all », pour ne pas prendre en compte « print », « braille », « embossed »... Ça n’en a pas l’air, mais c’est une question ! ;-)

    Répondre à ce message

  • Le 17 mai 2015 à 17:35, par maat En réponse à : Menu déroulant 2

    Bonjour à tous,

    Je viens de publier une mise à jour 2.3.0 de Menuder pour Spip 3.0
    (La version 2.2.0 était marquée compatible mais elle ne l’était pas... j’ai corrigé la déclaration aussi sans faire de montée de version)

    Les sources mis à jour sont ici : http://zone.spip.org/trac/spip-zone/browser/_plugins_/menuder/tags/Menuder-2.3.0

    L’archive téléchargeable devrait apparaitre d’ici quelques heures dans le bloc « Téléchargement »

    J’ai déclaré cette 2.3.0 en test même si je n’ai rien changé à son fonctionnement... si vous rencontrez des soucis en l’utilisant vos retours sont les bienvenus ^^

    • Le 20 mai 2015 à 13:11, par tetue En réponse à : Menu déroulant 2

      Super ! Merci @maat !

    • Le 14 juillet 2015 à 17:33, par mike En réponse à : Menu déroulant 2

      Bonjour,
      Utilisant la branche 3 de spip et menuder 2.2.0, je n’avais pas de problème et tout marchait à merveille. Malheureusement, ayant dû refaire complétement le site, j’ai dû prendre menuder 2.3.0, mais là problème ! Après insertion de la noisette et construction du menu, je me retrouve avec un contenu identique au menu par défaut (les rubriques non incluses dans le menu (mentions) apparaissent.
      Le problème persiste après désinstallation/réinstallation du plugin.

      Merci d’avance pour votre concours.

      PNG - 49.6 ko
    • Le 17 juillet 2015 à 15:07, par Mike En réponse à : Menu déroulant 2

      Je me répond pour faire suite à la résolu du probleme que d’autres ont pu rencontrer. Menuder fonctionne parfaitement, le souci venant à priori de l’utilisation de chiffres dans les titres de rubrique. En effet, une rubrique numérotée, bien que non configurée dans l’edition de menu (plugin menu) est affichée. En supprimant le chiffre en début de Titre de rubrique, celle-ci disparait de la barre de navigation.

    Répondre à ce message

  • Le 5 juin 2015 à 09:22, par Sébastien KOVAL En réponse à : Menu déroulant 2

    Bonjour j’utilise ce menu très souvent, il est vraiment très bien
    pour une utilisation en « responsive » je tombe sur un problème
    j’inclus le menu dans une div pour le cacher et le faire apparaitre au survol avec la classe :hover
    visiblement cela ne fonctionne pas sur iPhone et tablette OS
    il y a -t-il une solution ?

    merci de votre aide

    Répondre à ce message

  • Le 26 octobre 2013 à 23:39, par jfd En réponse à : Menu déroulant 2

    Bonjour,
    D’abord merci pour cet excellent plugin, que j’utilise avec plaisir sur plusieurs sites.

    J’ai toutefois deux problèmes que je n’arrive pas à résoudre :
    -  En supposant que les secteurs soient en horizontal, j’aimerais qu’au survol on ait le premier niveau de sous-rubrique aligné dessous, et que le deuxième niveau de sous-rubrique soit ensuite aligné à droite, pour ne pas masquer les intitulés précédents.
    J’ai « biaisé » en décalant les blocs vers la droite, mais ce n’est pas très satisfaisant.
    -  Par ailleurs, si on demande l’affichage des articles, ils ne s’affichent que pour les trois premières rubriques (peut-être en raison des imbrications ul et li du fichier css ?)
    Voir ces deux problèmes sur mon site

    Ces deux problèmes ont été résolus sur le site suivant qui utilise aussi menuder et que j’ai trouvé ci-après dans ce forum.

    Merci par avance si quelqu’un peut m’aider.
    JF David

    PS : pour changer la couleur des éléments au survol, il faut changer le code hexa du background-color en ligne 27. Je le signale parce que j’ai galéré pour le trouver !

    • Le 31 octobre 2013 à 10:19, par JF-David En réponse à : Menu déroulant 2

      Bonjour à tous,

      Je me réponds à moi-même en ce qui concerne le 2e problème : dans le formulaire de configuration du menu, il suffit d’augmenter le nombre de niveau des sous-rubriques.

      Par contre, je suis toujours preneur de solution concernant le premier problème.

      Cordialement
      JF David

    • Le 7 novembre 2013 à 20:03, par JF-David En réponse à : Menu déroulant 2

      Je me réponds à nouveau à moi-même, j’ai trouvé une solution à mon premier problème, en modifiant le fichier css pour éviter que les blocs de sous-rubriques ne se superposent et deviennent illisibles.

      -  Pour décaler les blocs vers la droite, j’ai affecté un paramètre adapté aux différents niveaux de « li » et « ul ». J’ai remplacé

      .menuder li:hover ul,
      .menuder li li:hover ul,
      .menuder li li li:hover ul,
      .menuder li li li li:hover ul left : auto ;

      par

      /* position horizontale du 1er bloc de sous-rubrique*/
      .menuder li:hover ul
      margin-left:0em ;
      left : auto ;

      /* position horizontale du 2e bloc de sous-rubriques ou articles*/
      .menuder li li:hover ul
      margin-left:11.25em ;
      left : auto ;

      /* position horizontale du 3e bloc de sous-rubriques ou articles */
      .menuder li li li:hover ul
      margin-left:11.25em ;
      left : auto ;

      Et pour gérer la hauteur des blocs, j’ai remplacé

      .menuder li ul ul margin : -1.75em 0 0 14em ;

      par

      /* position verticale des blocs de sous-rubriques*/
      .menuder li ul ul margin : -1.95em 10em 0 14em ;

      Ces paramètres sont sans doute à adapter selon la mise en forme de chaque site, mais peut-être ces indications pourront servir à d’autres ?
      Cordialement, JF David

    • Le 24 février 2015 à 13:37, par Pierre En réponse à : Menu déroulant 2

      Bonjour à Tous,

      Je tourne en rond depuis quelques heures...

      J’ai parcouru l’ensemble des messages du forum de ce Menu déroulant 2, sans trouver la solution à mon problème à savoir afficher dans le menu dit déroulant les articles de mes rubriques de niveau 1.

      J’ai modifié les pages de mon squelette pour afficher mon menuder... RAS, le rubriques de niveau 1 s’affiche bien, mais rien de plus !

      Certains parle d’augmenter le nombre de niveaux de mon menu, mais je dois être fatigué, car je ne vois pas comment accéder à cette fameuse page de configuration.

      La manip à l’air tellement évidente, que ceux qui ont trouvé la solution ne prennent même pas la peine d’expliquer comment ils ont fait !

      Pour info, j’ai bien installé mon fichier CSS de menuder dans le répertoire css de mon squelette...

      Par avance merci pour votre aide...

      Bonne journée.

      Pierre

    • Le 24 février 2015 à 13:40, par Maïeul En réponse à : Menu déroulant 2

      bonjour,

      je ne comprend pas exactement de quoi vous partez, ni ce que vous avez fait. Comment est généré votre menu ? directement dans le squelette ?`avec le plugin du même nom ? quel squelette utilisez vous ?

    • Le 24 février 2015 à 13:55, par Pierre En réponse à : Menu déroulant 2

      Bonjour Maieul,

      Je vais essayé d’être le plus clair possible...

      Mon site se compose de 5 rubriques se trouvant à la racine et chacune des rubriques est composé en moyenne de 8 articles que j’aimerais voir dans mon menu déroulant.

      Pour ce faire,

      1- j’ai installé le plugin Menu déroulant 2 - installation classique sans souci.

      2- J’ai ensuite modifié mon squelette - celui qui est fourni par SPIP - afin de faire apparaitre mon menu soit disant déroulant. Pour être précis, j’ai modifier la ligne suivante sur l’ensemble des pages de mon squelette (sommaire, rubrique, article etc.)

      nav,env} >
      par
      menuder} >

      Mon nouveau menu s’affiche bien, je peux même modifier son apparence en modifiant menuder.css que j’ai copié dans le répertoire css de mon squelette, mais je n’arrive pas à faire apparaitre dans la partie déroulante du menuder les articles composant la rubrique.

      Alors que si je créé une sous rubrique, celle-ci apparait bien dans la partie déroulante...

      Par avance merci pour votre aide.

      Pierre

    • Le 24 février 2015 à 15:50, par Maïeul En réponse à : Menu déroulant 2

      hum, le code est à moitié coupé. utilise les balises <code> pour le marquer.

      Est-ce que tu as une url en ligne ?

    • Le 24 février 2015 à 15:54, par Pierre En réponse à : Menu déroulant 2

      Non, je travaille en local, ce qui ne change rien...

      <INCLURE{fond=inclure/nav,env} ></INCLURE>
      <INCLURE{fond=inclure/menuder} ></INCLURE>

    • Le 24 février 2015 à 16:01, par Maïeul En réponse à : Menu déroulant 2

      a si, cela change quelque chose : il est plus difficile de voir d’où vient le pb pour t’aider. Mais j’ai mieux compris ton pb en relisant le message.

      Il se trouve tout simplement que le menu-deroualnt n’est pas prévu pour afficher les sous articles. Quel est ton niveau de boucle SPIP ?

      Parce que je vois deux solutions :
      -  tu utilise le plugin menu et tu crée un menu avec la class menuder sur l’élèment de menu.
      -  tu recopie inclure/menuder.html depuis le plugin vers inclure/menuder.html dans ton squelette et tu ajoute une boucle articles pour choisir tes articles.

    • Le 24 février 2015 à 16:03, par JFD En réponse à : Menu déroulant 2

      Bonjour,

      Je prends ce fil en cours de route.
      Pour faire apparaître les articles dans le menu déroulant, il faut le spécifier dans le paramétrage du menu.
      Dans la partie privée, aller dans « Squelettes/Menu du site »
      Faire « Modifier ce menu » puis au survol, « Modifier cette entrée » (l’icône avec un crayon).
      Dans la nouvelle page qui s’affiche, aller à à la zone de saisie :
      « Inclure les articles dans le menu ? (mettre « oui » pour cela) [Facultatif] »

      Cordialement
      JF David

    • Le 24 février 2015 à 16:07, par Maïeul En réponse à : Menu déroulant 2

      en l’occurence non, car Pierre n’utilise pas le plugin menu...

    • Le 24 février 2015 à 16:59, par Pierre En réponse à : Menu déroulant 2

      re Bonjour à Tous et merci pour les conseils !

      JFD,
      je viens de tester l’une des solutions que tu m’as soufflé et cela fonctionne à merveille que je détaille ici.

      Il est donc possible d’afficher les articles d’une rubrique dans la partie de menu déroulant, mais pour se faire, il faut installer en parallèle de menu déroulant, le plugin Menu.

      Ce dernier permet en effet de construire un à un les éléments de notre menu... en appliquant ensuite le class menuder à ce nouveau menu, nous obtenons bien un menu déroulant avec - dans mon cas - des rubriques de niveau 1 et mes articles en niveau 2

      Rien est automatique avec cette méthode, il faut créer chacun des éléments du menu... et il est possible de personnaliser l’aspect en modifiant le fichier menuder.css...

      Ai-je été clair ?

      Merci encore

      Pierre

    • Le 24 février 2015 à 17:01, par Maïeul En réponse à : Menu déroulant 2

      oui. c’était la première solution que je te proposais. Rien n’est automatique, cela dépend. On peut au contraire dire que tout est automatique, puisque le rédacteur n’a pas besoin de faire des squelettes pour changer le menu ;-)

    Répondre à ce message

  • Le 20 septembre 2012 à 14:15, par Rodolphe En réponse à : Menu déroulant 2

    Bonjour,

    Je souhaite intégrer un menu déroulant, mais je n’y arrive pas. J’ai un squelette "Zpip" et le plugin "Menus".

    J’ai bien téléchargé et active le plugin « menu déroulant 2 », j’ai mis la classe css « menuder » dans la case paramètres de l’administration de "Menus", mais malgré cela rien ne se passe !

    Ai-je oublie quelque chose ?

    Merci

    • Le 13 mai 2013 à 23:52, par DD En réponse à : Menu déroulant 2

      Bonjour,

      As-tu réussi ? car j’ai le même problème

      merci
      dd

    • Le 4 août 2013 à 18:41, par toto En réponse à : Menu déroulant 2

      Quand on est dans « Identification du menu » Il faut mettre « menuder » dans la case « Classes CSS »

    • Le 20 avril 2014 à 09:55, par ElJuez En réponse à : Menu déroulant 2

      Bonjour,

      Suis en train d’essayer ce plugin (je fais le tour, aucun ne fonctionne pour moi) avec aussi zpip et le plugin menu.

      J’ai installé le plugin et ai mis « menuder » en classe de mon menu, maintenant quand je passe sur mon menu ici

      http://demo-avenir.e-delmotte.com/?var_mode=recalcul

      On voit bien au survol qu’il ouvre quelque chose, mais rien n’est visible ...

      Autre petit soucis, une barre verticale est apparue au milieu du texte.
      J’ai pensé que cela viendrait du style du menu, alors j’ai mis un fichier menuder.css vide dans le dossier squelettes et j’ai recalculé, mais rien n’y fait, cette barre reste là.

      Une idée ? Est ce que tu as réussi à gérer de ton côté ?

    • Le 22 avril 2014 à 21:14, par rodolphe En réponse à : Menu déroulant 2

      Voila comment j’ai configuré mon menu (cf fichier image)

      J’ai créé mon menu (arborescence du site) dans l’espace admin SPIP puis j’ai installé le plugin « Menus ». Dans la config de « menu du site » dans la partie « Construction du menu » j’ai ajouté l’entrée « Racine du site ».

      Et tout a fonctionné.

      JPEG - 78 ko
    • Le 1er février 2015 à 17:34, par Théo En réponse à : Menu déroulant 2

      Bonjour Rodolphe,

      Mais comment as-tu obtenu cette fenêtre « Barre de navigation » ?

      Je galère à vouloir mettre ce « menuder-2 » dans Ahuntsic sous SPIP 3.0 mais je n’ai rien…

      Merci d’avance

    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

  • Le plugin FreeRadio 1.0

    25 mai 2011 – 29 commentaires

    Le plugin SPIP FreeRadio est un lecteur de flux audio gratuit à intégrer dans le corps des articles. Il permet de se mettre « à l’écoute » de WebRadios ou de sons à partir de leurs URL. FreeRadio est écrit en actionscript. Facile à intégrer, il est (...)

  • Mailsubscribers

    16 janvier 2013 – 274 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes (...)

  • noiZetier v2

    9 novembre 2012 – 36 commentaires

    Le noiZetier offre une interface d’administration permettant d’insérer au choix des éléments modulaires de squelettes (noisettes) et de les ajouter ainsi à ses squelettes. Compatibilité La version 2 du noizetier fonctionne sous SPIP 3. Elle est (...)

  • cirr : plugin « rédacteur restreint »

    29 octobre 2010 – 60 commentaires

    Ce plugin « cirr : rédacteur restreint » permet d’affecter des rubriques aux rédacteurs et modifie les droits afin qu’un rédacteur restreint (ou un administrateur restreint) voit dans l’espace privé uniquement les rubriques qui lui sont affectées (et leur (...)

  • Un retour d’expérience d’utilisation de Formidable

    26 octobre – commentaires

    Il s’agissait de créer un formulaire d’inscription à un évènement modérer les inscriptions dans le privé publier les inscriptions dans le public Nous avons discuté de cette présentation lors de l’apéro SPIP du 15 février 2016 à la Cantine (...)

Ça spipe par là