Menu en CSS, Javascript ou les 2 ?

Tout est dans le sujet.

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

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.

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 ?

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

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 ;)

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.

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

Voici le code :

Code:

---

1 2 3 4 5

#sous_menu_niv1 li a:hover { background-color: #3399ff; color:#ffffff; }

---

Ca fonctionne.

Plus loin :

Code:

---

1 2 3 4

#sous_menu_niv1 li:hover > .sous_menu_niv2 { display: block; }

---

Ok sous FF, mais si je mets :

Code:

---

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.

Citation:

---

Envoyé par senacle

Ok sous FF, mais si je mets :

Code:

---

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.

---

Ca doit fonctionner quand tu passes sur le texte du lien, non ?

Ben non, rien à faire !

Citation:

---

Envoyé par HiRoN

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

---

:D

Super ce site !
Je vais sans doute trouver de quoi m'inspirer.

Peut-être que le .sous_menu_niv2 ne dépend pas directement du lien. Si c'est ça, c'est normal qu'il ne s'affiche pas au survol du lien. ;)

Code:

---

1 2 3

#sous_menu_niv1 li:hover > .sous_menu_niv2 { display: block; }

---

Cette ligne signifie : afficher le sous niveau 2, enfant d'une liste, lorsque la liste est survolée.
La liste étant elle même descendante de #sous_menu_niv1.

Code:

---

1 2 3

#sous_menu_niv1 li a:hover > .sous_menu_niv2 { display: block; }

---

Cette ligne signifie : afficher le sous niveau 2, enfant d'un lien, lorsque le lien est survolé.
Le lien étant lui même descendant d'une liste qui elle même est descendante de #sous_menu_niv1.


Je ne sais pas si je suis clair à propos des "enfants" et des "descendants". :aie:

Voici la structure du html :

Code:

---

1 2 3 4 5 6 7 8 9

<ul id="sous_menu_niv1"> <li><a href="#">Catégorie</a> <ul class="sous_menu_niv2"> <li><a href="xxx">&raquo; XXX</a></li> <li><a href="yyy">&raquo; YYY</a></li> </ul> </li> ....

---

Ca semble correct pourtant ?

Ton sous_menu_niv2 ne dépend pas du lien, il dépend de la liste.
Le lien et le sous_menu_niv2 sont au même niveau tous les deux, et sont des enfants de la liste.

Code:

---

1 2 3 4 5 6 7 8 9

<ul id="sous_menu_niv1"> <li> <a href="#">Catégorie</a> <ul class="sous_menu_niv2"> <li><a href="xxx">&raquo; XXX</a></li> <li><a href="yyy">&raquo; YYY</a></li> </ul> </li> ....

---

sous_menu_niv2 n'est pas enfant de <a href="#"> ?

Non, ils sont au même niveau.

Code:

---

1 2	<a href="#"></a> <ul class="sous_menu_niv2"></ul>

---

Pour que sous_menu_niv2 soit enfant du lien il aurait fallu que le code soit ainsi :

Code:

---

1 2 3

<a href="#"> <ul class="sous_menu_niv2"></ul> </a>

---

J'ai trouvé ceci : http://www.opencube.com/download.asp

Ca peut aider pas mal de monde pour créer des menus en CSS (il y a des effets supplémentaires en javascript, mais on peut s'en passer)