Discussion :

[laurentSc]

J'aimerais savoir comment faire un menu déroulant horizontal avec des sous-sous-menus. Merci d'avance.

[icer]

En html ça n'existe pas. Tu dois chercher du côté de JavaScript.

[XtoX]

Tu peux faire ça en css pur.

[MasterOfChakhaL]

Salut,

Si tu veux que cela fonctionne sur la plupart des navigateurs, tu ne couperas pas au javascript

EDIT: en cherchant un peu, on trouve...
http://www.developpez.net/forums/sho...25#post1442425

[FraK]

bof
le mieux pour du déroulant reste effectivement le jscript
et surtout le flash
avec ca
tu t'éclates comme un chti fou ;p

[XtoX]

On peut tout faire en css et le rendu est identique sous IE6 et Firefox. C'est un peu compliqué, mais ça apprend énormément de chose sur css (et force est de constater que c'est très puissant).

[icer]

Attention au flash pour le référencement de ton site. Les spiders des moteurs de recherche ne le verront pas et ne trouverons donc pas les pages de te ton site à travers ton menu.

Par contre la solutions avec le css et JS est excellente pour le référencement.

[MasterOfChakhaL]

On peut tout faire en css et le rendu est identique sous IE6 et Firefox. C'est un peu compliqué, mais ça apprend énormément de chose sur css (et force est de constater que c'est très puissant).

Si tu as un exemple de menu déroulant à plusieurs niveaux en pur css à nous montrer, je pense que ca interessera énormément de gens...
Moi le premier...

[FraK]

carément !!!
si ca peux éviter de se faire fondre le cerveau sur du flash, je suis preneur également

[XtoX]

Je n'ai rien inventé... Vous trouverez tous ce que vous voulez sur les css et même plus sur le site du pape du css : Eric Meyer. Le Môssieur CSS du W3C.

Pour ce qui est du menu déroulant, voici le lien vers les sources (c'est un peu gros pour tout mettre dans une balise code) : http://more.ericmeyeroncss.com/projects/06/

[icer]

C'est pas mal, en plus il n'y a pas une ligne de JS!

Et ça marche même sous IE. (un petit bug d'affichage tout de même)

[MasterOfChakhaL]

Note tout de même qu'il y a un fichier htc pour simuler le hover.
Donc si on desactive les scripts, on retombe sur le même problème...

[icer]

Tiens tiens, je ne l'avais pas vu ce .htc pour faire du hover sous IE.

Finalement on n'en revient au même point :
Menu HTML impossible sans JS (pour la compatibilité).

Ah! quand est-ce que IE implémentera les normes du W3C!

[laurentSc]

Je n'ai rien inventé... Vous trouverez tous ce que vous voulez sur les css et même plus sur le site du pape du css : Eric Meyer. Le Môssieur CSS du W3C.

Pour ce qui est du menu déroulant, voici le lien vers les sources (c'est un peu gros pour tout mettre dans une balise code) : http://more.ericmeyeroncss.com/projects/06/

Merci pour cette adresse. J'ai effectivement récupéré un code de CSS-Driven Drop-Down Menus (ch0615.html) que j'ai adapté à mon besoin, mais je n'arrive pas (malgré de nbx essais) à élargir la taille des colonnes pour faire tenir le texte sur une seule ligne. Y a-t-il moyen de le faire, et si oui, peux-tu m'indiquer ce qu'il faut changer ds le code (je ne mets que la partie du code à changer) ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
 <style type="text/css">
body {background: #EEE; color: #000;
behavior: url(csshover.htc);} /* WinIE behavior call */
h1 {color: #AAA; border-bottom: 1px solid; margin-bottom: 0;}
#main {color: #CCC; margin-left: 7em; padding: 2em 0 1px 5%;
border-left: 1px solid;}
div#nav {float: left; margin: -1px 0 0 7em;
background: #FFF; border: 1px solid #AAA;}
div#nav ul {margin: 0; padding: 0; background: white;
border: 1px solid #CCC; border-width: 0 1px;}
div#nav li {position: relative; list-style: none; margin: 0;
float: left; width: 7em; line-height: 1em;}
div#nav li:hover {background: #EBB;}
div#nav li.submenu {background: url(dropmenu.gif) 95% 50% no-repeat;}
div#nav li.submenu:hover {background-color: #EDD;}
div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em;
text-decoration: none; width: 6.5em;}
div#nav>ul a {width: auto;}
div#nav ul ul {position: absolute; width: 7em;
display: none;}
div#nav ul ul li {border-bottom: 1px solid #CCC;}
div#nav li.submenu li.submenu {background: url(submenu.gif) 95% 50% no-repeat;}
div#nav li.submenu li.submenu:hover {background-color: #EDD;}
div#nav li.submenu li.submenu:hover {background-color: #EDD;}
div#nav ul.level1 li.submenu:hover ul.level2, div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}
div#nav ul.level2 {top: 1.5em; left: -1px;}
div#nav ul.level3 {top: -1px; left: 7em;
border-top: 1px solid #CCC;}
  </style>

Merci d'avance.

[MasterOfChakhaL]

A première vue, je dirais que partout où tu vois marqué 7em, il faut modifier la valeur à ta convenance...

[XtoX]

Note tout de même qu'il y a un fichier htc pour simuler le hover.
Donc si on desactive les scripts, on retombe sur le même problème...

Je ne suis pas certain que si l'on désactive les scripts javascript cela ne fonctionne pas. En effet, le fichier htc, bien que comportant du code javascript (pas ma faute si IE n'implémente pas le comportement hover ), n'est pas présenté comme tel. Il est appelé via une propriété css spécifique à IE : bahavior, mis dans le sélecteur html. Ce serait à tester.

[MasterOfChakhaL]

J'ai testé avant d'écrire cela (avec IE6).

L'option pour désactiver le javascript n'est pas très claire je trouve mais j'ai réussi à ne pas le faire marcher juste en indiquant un niveau "élevé" de sécurité.

Je t'accorde tout de même que je l'ai bien cherché, mais ca reste possible...

[tigunn]

Je regardais pour un besoin perso, ce post.
Sous IE 6 il faut désactiver l'option "active scripting" pour que le menu ne fonctionne plus.
Pour Firefox 1.5 si l'on désactive Javascript le menu fonctionne toujours .

LA grande Question : c'est que font les administrateurs système qui ont un parc informatique avec IE6 ou moins pour désactiver le javascript?

[icer]

Ils installent FireFox. (s'ils ont malins)