Discussion :

[senacle]

Tout est dans le sujet.

Quelle est la meilleure façon de créer des menus ?

[Janitrix]

Et bien sachant que c'est possible en CSS, il vaut mieux le faire en CSS car les fonctionnalités de base d'un site, comme la navigation, ne doivent pas reposer sur Javascript. La raison est simple : javascript peut être désactivé, ou ne pas être disponible sur le navigateur.

Donc il est préférable de faire un menu en CSS, si on parle bien sûr des menus déroulants.

Voir le tutoriel > Des menus déroulants grâce aux CSS

Bon courage.

[senacle]

Effectivement, c'est plus sûr de ne pas utiliser javascript.
Mais j'ai pu voir que la pseudo-classe :hover n'est pas forcément reconnue par IE et que dans ce cas, il faut utiliser du javascript.

Peut-on quand même s'en passer ?

[c_s_s]

:hover n'est pas reconnu par IE6 quand cet attribut est placé ailleurs que sur un lien. Sinon ça marche très bien.

[Janitrix]

La pseudo classe :hover n'est pas reconnue par IE lorsqu'elle n'est pas placée sur des liens. Sachant qu'un menu est généralement constitué de liens, ce n'est pas vraiment un problème. Mais dans le cas où la construction de ton menu empêche une utilisation sous IE, tu peux, soit repenser la construction du menu, soit arranger en Javascript. C'est envisageable mais on préfère éviter en général.

Après c'est à toi de voir, en fonction de tes utilisateurs et de tes choix personnels

[senacle]

Dans l'exemple que tu donnes (Des menus déroulants grâce aux CSS) et dont je me suis déjà inspiré, le :hover est utilisé sur la balise li.

Je vais voir pour essayer de le passer sur la balise a.

[HiRoN]

Pas mal d'exemple de menu en CSS ici...

[senacle]

Voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
#sous_menu_niv1 li a:hover {
	background-color: #3399ff;
	color:#ffffff;
}

Ca fonctionne.

Plus loin :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
#sous_menu_niv1 li:hover > .sous_menu_niv2 {
	display: block;
}

Ok sous FF, mais si je mets :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
#sous_menu_niv1 li a:hover > .sous_menu_niv2 {
	display: block;
}

Ca n'affiche plus le sous_menu_niv2 sous FF.