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

updated on 5 April 2020

Discussion

29 discussions

  • Bonjour,
    lors d’une validation W3C CSS, j’ai obtenu :
    Erreur inconnue org.w3c.css.parser.analyzer.ParseException: L’utilisation du media ““projection”” est déconseillée
    Ceci provenant de menuder_pipelines.php.

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

    C’est un mode pour Opera 12+, c’est bien cela ?

    On peut l’enlever sans souci donc ?
    Et merci pour ce plugin !!

    Reply to this message

  • Bonjour,

    J’utilise “Menu-deroulant” avec spip 3.1 et les squelettes Japibas pour un site multilingue.

    Chaque langue est représenté par une rubrique principale, exemple (Français) et les sou rubriques de la même langue. Le problème c’est quand je suis sur la page du français par exemple et je clique sur l’icône “English” qui représente la rubrique anglais et ses sou-rubrique. Une partie de la page (aside , le formulaire de contact reste en français) j’ai fais des essais avec le critère lang mais ça ne change rien. Voilà si vous pouvez aider svp. Merci.

    Reply to this message

  • 1

    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

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

    Reply to this message

  • 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

    Reply to this message

  • Stéphane Santon

    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

    Reply to this message

  • 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

    Reply to this message

  • 4

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

    • 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

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

    • 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 !

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

    Reply to this message

  • 1

    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

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

    par

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

    Cordialement,

    Lafontanelle

    • À 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 ! ;-)

    Reply to this message

  • 3

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

    • Super ! Merci @maat !

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

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

    Reply to this 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

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom