Menu en cascade automatique (tout CSS + javascript pour IE)

Un menu déroulant en cascade simple basé sur des CSS avec un petit script javascript supplémentaire pour IE. Sa structure en fait le menu idéal par boucles récursives.

Introduction

Le menu présenté se révèle être d’une simplicité de mise en oeuvre une fois qu’on a compris son fonctionnement. Il est basé sur les CSS (plus un script pour permettre à IE de se comporter presque comme les autres navigateurs).

Quelques mots sur le fonctionnement

Le menu fonctionne grâce aux listes imbriquées :

<ul>
  <li>Niveau 1
    <ul>
      <li>Niveau 1.1</li>
      <li>Niveau 1.2
        <ul>
          <li>Niveau 1.2.1</li>
          <li>Niveau 1.2.2</li>
        </ul>
      </li>
      <li>Niveau 1.3
        <ul>
          <li>Niveau 1.3.1</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Niveau 2
    <ul>
      <li>Niveau 2.1</li>
      <li>Niveau 2.2</li>
      <li>Niveau 2.3
        <ul>
          <li>Niveau 2.3.1</li>
          <li>Niveau 2.3.2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Ce qui donne sans mise en forme particulière :

  • Niveau 1
    • Niveau 1.1
    • Niveau 1.2
      • Niveau 1.2.1
      • Niveau 1.2.2
    • Niveau 1.3
      • Niveau 1.3.1
  • Niveau 2
    • Niveau 2.1
    • Niveau 2.2
    • Niveau 2.3
      • Niveau 2.3.1
      • Niveau 2.3.2

Chaque niveau de liste sera un niveau du menu déroulant.

Préparation des pages du squelette :

Vous trouverez en bas de cet article le javascript à intégrer dans les pages. Personnellement je dépose le fichier dans un dossier « script » et je l’inclus avec le code suivant :

<script type="text/javascript" src="script/menuderoulant.js"></script>

Il faut également ajouter ce code au niveau du body pour que le menu fonctionne sous IE :

<body onload="setHover('menulist')">

menulist est à remplacer éventuellement par le nom de l’id que vous voulez utiliser.

Les boucles

Boucle de base

Voici la boucle « basique » permettant de générer le menu de tout le site :

<ul id="menulist">
<BOUCLE_menu(RUBRIQUES){racine}>
  <li><a href="#URL_RUBRIQUE">#TITRE</a>
    <B_sousmenu><ul>
      <BOUCLE_sousmenu(RUBRIQUES){id_parent}>
        <li><a href="#URL_RUBRIQUE">#TITRE</a>
          <BOUCLE_ssousmenu(boucle_sousmenu)></BOUCLE_ssousmenu>
        </li>
      </BOUCLE_sousmenu>
    </ul></B_sousmenu>
  </li>
</BOUCLE_menu>
</ul>

Il suffit de nommer (id=« menulist ») et ensuite de styler la liste.

Les styles en provenance de l’exemple de Jep :

ul#menulist li ul{ display:none; }
	
ul#menulist li:hover>ul{ display:block; }

ul#menulist,
ul#menulist ul{
  background:white;
  border:1px solid black;
  list-style:none;
  margin:0px;
  padding:0px;
  width:148px;
  _width:150px;
  font-size: 12px;
}

ul#menulist ul{
  position:absolute;
  top:-1px;
  left:148px;
}

ul#menulist li{
  position:relative;
  margin:0px;
  padding:0px;
  _display:inline;
}

ul#menulist a{
  display:block;
  width:100%;
  color:#000000;
}

ul#menulist a:hover{
  background: gray;
  color: white;
}

Exemple ici

Boucle détectant la présence de sous-menus

On va ajouter ici des éléments qui permettent d’identifier visuellement les rubriques en contenant d’autres en les mettant en italique et en ajoutant « >>> » derrière l’intitulé. Les styles en exemple derrière sont plus travaillés que l’exemple précédent et les boucles SPIP également (ajout de tri, suppression des numéros de titres, ...).

