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

  • 3

    bonjour,
    je suis nouvel utilisateur de spip et je voudrais savoir comment rajouter l’affichage des articles dans ce menu. Apparrement ce n’est pas sorcier il doit falloir rajouter une boucle, mais la j’avoue que je ne vois pas bien comment faire, j’attend donc votre aide avec impatience...
    Merci.

    • Ce n’est effectivement pas très compliqué. Essayes ça :

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

      Je n’ai pas les éléments qu’il faut pour tester en local en ce moment. Préviens-moi si ça ne fonctionne pas, mais j’ai préféré essayer de te répondre rapidement.

    • il manque une s à la fermeture de .

    • il manque une s à la fermeture de

      </BOUCLE_article{{s}}sect>.

    Répondre à ce message

  • 2

    Bonjour,

    Je suis en train de chercher à mettre en oeuvre la « pseudo classe de texte » first-letter pour modifier la première lettre de chaque ligne du menu mais je galère un peu (spip et css ont moins d’un mois pour moi !!!) et pour l’instant ça marche pas.

    J’ai essayé de mettre ça dans la feuille de style :

    /* Mod lettrine*/
    ul#menu li:first-letter
    color : green ;
    font-size : 200%

    /* Fin Mod Lettrine */

    ça marche pas peut-être parce-que :
    « En effet, petit oubli : first-letter ne s’applique qu’au contenu d’un élément de type block, list-item, table-cell, table-caption et inline-block... Mais pas aux éléments inline.
    Pour conserver l’effet de first-letter : faire flotter les éléments li plutôt que de les mettre en inline. »

    Pouvez-vous me dire si le problème est bien celui-ci et s’il est possible de le résoudre.

    Merci d’avance de votre aide.

    Fabrice Cizeron

    • Il doit y avoir un lien directement sous li non ? Et en appliquant le first-letter sur a ça fonctionne mieux ? (genre ul#menu li a:first-letter - sans l’espace entre a et : créé par spip bien sûr).

      Y’a une page où on peut le voir ?

    • Super ça marche !
      Merci Miss Popi !

      La page que tu voulais , c’est mon site ? la voilà : (en cours de modif ) http://fabrice.cizeron.free.fr/SPIPcollege/

      Merci pour ton aide

      Fabrice

    Répondre à ce message

  • Bonjour,
    Tout d’abord je trouve cette contrib super efficace, on la retrouve d’ailleurs sur beaucoup de site sous spip. et moi même je ne m’en passe plus !
    Seulement voilà, sur un de mes sites, j’ai fait un menu vertical et un autre horizontal. Ca marche super bien sur firefox, sur safari, mais pas sur IE à cause du javascript qui ne marche que sur l’un ou l’autre des deux menus.
    au moment de charger le script je dois choisir le menu à charger ( body onload=« setHover(’menu’) » ) et je voudrais ajouter menu2 par exemple. j’ai essayer de les mettre dans la même balise séparée par une virgule mais dans ce cas il n’y en a toujours qu’un seul qui charge, et c’est le premier qui apparaît dans la syntaxe.

    Je pense qu’il doit y avoir une solution à ce problème, mais je dois surement pas chercher au bon endroit.

    Si quelqu’un a la solution... ou une proposition... Si ce que j’ai expliqué n’est pas claire, je peux toujours ajouter des précisions. Ceux qui sont intéréssés par l’affichage de deux menus peuvent toujours me contacter.

    Répondre à ce message

  • 1

    Bonjour,

    Que faut-il ajouter à ce script pour exclure les rubriques avec les mots clés.
    Merci de votre réponse.

    Cordialement

    MARC MEBTOUCHE

    • Le mieux est d’utiliser les doublons ou les doublons nommés en fonction de votre besoin (si vous utilisez déjà des doublons dans votre page, il faut utiliser les doublons nommés pour éviter le catapultage) !

      Vous faites une première boucle qui recherche les rubriques ayant ce mot-clé en lui ajoutant l’attribut {doublons} (ou un doublons nommé) et vous rajoutez le critère {doublons} (ou un doublons nommé) dans les boucles rubriques de cette contribution.

      Bon courage.

    Répondre à ce message

  • 2

    Bonjour,

    Avec l’exemple que tu donnes tu écris ceci :

    « Attention ce menu ne s’affiche pas à l’identique sous IE et Firefox (par exemple, tout navigateur respectant les standards), mais fonctionne parfaitement sous IE ! »

    Pas tout à fait. Avec IE, dès que l’on quitte un menu pour explorer sa descendance, celui-ci revient à sa couleur de base, ce qui fait perdre l’information du chemin d’accès. Sur Firefox et Safari par contre, ton exemple fonctionne parfaitement.

    • Il fonctionne sous IE. Il se déplie ! Les mots ont été soigneusement choisis.

      Je ne peux ni ne veux pas pallier aux faiblesses d’IE.

    • Je l’adopte quand même pour mon squelette (qui fonctionnait jusqu’à présent en Javascript avec coolmenus) car ce menu résoud bien des problèmes.

      Merci pour ta contribution, je ne manquerais pas de la mentionner.

      Marc

    Répondre à ce message

  • Bonjour,
    super le menu mais ...
    j’ai un problème pour l’integration des articles.
    Ils apparaissent simplement au 2e niveau , mais pas au 1er ni au 3e niveau ?
    Merci de votre aide .
    c’est visible sous 2 versions :
    http://antares-sellier.com/spip-ex-md-menuvertical.php3
    http://antares-sellier.com/spip-ex-md-menu.php3

    Répondre à ce message

  • 5

    Bonjour,

    J’ai utilisé votre script (depuis Spip-Contrib.net) pour le « Menu en cascade automatique (tout CSS + javascript pour IE) » et qui est tiré de votre site.

    Tout fonctionne très bien SAUF avec IE ... j’ai beau avoir rajouté la « fameuse » ligne dans le tag

    , soit <body onload="setHover('menulist')"> ... rien à faire, IE refuse systématiquement d’afficher les sous-rubriques et fait une faute sur la page (ligne:18 - celle où se trouve le tag body, Car:1, Erreur:Objet attendu, Code:0, URL:url du site)... j’en perds mon latin, mon grec et (presque) ma patience ...

    Note importante : je ne suis pas développeur professionnel ni amateur ... juste un bidouilleur du web comme beaucoup ;-)
    Si vous pouviez m’aider à résoudre ce petit bug, cela me ferait le plus grand plaisir.
    L’adresse (de test) du site est : http://www.pionnair-ge.com/spip1

    J’aurais après une deuxième question : comment « allonger » la largeur de la fenêtre faisant apparaître les sous-menus (sous-rubriques) dans votre script (dans la feuille css) ... je tourne en rond aussi.

    Mille mercis pour vos lumières et excellente journée,
    Stéphane

    • Stéphane

      Trouvé ! Le problème était que le fichier js était au mauvais endroit ... que de temps perdu pour une bêtise pareille ! J’ai encore beaucoup à apprendre...

    • Bonjour.

      Je suis confronté au même problème et je ne vois pas comment corriger le problème. Tu fais allusion au fichier javascript mal placé. C’est à dire ?

    • Il faut indiquer le lien vers le fichier en javascript entre

      et

      et ensuite bien indiqué son action au niveau du body.

      Tu mets ça :
      <script type="text/javascript" src="script/menuderoulant.js"></script>

      au même endroit que tu déclares tes CSS et tu remplace le code du body par :

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

    • Tout est bien a sa place, comme indiqué (fichier javascript, balise body modifiée, etc.). Ca marche très bien en local avec EasyPHP mais pas sur le site distant. Toujours la même erreur javascript.

      Pour ceux qui sont encore confrontés au même problème, j’ai trouvé la solution sur le site http://www.aidejavascript.com/article151.html

      Il faut remplacer le code du fichier javascript « menuderoulant.js » par celui-ci se trouvant sur le site ci-dessus et ça marche !

    • Merci pour ces infos, je ferais une modif de la contrib !

    Répondre à ce message

  • Bonjour,

    J’ai créé un menu CSS horizontal pour mon site sous SPIP...

    Celui-ci fonctionne relativement bien, mais j’ai de gros problèmes d’affichage... Le problème est que les éléments du sous-menu sont plus grands que les éléments du menu principal, résultat, lorsque je me positionne sur un élément du menu principal, tous les autres se décalent... pas très user-friendly !! De plus, la colonne dans laquelle se trouve le menu s’agrandit avec le nombre d’éléments de sous-menu (j’ai volontairemetn mis un border=1 pour que ça se remarque) et décale tout le reste du site vers le bas, ce qui n’est pas le comportement voulu...

    J’ai essayé de passer le positionnement du sous-menu en « absolute », ce qui donne le résultat espéré sous Mozilla, mais pas du tout sous IE... Les sous-menu s’affichent alors sur la droite du menu principal, plutôt qu’en dessous...

    J’espère que vous pourrez m’aider... L’adresse du site est http://test.loyers.be

    Merci d’avance

    Répondre à ce message

  • 8
    André P

    Bonjour,
    D’abord merci pour ce superbe menu. Je l’ai (un peu) adapté sur un site en construction Objectif et cela fonctionne bien pour rubrique et sous-rubrique. Malheureusement, si j’ajoute une sous-sous-rubrique, le menu déborde sur le texte (normal !) mais il y a un problème de transparence (texte du menu et de l’article sont sur lemême plan)
    Je suppose que c’est à régler dans la feuille de style du menu mais où ?

    Merci pour une aide éventuelle

    • Il faut que tu attribues des « profondeurs » à certains de tes div, que tu indiques lequel va au-dessus de l’autre.

      J’ai essayé en mettent « z-index : 2 ; » à div#principal et un « z-index : 100 ; » à div#navigation et ça fonctionne :-)

    • André P

      Et ca, c’est dans les pages html où je veux que le menu apparaisse ? C’est une commande html « z-index : 2 » ? Jamais vu... J’essaie et merci déjà.

      Le monde spip est fabuleux...

    • Non rajoute ça dans un de tes fichiers ccs :

      div#principal z-index : 2 ;
      div#navigation z-index : 100 ;

      Oui le monde SPIP est fantastique ;-)

    • Rhâââ j’ai encore été trop vite et j’ai oublié les raccourcis SPIP

      div#principal { z-index: 2; }
      div#navigation { z-index: 100; }
    • André P

      Super, ça marche en local sur firefox et ie.
      Merci beaucoup. Ce qui est génial avec spip (et eva spip) c’est qu’on peut essayer des trucs en amateur et il y a toujours un + spécialiste que toi qui peut de donner le coup de main.
      A+

    • bonjour,

      j’arrive pas a mettre le menu au dessus des autres elements de la page web meme avec le css. La question que je me pose c’est est ce que j’ai bien fai la bonne manip. Sinon pour utiliser le css il faut bien intégrer dans l’html

    • Il faut que tu le mettes soit dans un fichier CSS, soit entre dans le head de ta page.

    • j’ai encore été trop vite... pfffffffffff

      donc soit entre <style> et </style> dans le head de ta page.

    Répondre à ce message

  • 4

    Très sympa, très utile et très simple : bravo.

    Par contre ce menu est vertical, quid d’un menu horizontal ?

    merci

    A+

    • Comme c’est une liste, tout n’est affaire que de CSS après.

      Tu peux repartir de l’exemple donné par Jep sur ce menu de type application.

    • bonjour,

      Donc si j’ai bien compris, si on veut changer ce menu vertical en menu horizontal, il ne faut que modifier le css ? Sinon aurais tu un exemple de css pour menu horizontal car je suis un gros debutant tant en spip qu’en prog.

    • Si tu regardes le code source de la page indiquée ci-dessus le code CSS y est, tu n’as plus qu’à copier/coller et sur le body tu mets :

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

    • Et sur le ul tu mets menu et pas menulist ^^ j’oubliais...

    Répondre à ce message

  • 1

    Bonjour,
    J’ai installé ce menu (le script Javascript sans CSS), il marche très bien en tout cas sur IE. Mais j’ai deux petit problème avec :

    1. Il affiche toutes les sous rubrique (mères et filles)au chargement de la page d’accueil. Comment faire qu’il n’affiche par defaut que les rubriques meres.

    2. Je trouve que l’exploration des sous rubriques est par fois trop rapide. Y’a t’il une possibilité de le relentir un peu.

    Merci

    • (Désolée de répondre si tard, j’ai loupé ton message)

      Avec une page en exemple pour ton problème 1, ce serait plus simple à essayer de résoudre.

      Ensuite le CSS est nécessaire sous IE, le javascript ne permet qu’une chose à IE, c’est d’interpréter le CSS tel qu’il le devrait. Donc certains des éléments du CSS doivent être reportés dans ta feuille de style.

      Pour ton deuxième point, je ne peux pas t’aider, je ne connais pas assez javascript. Je me contente généralement d’utiliser les scripts des autres ce qui est le cas ici.

    Répondre à ce message

  • 4

    Bonjour,

    j’ai visité tes pages de test :

    Window98 et Firefox ou IE, pas de problème.

    OSX Safari et Firefox, pas de problèmes

    IS os X et Os 9 (pas Classic, hein) la cata. Les menus prennent la moitié aux trois quarts de la largeur de la fenêtre.

    Faut que je teste maintenant sur un site à sous-rubriques

    bravo en tous cas, c’est fort utile comme explications

    • Je l’ai fait tester en OSX et divers navigateurs (+ Opera sous Windows) et ça fonctionnait, mais pas de personnes avec OS9 sous la main. Je veux bien être tenue au courant des résultats de ton investigation.

      Par curiosité c’est quoi IS ?

    • oh, la belle erreur de frappe

      c’était IE,Internet Explorer et non IS

      Claude

    • ne fonctionne pas avec IE sous mas OS 10.3.8

    • Miss Mopi

      Qu’est-ce qui ne fonctionne pas ? Tu peux décrire plus précisément ?

    Répondre à ce message

  • 13
    freetamisu

    Salut et merci pour toutes ces explications fortes utiles. J’ai cependant une question, ma maîtrise de SPIP étant assez limité pour l’instant...

    Sachant que le menu que tu donnes en exemple (le deuxième) correspond à Rubriques/Sous-Rubriques.

    Je souhaiterais pouvoir créer plusieurs types menus à l’image de ce que tu as décrit, mais je n’y parviens pas : 1. Une sous-rubrique (et non toutes les sous-rubriques) qui afficherait tous les articles de cette rubrique par ordre alphabétique. 2. Une sous-rubrique qui afficherait tous les articles de cette rubrique par sous-titre (qui correspond chez moi à des dates).

    Merci pour tout conseil !

    PS
    je tente désespéremment de poster ce message... j’espère qu’il ne sera pas publié plusieurs fois. Mille excuses si c’est le cas !

    • Miss Mopi

      Je n’arrive pas très bien à saisir l’arborescence que tu cherches à faire. Tu veux quoi en premier niveau ? Les secteurs, puis par secteurs une et une seule sous-rubrique, et dans cette sous-rubrique soit les articles triés par titre soit les articles triés par sous-titre c’est ça ?

      Il me manque essentiellement l’information sur le premier niveau de ton menu.

    • freetamisu

      Merci de ta réponse.

      Dans l’arborescence de mon site spip le premier niveau correspond aux rubriques, le second aux sous-rubriques, le troisième aux article.

      Ce que je souhaiterais, c’est avoir un menu qui affiche les deux derniers niveaux. Et dans le meilleur des cas, sélectionner une sous-rubrique (deuxième niveau).
      -  1 sous rubrique / articles (ordre alphab)
      -  1 sous rubrique / articles classés selon un autre champ.

      J’espère que j’ai été plus clair...
      Merci encore !!!

    • Miss Mopi

      Donc si je résume bien :

      * rubriques (secteurs ?)
      ** sous-rubriques
      *** articles

      Quelques questions pour éviter les aller-retours :

      * Y’a-t-il des articles dans la rubrique et faut-il les afficher dans le menu ?
      * Le menu est-il identique entre la rubrique et sa sous-rubrique ?
      * ton niveau rubrique est bien le niveau le plus haut (premiers niveaux de l’arborescence=secteur) ?

      La boucle sera un tout petit peu plus complexe, mais c’est largement réalisable :)

    • Miss Mopi

      Ah si, comment détectes-tu la sous-rubrique à afficher ? par son numéro et tu fais un menu particulier pour chaque section ? ou par mot-clé, ou...??

    • freetamisu

      Bon, progressivement on va finir par y arriver...
      Mais une question d’abord : un secteur c’est quoi ? Est-ce que c’est le premier niveau de l’arborescence de spip ? Dans l’interface de rédaction, en français, de spip ce sont des rubriques et en anglais ce sont des sections. Mais secteurs, je ne sais c’est pas ce que c’est... c’est peut-être aussi une des raison pour lesquelles on ne se comprend pas très bien.. Bref, ai-je fait avancer le schmilblick ? ;-)

      -  Y’a-t-il des articles dans la rubrique et faut-il les afficher dans le menu ?
      Oui, il y a des articles et c’est leur titre (c’est peut-être le mot qu’il manquait...) que j’aimerais afficher. Un exemple : imaginons un site sur l’art contemporain.
      Les rubriques pourraient être :
      -  Musique
      -  Peinture
      -  Sculpture
      -  etc...

      Les sous-rubriques de la section Musique pourraient être :
      -  Musique électroacoustique
      -  Musique sérielle
      -  Musique répétitive
      -  etc...

      Dans la sous-rubrique « Musique électroacoustique » on pourrait trouver des articles avec des titres du genre :
      -  La musique de François Bayle
      -  Stockhausen et la synthèse
      -  etc...

      Ce qui donne comme arborescence du site Art contemporain :
      -  RUBRIQUE // SOUS-RUBRIQUE // ARTICLES
      -  Musique // Musique électroacoustique // La musique de François Bayle, Stockhausen et la synthèse, etc...

      Ce que j’aimerais c’est, non pas afficher toute l’arborescence du site, mais par exemple sur une page, avoir un menu qui donne, à partir du bouton « Musique électroacoustique » (sous-rubrique) tous les titres des articles de cette sous-rubrique par ordre alphabétique, ou bien par ordre chronologique, ou bien par autre chose, etc...

      -  Le menu est-il identique entre la rubrique et sa sous-rubrique ?
      euh... pas compris, là...

      -  ton niveau rubrique est bien le niveau le plus haut (premiers niveaux de l’arborescence=secteur) ?
      oui, là on est en phase. Oufff !

      -  La boucle sera un tout petit peu plus complexe, mais c’est largement réalisable :)
      ça, c’est cool !

    • Je pense qu’il suffit de reprendre la boucle du secteur courant :

      <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_artsect(ARTICLES){id_rubrique}{par titre}><li><i><a href="#URL_ARTICLE">#TITRE</a></i></li>
      		</BOUCLE_artsect>
      		<BOUCLE_smenuspip(RUBRIQUES){id_parent}><li><a href="#URL_RUBRIQUE">#TITRE</a>
      			<BOUCLE_artrub(ARTICLES){id_rubrique}{par titre}><li><i><a href="#URL_ARTICLE">#TITRE</a></i></li>
      			</BOUCLE_artrub>
      			<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_artsects(ARTICLES){id_rubrique}{par titre}><li><i><a href="#URL_ARTICLE">#TITRE</a></i></li>
      		</BOUCLE_artsects>
      		<BOUCLE_smenuspipsect(RUBRIQUES){id_parent}><li><a href="#URL_RUBRIQUE">#TITRE</a>
      			<BOUCLE_artrubs(ARTICLES){id_rubrique}{par titre}><li><i><a href="#URL_ARTICLE">#TITRE</a></i></li>
      			</BOUCLE_artrubs>
      			<B_ssmenusect><ul>
      				<BOUCLE_ssmenusect(boucle_smenuspipsect)></BOUCLE_ssmenusect>
      			</ul></B_ssmenusect>
      		</li></BOUCLE_smenuspipsect>
      	</ul>
      <//B_menuspip>
      </BOUCLE_englob>

      Le secteur courant est en haut de la liste et en gras pour le faire ressortir.
      Les articles sont en italique pour les différencier des rubriques. Ils sont éventuellement afichés avant les rubriques.
      Cette boucle fonctionnera quelque soit la page (rubriques, sous-rubriques, voir sous-sous-rubriques et articles).

      Si tu n’as pas de sous-sous rubrique tu peux enlever les boucles récursives (ce qu’il y a entre B_ssmenu et /B_ssmenu et entre B_ssmenusect et /B_ssmenusect.

      Il faut peut-être que tu rajoutes également un tri « par titre » sur les boucles menuspip et menuspipsect.

      Pour afficher plutôt les sous titres tu remplaces « par titre » par « par soustitre » et le #TITRE suivant par #SOUSTITRE dans les boucles qui impliquent (ARTICLES).

      Regarde si le résultat te convient et tiens moi au courant (si c’est en ligne, je veux bien voir le résultat).

    • freetamisu

      Merci beaucoup pour ton aide !
      Je vais mettre en place tout ça et te tiens au courant.
      à+

    • Miss Mopi

      Du nouveau ???

    • nicolas

      salut
      j’ai implémenté ton script initiale et la pas de probleme. Merci beaucoup.
      Par contre sur ton 2d exemple j’ai un décalage sur firefox et ca plante lamentablement sur MIE (comme d’hab) aurai tu une idée

      merci nicolas

    • bon alors il faut reconaitre que j’avais oublié de mettre
      <body onload="setHover('menulist')">

      ce qui faisait que IE ne marchait pas.

      par contre j’ai toujours les espaces sur firefox et un li qui reste bloqué.

      voici les liens pour voir
      http://www.chatenaymalabry.com/m-canet.net/spip-ex-md-menu-eng.php3
      http://www.chatenaymalabry.com/m-canet.net/zz_test.css
      http://www.chatenaymalabry.com/m-canet.net/zz_test2.html

      merci pour ton aide

    • Il y a un gros problème dans ton squelette. Je ne comprends pas du tout la logique de ta liste ni ce que tu cherches à faire.

      Elle devrait être ainsi :

      <ul>
      <li> Rubrique de premier niveau
        <ul>
        <li> Rubrique de deuxième niveau</li>
        </ul>
      </li> <--! Fin du li de premier niveau -->
      </ul>

      A chaque fois que tu as un sous niveau il doit être imbriqué dans le li du niveau supérieur, ceci correspond au fonctionnement correct d’une liste.

      Ton squelette ne construit pas du tout tes listes ainsi c’est pour ça que ça ne fonctionne pas. Il n’y a pas d’imbrication des niveaux, et il y a même un li qui ne se termine pas.

    • nicolas

      j’ai remis ton code tel qu’evoquer ci dessus et retiré mes modifications. Celles-ci avaient pour but de mettre les articles dans un UL/li différent afin que seul les sous-rubriques et les articles de la rubrique en cours apparaissent comme ci dessous

      RUBRIQUE 1
      Sous_RUB1 >
      Sous_RUb2 >
      ART1_RUB1
      ART2_RUB1

      Ton menu propose l’organisation suivante (qui est bien, mais ce n’est pas celle que je desire)
      RUBRIQUE 1
      Sous_RUB1
      Art1_sous_RUB1
      Art2_sous_RUB1
      Sous_rub2
      Art1_sous_RUB2
      Art2_sous_RUB2
      ....

      si tu as une idée, merci de ta patience

      http://www.chatenaymalabry.com/m-canet.net/zz_test2.php3?&id_rubrique=2 (on peut mettre 6 ou 12 pour avoir deS sous sous rubriques)

      nicolas

    • J’entourerai les boucles articles de code php comme ça :

      <?php if (#EXPOSER="on"){ ?>
      <BOUCLE_artsect(ARTICLES){id_rubrique}{par titre}>
      <li><i><a href="#URL_ARTICLE">#TITRE</a></i></li>
      </BOUCLE_artsect>
      <?php }; ?>

      Donc le résultat ne s’affiche que si on est dans la rubrique correspondante. A répéter pour la boucle article dans le niveau du dessous.

      Dis-moi si ça fonctionne (ou pas), je n’ai pas d’environnement de dev en ce moment !

    Répondre à ce message

  • 4
    olivier

    Félicitations à l’auteur !
    Un script utile et simple...sauf que j’ai comme un léger problème !
    J’utilise une feuille de style permettant d’afficher le menu sous forme horizontal, comme le menu d’une application windows.

    Pile poil pour le niveau O et le niveau 1. Par contre, le niveau 2 se retrouve décalé vers la droite, devenant du même coup inaccessible. Problème de réglage de la feuille de style sûrement, mais là je sèche...

    Quel est l’élément permettant de positionner les sous-menus de second niveaux (et plus) ?

    Merci d’essayer de me dépanner.

    Ma feuille de style est la suivante :

    UL#menu LI UL {DISPLAY: none}
    UNKNOWN {DISPLAY: block}
    
    /* cadre entourant les liens du premier niveau */
    UL#menu 
    {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    BACKGROUND: #FFFFFF;
    FLOAT: left;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    FONT: 0.7em Arial;
    WIDTH: 100%;
    PADDING-TOP: 0px;
    LIST-STYLE-TYPE: none;
    border: 1px dotted #999999;
    }
    
    /* barre HR de séparation entre les liens d'un même niveau */
    
    UL#menu HR 
    {
    MARGIN-LEFT: 4px; MARGIN-RIGHT: 4px
    }
    
    /* détermine l'affichage en horizontal des liens de premier niveau */
    
    UL#menu LI 
    {
    PADDING-RIGHT: 1px; 
    DISPLAY: block; 
    PADDING-LEFT: 1px; 
    FLOAT: left; 
    PADDING-BOTTOM: 2px; 
    PADDING-TOP: 2px
    }
    
    /* force retour à la ligne des premiers éléments de liste */
    
    UL#menu LI.first 
    {
    PADDING-LEFT: 2px
    }
    
    /* force le retour à la ligne des derniers éléments de liste */
    
    UL#menu LI.last 
    {
    PADDING-RIGHT: 2px
    }
    
    /* encadrement des éléments de chaque liste*/ 
    
    UL#menu LI A 
    {
    PADDING-RIGHT: 6px;
    DISPLAY: block;
    PADDING-LEFT: 6px;
    PADDING-BOTTOM: 2px;
    COLOR: #000000;
    PADDING-TOP: 2px;
    TEXT-DECORATION: none;
    border: 1px dotted #999999;
    }
    
    /* encadrement au survol des éléments de chaque liste*/ 
    
    UL#menu LI A:hover 
    {
    BORDER-LEFT-COLOR: #f0f0f0;
    BORDER-BOTTOM-COLOR: #999999;
    BORDER-TOP-COLOR: #f0f0f0;
    BORDER-RIGHT-COLOR: #999999;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: dotted;
    border-right-style: dotted;
    border-bottom-style: dotted;
    border-left-style: dotted;
    COLOR : #FFFFFF;
    BACKGROUND: #999999 ;
    }
    
    /* retour à ligne des éléments de liste de second niveau width :160px*/
    
    UL#menu UL
    {
    PADDING-RIGHT: 0px; 
    PADDING-LEFT: 0px; 
    Z-INDEX: 10; 
    BACKGROUND: #FFFFFF url(imgmenuencascade/m1.gif) repeat-y -160px 0%; 
    PADDING-BOTTOM: 0px; 
    MARGIN: 0px; 
    WIDTH: 160px; 
    PADDING-TOP: 0px;
    LIST-STYLE-TYPE: none; 
    POSITION: absolute;
    }
    
    /* position des éléments de liste  */
    
    UL#menu UL UL 
    {
    Z-INDEX: 11; LEFT: 155px; TOP: 0px
    }
    
    /* alignement final des éléments de liste verticale */
    
    UL#menu UL LI 
    {
    PADDING-RIGHT: 0px; 
    DISPLAY: inline; 
    PADDING-LEFT: 0px; 
    FLOAT: none; 
    PADDING-BOTTOM: 0px; 
    MARGIN: 0px; 
    PADDING-TOP: 0px; 
    POSITION: relative;
    }
    
    /* aspect encadrement des éléments de liste verticale */
    
    UL#menu UL LI A 
    {
    PADDING-RIGHT: 0px;
    DISPLAY: block;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    WIDTH: 160px;
    PADDING-TOP: 0px;
    border: 1px dotted #999999;
    }
    
    /* aspect des éléments de liste verticale */
    
    UL#menu UL LI A SPAN 
    {
    BORDER-RIGHT: medium none; 
    PADDING-RIGHT: 6px; 
    BORDER-TOP: medium none; 
    DISPLAY: block; 
    PADDING-LEFT: 6px; 
    PADDING-BOTTOM: 2px; 
    MARGIN: 0px 2px; 
    BORDER-LEFT: medium none; 
    WIDTH: 156px; 
    CURSOR: hand; 
    PADDING-TOP: 2px; 
    BORDER-BOTTOM: medium none;
    }
    
    /* remplissage du fond des éléments de liste verticale */
    
    UL#menu UL LI A.next SPAN 
    {
    BACKGROUND: url(imgmenuencascade/fleche.gif) no-repeat 0% 50%;
    }
    
    /* non découvert -160px */
    UL#menu UL LI A.next:hover SPAN 
    {
    BACKGROUND-POSITION: -160px 50%;
    }
    
    /* aspect au survol des liens des éléments de liste verticale*/
    UL#menu UL LI A:hover SPAN 
    {
    COLOR: #ffffff;
    BACKGROUND-COLOR: #999999;
    }
    
    /* non découvert */
    
    UL#menu UL LI.first 
    {
    PADDING-LEFT: 0px
    }
    
    /* non découvert */
    UL#menu UL LI.first A 
    {
    BACKGROUND: url(imgmenuencascade/m1.gif) no-repeat -320px 0%; PADDING-TOP: 2px
    }
    
    /* non découvert */
    
    UL#menu UL LI.last 
    {
    PADDING-RIGHT: 0px
    }
    
    /* non découvert */
    UL#menu UL LI.last A 
    {
    BACKGROUND: url(imgmenuencascade/m1.gif) no-repeat left bottom; 
    PADDING-BOTTOM: 2px
    }
    • Ton exemple est en ligne ? Je trouve ça plus facile à dépanner directement sur la page.

      Dans tous les cas, je regarde ça ce soir.

    • olivier

      Non, il s’agit d’un intranet hospitalier.

      Merci en tout cas de prendre sur ton temps pour tenter de m’aider.

      Une dernière question si tu m’y autorise : ce menu apparait dans une table, configurée pour que les cellules soient centrées. Hors le menu s’affiche désespérement à gauche...Une idée ?

      J’arrive à maîtriser le HTML, un peu le PHP, et mieux SPIP, mais par contre je rete d’une nullité crasse pour les feuilles de styles complexes. Un miracle ?

      Merci d’avance, olivier.

    • Pourrais-tu enregsitré et m’envoyé une page produite par ton site ou une page squelette complète (voire les deux), je n’arrive pas à reproduire ton problème.

      Cependant quelques éléments :

      ton UNKNOWN au début est en fait ul#menu li:hover>ul sinon le menu ne fonctionne pas sous les navigateurs récents.

      Evite de multiplier les padding-top, padding-bottom, etc... (margin, border-style, ...) surtout si c’est pour leur donner la même valeur. padding : 0 ; suffit (pas besoin de préciser de mesure quand il s’agit de 0). Tu peux aussi dire : padding 6px 2px ; (6 en haut et en bas, 2 à gauche et à droite). Ou encore padding : 1px 2px 3px 4px ; tu pars de 1px en haut puis tu tournes dans le sens des aiguilles d’une montre (droite bas gauche).

      Si le menu se met à gauche ça vient d’un float:left, essaye en enlevant le float : left sur ul#menu (mais pas sur ul#menu li).

      Envois-moi tes éléments par mail, je pourrais voir le problème dans son contexte, ce sera plus facile pour moi.

    • olivier

      Merci de ton aide.

      Je t’envoi ça.

      J’ai modifié le UNKNOWN ainsi que le FLOAT : pas de changement.

      Tout le CH tourne sur IE 6.

      Merci encore, olivier.

    Répondre à ce message

  • Encore merci Miss Mopi :-)

    J’ai fais une adaptation de ce menu sur www.biospip.org : style « Menu dynamique ». J’y ai ajouté la fameuse balise #EXPOSER qui marche à merveille sous SPIP 1.8 pour identifier la hierarchie de rubriques dans laquelle on se trouve (et l’indiquer par un changement de couleur dans le menu par exemple).

    -  Le squelette du menu : http://biospip.org/biospip/inc_menu.html ;
    -  La feuille css du menu : http://biospip.org/biospip/biocss/d....

    Voilà, et encore merci pour tout Miss Mopi.

    Répondre à ce message

  • 5

    Super ! Je connaissais ce menu tout CSS. J’ai tenté de le faire fonctionner sous IE avec du javascript, et à ma grande honte, j’avoue avoir abandonné au bout d’un jour... Bravo donc à Ibilab ! Et à toi de nous le présenter adapté à SPIP.

    Pour IE Mac, c’est vraiment une daube. Microsoft de toute façon a abandonné son développement, et les adeptes du Mac semblent migrer vers Safari.

    • J’ai testé. Le javascript n’est malheureusement pas très stable, avec IE évidemment. Dès qu’on modifie un tant soit peu la feuille de style, IE déraille. Les onmouseover et onmouseout fonctionnent mal.

    • Il faut faire attention à ce que tu modifies dans la feuille de styles c’est clair.

      Envois-moi ton test et je regarderai pourquoi ça a déconné si tu veux.

    • J’ai légèrement modifié menuderoulant.js, car IE n’ouvre pas certains menus sur un onmouseover et l’ouvre sur un onmouseout. Maintenant ça fonctionne à peu près, à cette différence près que IE n’affiche pas le 3e niveau de menu et pas non plus mes menus #EXPOSER. Mais c’est pas grave, z’ont qu’à se mettre sous Mozilla ou Safari...

      Voici ma version de menuderoulant.js (espérons que SPIP-contrib ne va pas l’afficher en grands caractères...). J’ai scindé en 2 hover() pour IE sache bien ce qu’il faut faire selon le onmouseout et le onmouseover :

      function mouseOver(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';
                  }
              }
          }
      }
      
      function mouseOut(obj) {
          if (document.all) {
              UL = obj.getElementsByTagName('ul');
              if (UL.length > 0) {
                  sousMenu = UL[0].style;
                  if (sousMenu.display && sousMenu.display != 'none') {
                      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(){
                  mouseOver(this);
              }
              LI[i].onmouseout = function(){
                  mouseOut(this);
              }
          }
      }
    • J’avoue être étonnée que tu ais dû modifier le js... J’ai testé ce menu sous toutes les coutures avec IE et il fonctionne très bien. Aurais-tu d’autres javascripts avec lesquels il pourrait rentrer en conflit ?

    • Oui, effectivement le script fonctionne bien lorsque je désactive le script de Weborama, que je trouve bien pratique pour avoir certaines infos qui ne sont fournies par aucun autre compteur. J’ai écrit à Weborama pour en savoir plus...

      Ca veut dire que les 2 scripts manquent un peu de fiabilité. En attendant je vais essayer de bricoler... Avec le script que j’ai posté ci-dessus, ça marche mieux, mais il y a encore le 1er mouseover qui ne se déclenche pas. C’est pas bien génant, le visiteur ne s’en aperçoit pas, mais c’est pas normal.

    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