Menu horizontal déroulant à plusieurs niveaux : pb avec IE 7

Bonjour,

Le menu déroulant que tu utilises me semble reposer sur le fait que tel ou tel navigateur n'est pas censé comprendre tel ou tel sélecteur CSS (le sélecteur d'enfants > notamment). D'ailleurs, je pense qu'il doit y avoir une surcouche Javascript quelque part, au moins pour Internet Explorer 6, non? Sinon, je ne vois pas par quelle magie noire ce menu déroulant arrive à fonctionner avec IE6.

En tout cas, si le code ce menu chercher à faire le tri entre les navigateurs via l'utilisation de sélecteurs «avancés», c'est un bon moyen de cassage de gueule. Une nouvelle version d'un navigateur qui ne supportait pas tel sélecteur peut tout à coup très bien le comprendre... par exemple IE7, qui s'avère plus capable que grand-père IE6.

Bref, pourrait-on voir le code complet du menu (HTML, CSS et Javascript) et/ou la référence du menu utilisé?

Si le menu en question ne tient pas la route, peut-être faudra-t-il chercher ailleurs un script de qualité? Par exemple:
http://www.htmldog.com/articles/suckerfish/dropdowns/ (première partie)

lcastou a écrit :
Si si, il n'y a pas de javascript.

Et donc pas de déroulement possible pour Internet Explorer 6.

Les explications du menu que tu as utilisé disent:

a écrit :
This works in Firefox, Opera 9, Mozilla, Netscape 8 and IE7 (not IE5.x or IE6). But IE7 does need a HACK! Is this the first of many?

Without this hack IE7 adds a margin beneath the sub link on :hover. I have had to hack this to remove the margin but am still trying to see exactly why IE7 does this and if there is another way round it without the need for this hack.

20th September 2006

Prompted by Claire - www.tanfa.co.uk I have been looking at this IE7 bug again. The answer is to float:left; the <li>s. For some unknown reason IE7 is putting a bottom margin on these if the float is omitted.

Donc voilà, si tu suis bien ce modèle de Stu Nicholls le menu devrait fonctionner avec IE7 (moyennant un petit correctif) mais ne fonctionnera pas avec IE6.
Modifié par Florent V. (07 Feb 2008 - 01:25)

salut

ah vi tu as raison, c'est l'inverse en fait... je viens de m'apercevoir que c'est IE 7 que j'ai et pas IE 6... lol
faut pas se moquer, je bosse avec mon portable professionnel depuis que j'ai donné mon pc à mon pôpa... et j'ai pas tout exploré dedans...
bon, ben je n'ai plus qu'à trouver un menu qui soit à la fois compatible FF et tous IE... font ch... chez 'crosoft, peuvent pas faire comme tout le monde !

Bon, j'ai opté finalement pour ton script que j'ai adapté. (même si je hais le JS...)
Maintenant j'ai trois soucis :
* sous IE comme FF, la liste déroulante de niveau 1 se déroule en décalé
* sous FF uniquement, la liste déroulante de niveau 2 se déroule à moitié par dessus la liste déroulante de niveau 1
* avec mon image "fleche" (cf code html dans le 1er post), je n'arrive pas à la mettre en face du lien concerné, à 2 px du bord du "li". j'ai essayé en asbolute, en relatif et en float. Le tout aussi en incluant "img" dans "a" ou en le mettant à la suite.

Voici ma feuille CSS :

#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 25px;
	color: #ffffff;
	font-weight: bold;
	font-size: 11px;
	background: transparent url(/images/bg_menu.gif) repeat-x 0 -25px ;	
	z-index: 1000;
}

#nav a {
	display: block;
	width: 128px;
	color: #ffffff;
	font-weight: bold;	
		background: transparent url(/images/bg_menu.gif) repeat-x 0 -25px ;
}
#nav a:hover {
	display: block;
	width: 128px;
	color: #ffffff;
	font-weight: bold;	
	background:transparent url(/images/boutonbg.gif) repeat;
}

#nav li { /* all list items */
	float: left;
	width: 128px; /* width needed or else Opera goes nuts */

}

#nav li ul { /* second-level lists */
	position: absolute;
	background: transparent url(/images/bg_menu.gif) repeat-x 0 -25px ;
	width: 128px;
	margin: 0px 0px 0 0px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li ul ul { /* third-and-above-level lists */
	margin: -25px 0px 0 65px;
		line-height: 25px;
}

#nav li:hover ul ul, #nav li.sfhover ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}
#nav img{position:relative;top:0px;right:3px; border:0px;}

