Menu déroulant 2

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

31 discussions

  • 1
    christianD.

    Bonjour,

    Plugin installé sans souci, ça fonctionne très bien. Juste une chose cependant.

    Comment ordonner l’ordre d’affichage des rubriques ?

    Merci d’avance.

    • christianD.

      Je me réponds à moi-même.

      Il suffit d’ordonner les rubriques en les numérotant 1. et ainsi de suite, avec un espace après le point et c’est tout bon.

    Répondre à ce message

  • 3
    Nicolas BOILEAU

    Bonjour,

    Est-il possible d’ajouter un onglet « Accueil » (qui renvoie à la racine du site) dans la barre de menu ?

    Merci

    Nicolas

    • Oui. Cela se passe dans votre SPIP, indépendamment de ce plugin qui ne fait qu’apporter un habillage stylistique.

    • Nicolas BOILEAU

      Merci pour votre réponse. Dans quel fichier dois-je intervenir ? (je suis sur Spip 3)

      MErci

    • Ça dépend de votre site : via saisie dans l’espace privé de ce site ou dans vos squelettes, je ne sais pas… c’est indépendant de ce plugin.

    Répondre à ce message

  • Aurélien

    Bonjour,

    Je me casse les dents sur quelque chose à priori simple, mais je n’arrive pas à trouver. Comment régler la largeur des colonnes du menu ? En effet, le nom de mes rubriques apparait sur deux lignes.

    Merci d’avance,

    Aurélien

    Répondre à ce message

  • Nicolas P

    Bonjour, je souhaiterais utiliser ce plugin couplé avec le plugin « menus » avec lequel j’ai fait un menu perso. Mais je n’arrive pas à attribuer le menu perso au plugin Menu droulant 2. Il m’affiche toujours les rubriques à la racine du site.
    Merci d’avance.

    Répondre à ce message

  • 1
    Vincent

    Bonjour,
    Je suis débutant sous spip.
    J’ai installé un squelette avec le plugin Menu.
    Je souhaite avoir un menu déroulant et c’est pourquoi j’ai installé ce plugin (Menu déroulant 2).
    Où dois-je placer la noisette  ?
    Suis-je obligé de faire quelque chose avec les css ?
    Merci

    Répondre à ce message

  • Salut,

    J’ai une copine qui utilise ce menu et qui m’a demandé de regarder. Or j’ai constaté que ça ne marche pas au clavier, j’ai ajouté les lignes suivantes à la fin de menuder.js :

    $(document).ready(function(){
    	$('.menuder a').focus(
    		function(){$(this).closest('div.menu>ul>li').addClass('hover');}
    	);
    	$('.menuder a').blur(
    		function(){$(this).closest('div.menu>ul>li').removeClass('hover');}
    	);
    });

    Cadeau si ça peut servir à d’autres.

    Répondre à ce message

  • 1

    Bonjour
    j’essaie de mettre en place le menu mais il ne se déroule pas. J’ai uniquement les rubriques de la racine. Avez vous un site sur lequel il fonctionne pour comparer ? merci Nicolas

    • J’ai fait une erreur, je m’attendais à ce que les articles apparaissent dans le menu. Il y a t il un moyen de le faire ?

    Répondre à ce message

  • 2

    Bonjour,
    super contrib, elle fonctionne à merveille pour moi, sauf que je souhaiterais pouvoir y inclure des articles, c’est à dire des articles qui sont menu soit dans une sous rubrique soit dans une rubrique racine en désignant par un mots clés par exemple, mais pas tous les articles.

    je sais pas si j’ai été clair ?

    merci

    • j’utilise votre plugin sur un autre plugin « menus » qui permet de générer des menus comme je le souhaite, j’utilise le votre pour son animation. Cependant, je souhaite utiliser votre plugin pour un deuxième menu sur la même page mais en vertical, j’ai donc déclarer un un menuder2.js
      j’ai rajouter une ligne permettant de l’appeler dans menuder_option.php afin qu’ils s’ajoute dans le insert_head. J’ai beau avoir de grande connaissance en css je n’arrive pas a faire que ce menu soit vertical. une réponse est ce dans le JS mais je vois pas où ?
      merci

    • Pourquoi dédoubler le javascript !? Il ne fait qu’ajouter ou retirer une class, mais n’influe aucunement sur la présentation ! C’est votre feuille de style qu’il faut modifier, uniquement.

      1. Copiez-collez la feuille menuder.css dans votre répertoire squelettes afin de pouvoir l’adapter à vos besoins
      2. Distinguez vos deux menus par des sélecteurs différents, en gardant bien le sélecteur .menuder, par exemple :
        <div class="menu-horizontal menuder">
        et <div class="menu-vertical menuder">
      3. Et stylez distinctement dans votre feuille de style, par exemple :
        .menu-horizontal li { float: left; ... }
        .menu-vertical li { ... }
        ...

    Répondre à ce message

  • 1

    Bonjour,

    Des incohérences avec IE, google chrome et safari (le menu déroulant qui se dérobe bigre....) Aucun soucis avec firefox. Mais bon pour moi c’est prohibitif.
    Dommage.

    • C’est étonnant car j’avais abouti cette version en travaillant notamment sur FF3+ et IE6+... Des captures ? où plutôt une URL où l’on pourrait observer ça ?

    Répondre à ce message

  • 2
    Nicolas Kempf

    Ce plugin m’est fort utile, mais je me casse les dents sur quelque chose de simple (a priori) :
    comment remplacer un lien texte par une image (au hasard, un bouton Facebook ?). Je voudrais intervenir sur le menu horizontal de cette page : http://ecriture-livres.fr/

    Il faut peut-être se servir de

    Classes CSS de l’entrée (du conteneur) [Facultatif]

    ou de

    Classes CSS du lien [Facultatif]

    dans l’interface de création du plugin « menus », mais je ne sais pas à quoi servent ces deux classes, et je ne sais pas comment les modifier.
    La page du plugin n’en parle pas.

    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