<ul id="menulist">
	<BOUCLE_smenuspipr(RUBRIQUES){racine}{par num titre}><li<BOUCLE_smenr(RUBRIQUES){id_parent}{0,1}> class="smenu"</BOUCLE_smenr>><a href="#URL_RUBRIQUE">[(#TITRE|supprimer_numero)]<BOUCLE_smen1r(RUBRIQUES){id_parent}{0,1}> >>></BOUCLE_smen1r></a>
		<B_smenuspip><ul>
			<BOUCLE_smenuspip(RUBRIQUES){id_parent}{par num titre}><li<BOUCLE_smen(RUBRIQUES){id_parent}{0,1}> class="smenu"</BOUCLE_smen>><a href="#URL_RUBRIQUE">[(#TITRE|supprimer_numero)]<BOUCLE_smen1(RUBRIQUES){id_parent}{0,1}> >>></BOUCLE_smen1></a>
					<BOUCLE_ssmenu(boucle_smenuspip)></BOUCLE_ssmenu>
			</li></BOUCLE_smenuspip>
		</ul></B_smenuspip>
	</li></BOUCLE_smenuspipr>
</ul>

La boucle RUBRIQUES couplée à id_parent avec une restriction de 1 permet de détecter des sous-rubriques et ici d’appliquer un style particulier à la ligne (class=« smenu ») et d’ajouter « >>> » dans l’intitulé du menu.

Des styles mettant un peu plus le menu en valeur et exploitant la détection de sous-menus :

ul#menulist li ul{ display:none; }

ul#menulist li:hover>ul{ display:block; }

ul#menulist {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #0F4D2A;
  position: static;
  left: 10px;
  margin: 15px;
}

ul#menulist, ul#menulist ul {
  list-style:none;
  margin:0;
  padding:0;
  width:13em;
  border: 1px solid;
   border-top-color: #BABABA;
   border-left-color: #BABABA;
   border-bottom-color: #67B289;
   border-right-color: #67B289;
  background-color: #A7E6C4;
}

ul#menulist ul{
  position:absolute;
  top:-1px;
  left:12.7em;
}

ul#menulist li{
  position:relative;
  margin:0px;
  padding:0px;
  _display:inline;
}

ul#menulist a{
  display:block;
  width:100%;
  text-decoration: none;
  text-indent: 1em;
  width: 12.7em;
  padding: 5px 0;
}

ul#menulist li:hover, ul#menulist li a:hover {
  color: #FFFFFF;
  background-color: #67B289;
}

ul#menulist li.smenu>a {
  font-style: italic;
}

ul#menulist a {
  color: #0F4D2A;
  text-decoration: none;
}

L’exemple situé ici est inspiré de ceci, mais il est plus joli et fonctionne uniquement sur les styles (pas d’ajout de « >>> »). La mise en forme ne se voit bien que sous des navigateurs récents (bien qu’il fonctionne sous IE sans avoir toutes ses subtilités visuelles). Sous les autres navigateurs, une flèche tourne lorsqu’on survole les éléments du menu.

J’ai préféré indiquer ci-dessus un exemple fonctionnant de manière vraiment similaire sous IE et les autres navigateurs.

Je trouve que dans cet exemple, l’utilisation de ce menu prend toute son ampleur.

Menu du secteur, menu de la rubrique courante, etc.

Il est très simple d’implémenter ce menu en exploitant le contexte de la page et en n’affichant que le secteur ou la rubrique courante. Il suffit de faire une boucle affichant le secteur courant ou la rubrique courante sous forme de liste.

Les exemples donnés ci-dessous correspondent à des boucles basiques sans tri et avec les styles basiques donnés au premier exemple.

Exemple de la rubrique courante

<ul id="menulist"><BOUCLE_menuspiprub(RUBRIQUES){id_rubrique}>
	<li><b><a href="#URL_RUBRIQUE">#TITRE</a></b></li>
	<BOUCLE_smenuspiprub(RUBRIQUES){id_parent}><li><a href="#URL_RUBRIQUE">#TITRE</a>
		<B_ssmenurub><ul>
			<BOUCLE_ssmenurub(boucle_smenuspiprub)></BOUCLE_ssmenurub>
		</ul></B_ssmenurubt>
	</li></BOUCLE_smenuspiprub>
</ul>

Exemple du secteur courant fonctionnant aussi bien dans une page affichant secteur, rubrique, article, breve, ...

Ce code peut être externalisé dans un fichier qu’on inclut en passant id_rubrique.

<BOUCLE_englob(RUBRIQUES){id_rubrique}>
<B_menuspip>
	<ul id="menulist"><BOUCLE_menuspip(HIERARCHIE){id_rubrique}{0,1}>
		<li><b><a href="#URL_RUBRIQUE">#TITRE</a></b></li>
		<BOUCLE_smenuspip(RUBRIQUES){id_parent}><li><a href="#URL_RUBRIQUE">#TITRE</a>
			<B_ssmenu><ul>
				<BOUCLE_ssmenu(boucle_smenuspip)></BOUCLE_ssmenu>
			</ul></B_ssmenu>
		</li></BOUCLE_smenuspip>
	</BOUCLE_menuspip>
	</ul>