Merci d'avance

Laetitia

Ben l'ennui c'est que le menu multi niveaux n'est visible que dans la partie membre de mon site...

mon site

Voici en capture d'écran :
http://www.annees-ffa.com/pbmenu1.jpg

http://www.annees-ffa.com/pbmenu.jpg

L'exemple part de la racine ANNUAIRE pour défiler jusqu'au plus bas niveau.

Merci pour ton aide
Modifié par lcastou (07 Feb 2008 - 20:52)

Eh bien, dans ce cas tu te connectes avec un compte auquel tu as accès, tu vas sur une page où on trouve ce menu, tu affiche le code HTML de la page, et tu l'enregistre comme un fichier HTML statique placé au même niveau dans l'arborescence du site. Si besoin, tu supprimes les informations qui ne doivent pas être divulguées. Et voilà, tu as une page de test en ligne dont tu peux communiquer l'URL.

Parce que bon, en capture d'écran... ben je peux te dire que je constate qu'il y a un problème, et basta.

ok ça donne :

page test
Modifié par lcastou (07 Feb 2008 - 21:16)

lcastou a écrit :
* sous IE comme FF, la liste déroulante de niveau 1 se déroule en décalé
* sous FF uniquement, la liste déroulante de niveau 2 se déroule à moitié par dessus la liste déroulante de niveau 1

Ça ne correspond pas au rendu que j'ai. Ce que j'obtiens:

1. Avec Firefox, Safari et Opera, le premier sous-menu est bien placé, et le second sous-menu est placé à mi-chemin vers la droite.
Le problème se situe ici:

#nav li ul ul {
	margin: -25px 0px 0 [b][#red]65px[/#][/b];
}

Il faudrait une marge à gauche de 128px pour avoir un rendu correct.

2. Avec Internet Explorer (6 et 7), on a un bug dans le positionnement initial des ul positionnés en absolu. En gros, leur bord gauche est placé au niveau du centre du parent. Et il semble que le left: auto n'y change rien.

Je ne sais pas pourquoi ils n'utilisent pas left: 0 d'ailleurs.
Ah si j'ai compris: c'est parce qu'ils n'ont pas positionnés les li de premier niveau en relatif. Il suffit d'insérer le code suivant:

#nav li {position: relative;}
#nav li li {position: static;}

et on peut utiliser un left: 0; à la place du pas très fiable (dans IE) left: auto.

Essaie ça pour voir.

Je sais pas si on te l'a déjà dit, mais tu es un GENIE !!!!!
Merci beaucoup pour ton aide !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

pour la peine je te fais une grosse bise !

j'abuse...
...pour l'histoire de la flèche, tu en penses quoi?
#nav img

merci

Pour l'histoire de la flèche... j'en pense que tu n'as pas d'élément img qui soit un enfant ou descendant de l'élément qui porte l'identifiant "nav" (bref, pas d'élément img dans ton menu), et donc ce sélecteur ne sélectionne absolument rien.

Je vois bien l'image en question dans le code HTML que tu donnes dans ton premier message, mais elle n'y est plus dans la page de test en ligne.

oui, je l'ai enlevé par la suite car je n'arrivais pas à la positionner.
Mais à priori le code donné en premier reste valable.
c'est le CSS qui est faux, et que je n'arrive pas à corriger.


Merci d'avance et bonne journée

Florent,

Merci d' avoir posté l'adresse de ce script :

http://www.htmldog.com/articles/suckerfish/dropdowns/

C'est génial : j'avais de grosses contraintes pour un site que je développe en ce moment :

- Une compatibilité IE6 impérative

- un menu entièrement dynamique (j'utilise un CMS, Joomla!), donc pas de javascript intrusif, et pas de sous-menu vertical (un diaporama flash est juste au-dessous).

Et là, j'ai trouvé mon bonheur, encore merci !

Nodesign

lcastou a écrit :
Je ne sais pas si c'est très clair tout ça....

Si si, c'est clair. Mais pourquoi ne pas mettre l'image en question en background des liens, par exemple? Ou si ce sont les liens qui portent l'image de fond, faire deux images de fond pour les liens:
- une normale;
- une avec flèche incrustée.

Sauf erreur de ma part, les liens n'ont pas d'image de fond.

Tu peux aussi travailler avec une image dans le code HTML, mais dans ce cas il faut positionner l'image en absolu (pas en relatif) et positionner le li en relatif si ça n'est pas déjà le cas. C'est jouable, mais c'est plus lourd.