Menu déroulant horizontal

Menu déroulant dynamique en plugin, sans limitation de niveaux de hiérarchie

Vous voulez un joli menu déroulant ?

Un joli menu qui descende dans tous les niveaux de la hiérarchie, qui ne soit pas seulement limité à deux ou trois sous-rubriques, même si la règle des trois clics reste une bonne règle de conduite, et tout cela en dynamique, ie, qui s’adaptera à vos changements de rubriques, rajout etc.

Vous voulez de plus qu’il soit full CSS, compliant W3C, sans tableaux, sans trop de javascript, et surtout compatible avec tous les navigateurs du marché...

Mais vous n’avez que 5 minutes pour le mettre en place, sinon, votre patron vous vire ?

Le père Noël a pensé à vous !

Installation

Téléchargement : Récupérer le zip « menu_deroulant » sur l’espace de téléchargement, ou le miroir, de spip-zone, cf. rubrique Produits finis

Mise en œuvre : Comme tous les autres plugins, cf. https://www.spip.net/fr_article3396.html

Pour installer ce plugin de menu déroulant, copier le contenu du zip dans le dossier plugins à la racine de votre site. Recopier le fichier inc-menu-deroulant.html ainsi que le fichier menu_deroulant.css dans votre dossier de squelettes. Cela vous permettra éventuellement de le personnaliser à souhaît, et surtout, de ne pas l’écraser ou le perdre lors d’une future mise à jour.

Versions inférieures à SPIP 1.9.2

Si vous êtes sur une version de SPIP antérieure à la 1.9.2, il vous faudra aussi installer le plugin jquery. La partie javascript initiale du script a en effet été réécrite en jquery pour assurer une parfaite compatibilité avec internet explorer.
Au delà de la 1.9.2, il sera inutile d’installer jquery, celui-ci a été intégré au core.

Dans vos squelettes

Il faudra aussi vous assurer que votre squelette a bien dans son entête la fameuse balise #INSERT_HEAD, celle qu’on trouve dans le inc-head.html de la dist, balise permettant aux plugins d’insérer des appels javascript ou css. C’est un script PHP du plugin qui se charge d’insérer le script javascript pour internet explorer et la feuille de style. Par conséquent, même si le javascript a été désactivé, le menu fonctionnera sur tous les navigateurs sauf ie, qui lui devra se servir du petit script en jquery.

Insérer la noisette de menu déroulant où bon vous semble dans votre squelette (généralement en haut de page, en dessous du bandeau) par un inclure :

<INCLURE{fond=inc-menu-deroulant}{lang}>

Exemple

L’auteur de plugin nous fournit par ailleurs un squelette sommaire de la dist avec le menu déroulant en inclure, à titre d’exemple, pour que vous vous rendiez compte de ce que ca peut donner.

C’est le fichier menuder_sommaire_demo.html.
Pour l’appeler et le tester
http://www.monsitespip.net/spip.php?page=menuder_sommaire_demo

Et voilà le tour est joué !

Personnalisation

Pour personnaliser votre menu, vous pouvez modifier quelques lignes du fichier menu_deroulant.css :