</B_menuspip>
	<ul id="menulist"><BOUCLE_menuspipsect(RUBRIQUES){id_rubrique}>
		<li><b><a href="#URL_RUBRIQUE">#TITRE</a></b></li>
		<BOUCLE_smenuspipsect(RUBRIQUES){id_parent}><li><a href="#URL_RUBRIQUE">#TITRE</a>
			<B_ssmenusect><ul>
				<BOUCLE_ssmenusect(boucle_smenuspipsect)></BOUCLE_ssmenusect>
			</ul></B_ssmenusect>
		</li></BOUCLE_smenuspipsect>
	</ul>
<//B_menuspip>
</BOUCLE_englob>

Il est possible d’inclure les articles aussi, les brèves, etc... Tout dépend après de vos envies.

Les fichiers à télécharger

Le fichier javascript :

Javascript du menu déroulant

Un ensemble de fichiers prêts à l’emploi qu’il suffit d’inclure dans les squelettes par la commande <INCLURE(spip-ex-md-menu.php3)> (ou un autre nom si vous renommez les fichiers) :

  • Un couple php3/html de type spip [1]
  • Un fichier css soit à inclure dans l’entête de vos squelettes, soit à copier/coller dans votre propre CSS.
  • Ne pas oublier le javascript et le code à préciser au niveau du body.
  • Il est présenté ici
Un exemple prêt à l’emploi

A noter que cet exemple supprime les numéros et trie par numéro.

Notes

