Menu déroulant 2

Publié le : 17 juin 2011 – Dernière modification le 23 mai 2022 – par tetue – 72 commentaires

1
2
3
4
5
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 ».

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

31 discussions

  • 3
    maat

    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 ^^

    • tetue

      Super ! Merci @maat !

    • mike

      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.

    • Mike

      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

  • Sébastien KOVAL

    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

  • 12
    jfd

    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 !

    • JF-David

      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

    • JF-David

      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

    • Pierre

      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

    • Maïeul

      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 ?

    • Pierre

      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.)


      par

      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

    • Maïeul

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

      Est-ce que tu as une url en ligne ?

    • Pierre

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

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

    • Maïeul

      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.

    • JFD

      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

    • Maïeul

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

    • Pierre

      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

    • Maïeul

      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

  • 5
    Rodolphe

    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

    • DD

      Bonjour,

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

      merci
      dd

    • toto

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

    • ElJuez

      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é ?

    • rodolphe

      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é.

    • Théo

      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

  • 1
    piercol

    Bonjour,
    Je suis en SPIP 3.0.16
    J’ai installé le plugin selon la procédure commune. Les messages confirmant l’installation indiquent qu’elle s’est correctement déroulée.
    J’ai installé la noisette sur un fichier test qui est un doublon de la page « sommaire »
    Quand j’affiche cette page test, j’ai une barre de menu qui affiche seulement les rubriques de la racine.
    Il ne se passe rien quand je survole ces pavés rubrique. Ils contiennent bien un lien vers les rubriques racine.
    En lisant les autres commentaires, je pense comprendre qu’il devrait y avoir dans l’interface privée une page de paramétrage des menus.
    J’ai beau parcourir toutes les pages d’administration, je ne vois nulle part un accès à une fonction « barre de navigation » ou quelque chose qui y ressemble.
    Pouvez-vous me dire ce que vous en pensez ?
    Cordialement.

    • piercol

      En fait, en parcourant les scripts de ce plugin, je n’y trouve aucune boucle ARTICLE
      Ce n’est donc pas surprenant que ce menu n’affiche pas la liste des articles dépendant d’une rubrique.
      J’ai été un peu abusé par la définition donnée en introduction de cette page : « Menu déroulant dynamique full CSS, qui plonge en profondeur et descend dans tous les niveaux de la hiérarchie, sans limitation. »
      Avez-vous une suggestion pour modifier le script pour avoir aussi les titres des articles ?

    Répondre à ce message

  • Romulus

    Bonjour,

    Je suis entrain de tester ce plugin et je cherche à faire marcher la balise #EXPOSE avec sans succès.

    Quelqu’un a t-il réussi à exposer le lien de la rubrique courante ?

    Répondre à ce message

  • 1
    Christophe Noisette

    Bonjour
    j’utilise ce super plugin depuis quelques temps. Merci, tout d’abord à son créateur.
    J’ai ajouté des rubriques à mon menu, mais je ne comprends pas pourquoi les rubriques s’affichent sur deux lignes, malgré une réduction drastique de la taille de la police, justement pour que les rubriques s’affichent sur une seule ligne. Il s’agit du menu sur la page www.infogm.org.
    J’ai regardé dans le CSS, essayer des choses, en vain. Alors si une personne a déjà eu ce problème et qu’elle l’a solutionné, merci de me dire comment.

    • AMBG

      Pour réduire la largeur globale du menu, il n’est pas nécessaire de réduire la taille de la police.
      Il faut supprimer les width de ces deux classes

      .menuder a { display: block; width: 10em; w\idth: 6em; 
padding: .25em 2em; text-decoration: none; }

.menuder li { float: left; width: 10em; padding: 0; }

    Répondre à ce message

  • pycos

    Bonjour,

    Une erreur récurrente constatée (donc pas systématique) est le chargement à plat du menu au chargement de page (toute l’arborescence déroulée). Ce qui n’apparait plus après rechargement du cache de la page.

    Après analyse du source de la page (merci BB) il s’avère que parfois la feuille de style du plugin (menuder.css) ne se charge pas, d’où bug.

    Solutionné de mon coté (à titre personnel et provisoire) par la copie des styles de menuder.css dans ma feuille de style principale.

    A priori il y aurait qql chose à remanier du coté de function menuder_insert_head_css dans menuder_fonctions.php du plugin.

    Cordialement,

    Répondre à ce message

  • Patrick

    Bonjour,
    Installé sur un 2.1 ici http://imagesetpeche.free.fr/
    et sur un 3.08 en local, j’ai fait fonctionner ce menu sans soucis avec le squelette Indexhibit.
    Comment faire pour qu’au survol, les sous-rubriques ne cachent pas les rubriques suivantes, mais les repoussent vers le bas (comme dans les blocs du couteaux suisse par exemple) ?
    Merci pour ce plugin.

    Répondre à ce message

  • Buggs

    Oups !
    Très bon plugin, mais dans mon cas, le script et le CSS se retrouvent 2 fois !
    Le problème, est que le 2iè CSS se situe en dernier et annule les corrections faites par perso.css.
    Me suis-je trompé ou s’agit-il d’une anomalie ?
    Merci

    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