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

Publié le : 23 février 2005 – Dernière modification le 21 décembre 2021 – par Miss Mopi – 90 commentaires

1
2
3
4
5
32 votes
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

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

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

26 discussions

  • 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

    • Miss Mopi

      (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
    claude

    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

    • Miss Mopi

      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 ?

    • claudeD

      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

    • nicoas

      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

    • Miss Mopi

      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

    • Miss Mopi

      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
}
    • Miss Mopi

      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.

    • Miss Mopi

      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

  • Bionet

    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
    bmr

    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.

    • bmr

      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.

    • Miss Mopi

      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.

    • bmr

      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 ?

    • bmr

      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