[1note admins : à adapter pour SPIP v1.9 et suite - plus de fichier php3

Discussion

26 discussions

  • merci pour le code ca foncitonne bien

    Répondre à ce message

  • newtech83

    Salut

    Commment pourrai-je selectionner des rubriques particuliere et non toute les rubriques de mon site ?

    Cordialement

    Répondre à ce message

  • 5

    Bonjour Miss,

    Ce menu me plaît beaucoup mais ça ne marche pas avec ma mise en page pourtant pas compliquée. tu peux voir ce que ça donne avec IE sur le lien ci-dessous. La page a été simplifiée à l’extrême mais je n’ai pas trouvé de solution. Aurais tu une idée ?

    • Rebonjour,

      Je te donne la solution que j’ai trouvé (avec bien du mal). Elle était pourtant simple

    • Comme je ne vais pas garder mes liens en ligne éternellement, je précise ici la solution.

      Sous IE il faut que la DIV qui porte le menu soit définie *après* les DIV que le menu va recouvrir, faute de quoi il y a l’effet de transparence. Il semble que IE se moque royalement de l’attribut z-index.

    • OK, je note le conseil pour le jour où j’aurais le temps de faire une modif...

      ** ça s’accumule je sais ^^ **

    • bonjour,
      j’ai réussi à mettre en place ce menu, et je vous en remercie.
      j’ai changé un peu la mise en page, pour l’avoir en horizontal, mais ce que j’aimerais, c’est changer les sous-rubriques en articles. en fait, sous spip, je n’ai pas de sous-rubriques. donc, j’aimerais que lorsque le menu se déroule, il montre les articles de la rubrique... j’ai essayé plusieurs choses, mais je n’y arrive pas... si vous avez une solution....

    • je précise juste que j’ai utilisé la première boucle que vous donnez, en haut de l’article...

    Répondre à ce message

  • THC2070

    bonjour
    voila je ne c’est pas si ce menu est encore utilisé mais je le trouve très sympa, donc je l’ai installé avec un peu de mal. il fonctionne
    mais
    une erreur javascript intervient avec firebug :
    « setHover is not defined à la premiere ligne.
    [Break on this error] » <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML...w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
    www.lanouee.fr (ligne 1)

    et une autre après quelque seconde :
    [Exception... « ’JavaScript component does not have a method named : »onRefreshAttempted« ’ when calling method : [nsIWebProgressListener2::onRefreshAttempted] » nsresult : « 0x80570030 (NS_ERROR_XPC_JSOBJECT_HAS_NO_FUNCTION_NAMED) » location : "<unknown>" data : no]

    Est ce que c’est dû seulement au hack pour IE pour que ce menu fonctionne ?
    est ce sans incidences ?
    Voila j’essaie de mettre ce site au norme mais la je buche.
    merci à spip contrib de m’aider.

    Répondre à ce message

  • 1

    Hi,
    je suis en train d’utiliser le menu css + javascript et ca ne fonctionne pas. J’ai l’impression que les boucles sont mal faites car Spip 1.9.2b me met des messages de bugs du genre :

    Spip 1.9.2b debug Beicip Inc
    Error(s) in template

    Incorrect loop (BOUCLE) syntax , BOUCLE_ssmenu : double definition

    Incorrect loop (BOUCLE) syntax , BOUCLE_smenuspip : double definition

    Incorrect loop (BOUCLE) syntax , BOUCLE_menuspiprub : missing closing tag

    Incorrect loop (BOUCLE) syntax , BOUCLE_smenr : double definition

    Incorrect loop (BOUCLE) syntax , BOUCLE_smen : double definition

    voila j’ai essaye toute les exemple de cet contrib et uniquement un seul marche.
    ce que je souhaiterai c’est un menu vertical deroulant contextuel qui affiche uniquement la rubrique courante(selectionnee avant dans un menu horizontal) et ses sous rubriques et facile a manipuler..
    please I need your help.

    Thanks in advance
    a french-american desesperate IT

    • Hi again,

      je viens de trouver la solution au menu deroulant pour lequel on passe l’identifiant de la rubrique. en effet une erreur s’est glisse dans le code. la boucle “BOUCLE_menuspipsect /BOUCLE_menuspipsect” ne se terminait pas correctement. je pense qu’il faut bien verifier que toute les boucles SPIP sont bien ferme sinon on obtient ce genre de message d’erreur.

      a++

      A happy french american IT

    Répondre à ce message

  • un grand merci pour cette contrib qui va me permettre de facilement animer un peu mon menu tout en le gardant simple et sobre. Il ne me reste plus qu’à adapter le css à ma sauce.

    Bravo et merci

    Répondre à ce message

  • 5

    Bonjour miss mopi,
    je suis débutant en spip html et css... mais j’ai réussi à intégrer ce menu sur spip 1.9.
    ma question est simple : j’aimerais en faire un menu à l’horizontale. donc deux trucs : comment afficher les rubriques à la racine à l’horizontale (je pense à text-align center mais bon) ? et comment faire pour que quand la souris passe sur une rubrique cela développe le menu verticalement ?
    en attendant un post de ta part je cherche de mon coté mais je pense que beaucoup de débutants comme moi sont hyper intéressés car ce menu vertical est au top !
    merci encore pour ton travail

    • Bonjour,

      Il faut changer la CSS, et il y a un exemple sur ibilab pour le faire.

      http://www.ibilab.net/webdev/exemples/menuencascade-exemple2.htm

      Tu affiches le code source et tu as tout le nécessaire ;-)

    • bonjour

      J’ai reussi a integrer le code dans mon squelette ; le seul pborbleme que je rencontre est que tout est deplie et reste fige ou que soit la souris.
      J’ai verifie le javascript, il est bien appele.

      tu aurais une idee d’ou ca pourrait venir ?

    • Bonjour,
      J’aurai été très intéressé de voir l’exemple du menu horizontal de ibilab.net, malheureusement, le lien fournit indique que le site n’est plus accessible. Auriez-vous par hazard d’autres sites ou exemples de CSS mettant en oeuvre ce menu horizontalement ?
      Merci

    • Merci Web Archive !

      Sauvegarde de la page Ibilab
      Tout est là en regardant le code source de la page.

      Il faudra que j’étudie une mise à jour de cette contribution avec un exemple en menu horizontal.

    • Danakil

      Bonjour,
      Je suis un novice en train de crée mon site sous spip 1.9.2 et comme menu de toutes mes pages j’ai choisi le « Menu en cascade automatique (tout CSS + javascript pour IE) » mais je souhaite l’adapter en menu horizontal déroulant vertical. Le lien vers le code source de la page de sauvegarde d’Ibilab ne fonctionne pas.

      Comment puis je faire pour récupérer la modif de code pour adapter le menu à l’horizontal ?
      Et surtout comment si prendre ?

      Merci à Miss Mopi pour cette superbe contrib

      Merci de votre aide

    Répondre à ce message

  • Bonjour.
    Un grand merci pour cette contrib qui rend bien des services !
    J’ai cependant un léger problème sous IE :
    tout fonctionne impec sur tout le site, mais au survol de l’une des rubriques de premier niveau (et uniquement celle-là), il me faut attendre 5 secondes avant de voir s’afficher le premier sous-niveau ! Et idem pour les sous-niveaux suivants...
    J’imagine que cela vient du fait que cette branche contient pas moins d’une cinquantaine de sous-rubriques réparties sur une arborescence allant, par endroit jusqu’à 6 sous-niveaux...
    Mais bon, je n’ai pas conçu le site. Je suis juste censé en modifier l’apparence.
    Auriez-vous une solution ?
    Merci d’avance.

    Répondre à ce message

  • Bonjour a tous !!
    J’ai un petit probleme avec le menu déroulant, je travaille en local avec spip 1.9 et j’ai mis en place le menu mais les sous rubrique ne s’affiche pas quand je passe sur une rubrique avec ma souris... (en fait j’ai un menu juste avec les rubriques)
    j’ai modifié la balise body de ma page
    <body class="page_sommaire" onload="setHover('menulist')">

    et voila le code que j’ai mis pour afficher le menu :

     <script type="text/javascript" src="script/menuderoulant.js"></script>
    <ul id="menulist">
    	<BOUCLE_smenuspipr(RUBRIQUES){racine}{par num titre}><li><a href="#URL_RUBRIQUE">[(#TITRE|supprimer_numero)]<BOUCLE_smenr(RUBRIQUES){id_parent}{0,1}><b> >></b></BOUCLE_smenr></a>
    		<B_smenuspip><ul>
    			<BOUCLE_smenuspip(RUBRIQUES){id_parent}{par num titre}><li><a href="#URL_RUBRIQUE">[(#TITRE|supprimer_numero)]<BOUCLE_smen(RUBRIQUES){id_parent}{0,1}><b> >></b></BOUCLE_smen></a>
    					<BOUCLE_ssmenu(boucle_smenuspip)></BOUCLE_ssmenu>
    			</li></BOUCLE_smenuspip>
    		</ul></B_smenuspip>
    	</li></BOUCLE_smenuspipr>
    </ul>

    Donc si vous avez quelques idées pour me sauver ca serait génial !!!

    Merci d’avance !

    Répondre à ce message

  • 1

    Bonjour à tous,

    J’ai réussi à installer le menu en cascade qui marche vraiment bien (le site que je crée est sur Spip 1.9).
    Par contre, je veux utiliser aussi un script qui gère le positionnement du pied de page du site : http://pompage.net/pompe/pieds/

    Apparemment, y a un problème de conflit dans les scripts, quand je mets les deux, le menu ne marche plus...

    Voici le code du script de gestion du pied de page :

    function getWindowHeight()
    var windowHeight = 0 ;
    if (typeof(window.innerHeight) == ’number’)
    windowHeight = window.innerHeight ;

    else
    if (document.documentElement && document.documentElement.clientHeight)
    windowHeight = document.documentElement.clientHeight ;

    else
    if (document.body && document.body.clientHeight)
    windowHeight = document.body.clientHeight ;



    return windowHeight ;


    function setFooter()
    if (document.getElementById)
    var windowHeight = getWindowHeight() ;
    if (windowHeight > 0)
    var contentHeight = document.getElementById(’page’).offsetHeight ;
    var footerElement = document.getElementById(’pied’) ;
    var footerHeight = footerElement.offsetHeight ;
    if (windowHeight - (contentHeight + footerHeight) >= 0)
    footerElement.style.position = ’relative’ ;
    footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + ’px’ ;

    else
    footerElement.style.position = ’static’ ;




    window.onload = function()
    setFooter() ;

    window.onresize = function()
    setFooter() ;

    et le menu déroulant :

    function hover(obj)
    if(document.all)
    UL = obj.getElementsByTagName(’ul’) ;
    if(UL.length > 0)
    sousMenu = UL[0].style ;
    if(sousMenu.display == ’none’ || sousMenu.display == ’’)
    sousMenu.display = ’block’ ;
    else
    sousMenu.display = ’none’ ;



    function setHover(id)
    LI = document.getElementById(id).getElementsByTagName(’li’) ;
    nLI = LI.length ;
    for(i=0 ; i < nLI ; i++)
    LI[i].onmouseover = function()
    hover(this) ;

    LI[i].onmouseout = function()
    hover(this) ;


    Merci pour votre aide !

    • Je suis désolée, je ne suis qu’utilisatrice du script, je suis pour l’instant encore une bille sous javascript.

      Peut-être poser la question sur des forums javascript ?

    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