la ligne :
[*border: solid #eda;*]
sous
[*#nav, #nav ul*] vous permet de régler la couleur des lignes entourant le menu.

La ligne [*background: #eda;*] sous [*#nav li:hover, #nav li.sfhover *] vous permet de régler la couleur de fond des items survolés.

Toutefois, notez que pour les changements de CSS, il faut y aller tout doucement, notamment à cause de l’éternelle problématique internet explorer. La feuille de style a été calibrée de façon très précise. Donc, pour plus de sûreté, nous vous conseillons de ne changer que les couleurs, ou de modestes petites choses, ca vous évitera bien des déconvenues. Ne pas trop jouer, à moins d’être un pro de la css qui connaît tous les mauvais tour d’internet explorer, sur les padding, les margin, les positions et sur les tailles etc...

Pour en savoir plus

Pour les petits curieux qui voudraient savoir d’où l’auteur a puisé son inspiration pour cette merveille de petit plugin, allez voir sur le site de htmldog. Il a remplacé toute sa partie javascript en jquery, et surtout trouvé la boucle qu’il fallait pour le rendre dynamique et non plus simplement statique.

On ne peut s’empécher de mettre ici cette boucle récursive, tant elle est belle et bien pensée :

<B_rubriques>
<ul>
<ul>
<BOUCLE_rubriques(RUBRIQUES) {racine} {par num titre, titre}>
<li>
<a href="#URL_RUBRIQUE"class="intitule">[(#TITRE|supprimer_numero|couper{80})]</a>
<B_sous_rubriques>
<ul>
<BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par num titre, titre}>
<li>
<a href="#URL_RUBRIQUE" <BOUCLE_test_sousrub(RUBRIQUES){id_parent}{0,1}>class='daddy'</BOUCLE_test_sousrub>>[(#TITRE|supprimer_numero|couper{80})]</a><BOUCLE_re(BOUCLE_sous_rubriques)></BOUCLE_re>	</li>
</BOUCLE_sous_rubriques>
</ul>
</B_sous_rubriques>
</li>
</BOUCLE_rubriques>
</ul>
</ul>
</B_rubriques>

Toute l’originalité de ce plugin est d’avoir trouvé la boucle qu’il fallait avec le meilleur exemple de menu déroulant qu’on puisse trouver. En effet,
ceux d’Alsa Création, par exemple, utilisaient les listes de définitions et se limitaient à deux niveaux. Cf http://css.alsacreations.com/xmedia....

On pourrait très certainement aussi arriver à pluginiser les modèles de menus déroulants proposés par CSSplay.

Discussion

57 discussions

  • Bonjour. Le menu horizontal est très bien, seulement il ne s’affiche que sur ma page d’accueil, et une fois que je clic sur une sous rubrique celui ci disparait !
    Comment faire pour qu’il s’affiche sur toutes les pages ?

    Répondre à ce message

  • 2

    Perso, sans vouloir porter préjudice au travail présenté ici (merci beaucoup), j’ai testé celui proposé ici : http://www.spip-contrib.net/Babbibel,1225

    Franchement, moi, ça me convient très bien.

    • Asteroiide

      Merci pour ce plugin !

      Personnellement, j’ai modifié le css afin de le rendre vertical (il déroule à droite) et je n’ai pas eu de problèmes.
      J’avais essayé sans succès avec le menu babbibel : un problème de z-index sur les sous-rubriques avec IE7.

      Donc encore merci pour ce plugin compatible avec les principaux navigateurs.

    • Ben si Asteroiide pouvait m’envoyer sa page css pour un déroulement vertical, je suis preneur. J’ai le même problème que lui avec babbibel.
      Merci

    Répondre à ce message

  • Bonjour
    Ce plugin me serait bien utile, mais j’aimerais qu’il finisse par la liste des titres des articles contenus dans la sous-sous-rubrique (enfin, moi, je n’ai pas de sous-rubriques, mais bon...)
    J’ai essayé de modifier la boucle mais je n’y connais rien...pas de message d’erreur, mais pas de modification dans le résultat non plus ;-)
    Pouvez-vous m’aider ?

    Répondre à ce message

  • 1

    Bon vu les explications même si il y a pas de démonstration j’imagine que ça donne quelquechose comme ça http://www.htmldog.com/articles/suc...

    • Y a t il un moyen jquery de mettre un timer sur ce menu pour empêcher qu’il se ferme trop facilement dés que la souris sors des bord ? un petit délais de 500ms avant disparition du menu faciliterait énormément la navigation... [edit] : ya ça peut être plutôt : http://users.tpg.com.au/j_birch/plu...

    Répondre à ce message

  • 1

    Salut,

    Ce plugin fonctionne impeccablement sous Spip 1.9.2.
    Est-il compatible avec la version 2.0 ?


    Amicalement.
    Arnaud

    • A priori pas de problème avec SPIP 2.0. Le plugin repose simplement sur des boucles, des css et 2 doigts de jquery, donc cela doit marcher sans soucis !

    Répondre à ce message

  • Bonjour

    beaucoup de questions et peu de réponses...!
    et voici une question supplémentaire :

    j’utilise ce plugin qui marche plutot bien, sauf sous opera, ou au survol de la souris, les sous-rubriques chevauchent les rubriques principales. Pas de pb sous Firefox, Safari et IE, mais avec Opera ça bug... si quelqu’un a une astuce ?

    merci

    valérie

    Répondre à ce message

  • Bonjour à tous,
    J’ai installé ce menu déroulant qui répond exactement à ce que je cherche, mais ce dernier va se loger sous mon bandeau d’entête de site. Je ne comprends pas comment y remédier. Merci beaucoup pour votre aide.
    J’utilise la version SPIP2 + squelette AHUNTSIC
    Merci pour votre aide

    Répondre à ce message

  • Bonjour,

    Le menu marche en effet très bien, mais y-a-t’il un moyen, au clic sur une rubrique, de renvoyer vers une page spip avec un CSS appliqué, car quand j’utilise le menu, les pages spip « standard » s’affichent.

    Répondre à ce message

  • Bonjour,
    Sous firefox le plugin fonctionne nickel
    mais sous IE7, toutes les ssrubriques qui se deroulent au survol restent affichées : elles ne se referment pas !
    Du coup toutes les ssrubriques deroulantes sont ouvertes et se chevauchent quand on survole le menu avec la souris.
    C’est comme si le masquage du hover (left, -999em) ne fonctionnait pas sous IE !

    Auriez vous une piste ?
    Autres plugins installés :
    -  Couteau suisse (insert head)
    -  CFG
    -  Définitions mots
    -  Recherche avancée

    Version de SPIP : 1.9.2c

    Merci de votre aide.

    Répondre à ce message

  • Bonsoir,

    J’aimerai savoir si avec se plugin, il était possible d’organiser ses rubriques dans l’ordre que l’on souhaite ? Car par défaut, les rubriques sont classées par ordre alphabétique, ce qui est très génant. Peut-être que cela est paramétrable directement dans la zone d’administration de spip ? Mais pour le moment je n’ai pas trouvé cette fonctionnalitée.
    Pouvez-vous m’aider, merci d’avance

    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