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

  • Onyrodine

    Salut,

    J’ai installé et modifier les ccs du menu. Ca fonctionne parfaitement sur Firefox et IE 7. Mais sur IE 6, le menu ne se déroule pas. Ennuyeux pour un menu déroulant. Cher développeur, peux tu me dire si ce menu est censé se dérouler avec IE6 ou si je dois envisager un menu alternatif pour cette version d’IE (qui est pourri, soit dis en passant).

    Onyrodine

    Répondre à ce message

  • 6

    Je viens de l’installer sur une 1.9.2, ça marche bien tant qu’on ne depasse pas trois sous-niveau. Après tous les sous menus se déroulent en même temps... Est-ce que je suis le seul ?

    • Je me répond à moi-même...
      Il faut modifier menu_deroulant.css et rajouter :
      #nav li:hover ul ul ul ul ul,
      #nav li.sfhover ul ul ul ul ul

      #nav li li li li li:hover ul,
      #nav li li li li li.sfhover ul,

      Dans les sections correspondantes et mettre d’autant plus de ul et de li qu’on veut descendre dans les sous-menus.

    • Il suffit de mettre dans la partie #nav li ul ul :

      #nav li ul ul
      margin : -1.75em 0 0 13em ;

      — 
      Kinguantoin

    • Il suffit de mettre dans la partie #nav li ul ul :

      #nav li ul ul {
      	margin: -1.75em 0 0 13em;
      }

      — 
      Kinguantoin

    • Et de virer : float: left; dans #nav li

      — 
      Kingantoin

    • Comment faire pour que le premier sous-niveau soit à droite et pas en-dessous ?

      Merci d’avance,

      J-F Dupal

    • nicolas.zan

      ah oui, si vous avez la réponse, JE SUIS PRENEUR !!
      Après ça, mon menu sera parfait...jusqu’à la prochaine amélioration...

    Répondre à ce message

  • 5

    Hello,

    Comment y ajouter les articles de la rubrique de premier niveau, j’ai bien tenté ceci :

    <div id='nav-container'>
    <B_rubriques>
    <ul id="nav">
    	<ul>
    	<BOUCLE_rubriques(RUBRIQUES) {racine} {par num titre, titre}>
    		<li>
    			<a href="#URL_RUBRIQUE" class="intitule">[(#TITRE|supprimer_numero|couper{80})]</a>
    	<B_articles>
    				<ul>
    				<BOUCLE_articles(ARTICLES) {id_rubrique} {par num titre, titre}>
    						<li>
    						<a href="#URL_ARTICLE">[(#TITRE|supprimer_numero)]</a>
    						</li>
    						</BOUCLE_articles>
    					</ul>
    			</B_articles>		
    		<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>
    </div>

    Mais il me superpose les articles et les rubriques ! Un problème de classe de style je supose, mais j’ai déjà tenté pas mal de choses sans résultat !

    Une idée, un conseil, je suis preneur !

    Merci
    Paul

    • Voila, une petite modif qui permet d’afficher les articles des rubriques ainsi que ceux des sous rubriques. Visible sur www.cyberlcs.com

    • Avec les balises code, c’est mieux !

      <div id='nav-container'>
      <B_rubriques>
      <ul id="nav">
      	<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>
      				---------------
      				<BOUCLE_articles_ss_rub(ARTICLES) {id_rubrique} {par date} {inverse}>
      					<li>
                          <a href="#URL_ARTICLE" <BOUCLE_test_artssrub(ARTICLES){id_rubrique}{0,1}>class='daddy2'
      </BOUCLE_test_artssrub>>[(#TITRE|supprimer_numero|couper{80})]</a></li>
      				</BOUCLE_articles_ss_rub>
      
      			</ul>
      			</B_sous_rubriques>
      			<ul>
      				<BOUCLE_articles(ARTICLES) {id_rubrique} {par date} {inverse}>
      					<li>
                          <a href="#URL_ARTICLE" <BOUCLE_test_sousart(ARTICLES){id_rubrique}{0,1}>class='daddy2'
      </BOUCLE_test_sousart>>[(#TITRE|supprimer_numero|couper{80})]</a></li>
      				</BOUCLE_articles>
      			</ul>			
      			<//B_sous_rubriques>
      		</li>
      	</BOUCLE_rubriques>
      
      	</ul>
      </ul>
      </B_rubriques>
      </div>
    • J’ai mis ce code dans inc-menu-déroulant.html et rien ne se passe...
      J’ai vidé le cache, redemaré apache effacé mes trace dans fire fox et toujours rien...
      Quelqu’un aurai une idée ???????????

    • nicolas.zan

      Même problème pour moi...
      Désolé d’être débutant, mais c’est vrai que très très souvent, les auteurs ne précisent pas où placer les balises qu’ils proposent... Cette petite précision serait pourtant EXTREMEMENT utile aux gens comme moi (comme nous, apparemment) qui cherchent, cherchent, cherchent...et trouvent parfois, mais au prix de longues heures de tâtonnement...

    • nicolas.zan

      ...et donc, oui, en tâtonnatn, j’ai trouvé : dans ton éditeur de squelettes, inc-menu, tu rajoutes ces balises, après avoir viré le « insert inc-menu déroulant ».
      Et ça marche !!
      Merci pour cette balise magique, c’est très chouette !!

    Répondre à ce message

  • belantik

    Bonjour,
    Merci pour ce menu très simple d’utilisation
    Je sèche lamentablement sur une bêtise : je voudrais juste centrer le menu dans ma page (un bloc) mais je n’y arrive pas. Merci de vos réponses !

    Répondre à ce message

  • 1

    Bonsoir à tous !

    merci tout d’abord pour ce plugin très pratique !

    une petite demande :
    est-il possible de ne faire apparaitre qu’une partie de l’arborescence, sans partir qui plus est de la racine ?
    je m’explique
    j’ai déjà un menu spécial pour ma page sommaire. je clique sur une image qui me conduit à une des rubriques. là je voudrais mettre un menu horizontale qui comprendrait les sous rubriques et leurs éventuelles sous-sous rubriques.
    sauriez-vous m’indiquer comment m’y prendre ?
    je vous en remercie d’avance !

    • Je me reponds à moi-même !
      Il suffisait juste de modifier la boucle et d’indiquer un {id_parent=la rubrique dont on veut les sous rubrique} à la place de {racine} dans son inc-menu_deroulant.htlm

      merci pour le plug, très pratique, vraiment !

    Répondre à ce message

  • 3

    Bonjour,
    Sous spip 1.9.2 squelettes Alternatives le menu déroulant « passe » dessous l’image du haut. Ben, j’aimerai bien pouvoir la faire passer au-dessus.

    Une idée ?

    Merci

    MichelD

    • YBourgeois

      Bonjour, j’ai eu le même soucis que toi.
      J’ai eu la réponse dans la liste.

      Dans les paramètres du code de « menu_deroulant.css »,
      il te faut rajouter dans le code suivant après, en fin de liste des paramètres pris entre { et } :

      #nav-container...{
      ....
      z-index=50
      }

      Insèrer un z-index élevé : ex : z-index=50
      Je te suggère de le mettre à 100 pour voir, puis si c’est ok de descendre un peu.
      J’espère t’avoir un peu aidé.

    • nicolas.zan

      Bonjour.
      J’ai fait tout comme tu as dit, car j’ai le même problème.
      Seulement, ça ne change absolument rien du tout.
      J’ai essayé « z-index=50 » « z-index=50 ; » « z-index:50 » « z-index:50 ; »....
      Rien. Jamais. C’est rageant, car je touche presque au but de mon menu !!!!
      http://nicolas.zan.free.fr

      Je vous remercie de toute aide !

    • Eh bien, je me réponds tout seul : voici la solution, dans menu-deroulant.css :

      #nav li ul ul

      margin : 0em 0 0 8em ;
      z-index:20 ;

      Le z-index fait apparaître au dessus, et les valeurs de margin gèrent les positions des blocs.
      J’ai trouvé ça en tâtonnant, je le poste au cas où qqn galère comme moi pendant plusieurs jours !!!
      NicoZ

    Répondre à ce message

  • 2

    Quelqu’un a-t’il une idée de comment on peut organiser les rubriques affichées dans le menu, autrement que dans un ordre alphabétique ?
    Merci d’avance.

    • Comme dans toute boucle spip, en numérotant les rubriques. Il faut ajouter devant le titre des rubriques un numéro suivi d’un point ET d’un espace :

      1. Ma rubrique qui doit apparaître en 1
      2. Ma deuxième
      etc...

    • Tu leurs met des chiffres comme cela par exemple :

      01. rubrique ploum

      02. rubrique muche

      puis dans tes squelettes :

      rubrique|supprimer_numero

    Répondre à ce message

  • Bonjour,

    Après mon message précédent, je viens de tester avec IE7 et c’est la catastrophe, le site trois colonne se retrouve avec la colonne centrale complètement descendue.

    Puis-je avoir de l’aide, merci.

    Répondre à ce message

  • Bonjour,

    Voilà, je cherchais une solution pour un menu déroulant, mais vertical, j’en ai essayé je ne sais plus combien, mais je suis si mauvais en css que je n’ai pas réussi.

    Tellement décidé à avoir ce type de menu que j’ai décidé d’installer ce plugin en me disant « je dois pouvoir le bidouiller ».

    J’ai été surpris de n’avoir pas eu à le faire, il m’a suffit de l’installer à la place de l’ancien menu, dans un cadre, et il fonctionne à merveille.

    Je n’ai rencontré qu’un problème, quand on développe le nombre de rubriques, si il y a cadre dessous, il n’est pas poussé avec le développement des menus, j’ai été obligé de rajouter des <br><br> c’est pas trés propre.

    Quelqu’un a un conseil ?

    En tout cas, merci pour ce plugin, il est génial.

    Répondre à ce message

  • 4

    Bonjour,
    mon menu ne fonctionne pas sous IE 7 :
    -  parfois il se déroule mais reste déroulé
    -  parfois il ne se déroule carrément pas...
    Gênant dans ls deux cas.

    Quelqu’un a-t-il une explication voire une solution à proposer ???

    Merci

    • Christophe Noisette

      Bonjour
      j’ai aussi un problème avec le menu déroulant et Internet Explorer. Je suis en spip 1.9.2 donc a priori, si j’ai bien lu les autres commentaires, je n’ai pas besoin d’ajouter JQuery car il est intégré dans le noyau de spip. Aucun probleme autrement sous Safari.
      Le site : www.lairederien.net, le menu déroulant n’est pas installé sur la page d’accueil, mais sur les pages rubrique et article.
      Une idée ? une piste à creuser.
      Je vous remercie et bravo pour ce plugin, car quand il marche, c’est vraiment trop fort ;)
      Amicalement
      Christophe

    • Désolé, j’ai trouvé la solution... et comme je l’envisageais, il s’agissait d’un truc tout con. Dans la feuille CSS du menu déroulant, j’avais introduit des commentaires sous la forme

    • En passant d’IE6 à IE7, j’ai eu ce bug. Les parties développées du menu restaient déroulées.

      Bon, il faut rajouter le morceau de JS dispo sur le site htmldog.

      Dans « menu_deroulant.js », à la suite.

      /*
       * 
      Cette partie doit être ajoutée pour la compatibilité avec IE7
       *
       */
      
      sfHover = function() {
      	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
      	for (var i=0; i<sfEls.length; i++) {
      		sfEls[i].onmouseover=function() {
      			this.className+=" sfhover";
      		}
      		sfEls[i].onmouseout=function() {
      			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
      		}
      	}
      }
      if (window.attachEvent) window.attachEvent("onload", sfHover);

      En espérant que cela aide.

    • super ! ca résouts le soucis :)
      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