Page 1 sur 1
comment faire un "super menu déroulant" ?
Publié : 29 mars 2006, 16:23
par ithaque
Bonjour
j'ai réussi à me faire un petit menu en utilisant le rollover. content de moi
par contre mainenant je voudrai faire un menu déroulant avec des animations du meme type "rollover".
Pour etre plus clair, je voudrai faire un menu comme celui du forum geckozone avec portail/telechargement/extensions/.... et des menus qui apparaissent en dessous.
Dans mon esprit, il faudrait faire plusieurs images , une image pour chaque lien. Mais je ne sais pas comment procéder ensuite....
Qqn a une solution ?
merci d'avance
pour info, je travaille avec NVu
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.0; fr-FR; rv:1.7.5) Gecko/20041108 Firefox/1.0
Publié : 29 mars 2006, 16:47
par chinon37
Va voir ce que propose Kaze:
http://fabiwan.kenobi.free.fr/css/NestedLists.html#
Message envoyé avec : une adresse
Publié : 29 mars 2006, 18:51
par Kazé
Sur
cette page il y a plusieurs types de menus, tu les choisis en actionnant le menu en haut à droite.
Coté HTML, le principe est très simple, c'est une simple liste imbriquée ; c'est uniquement les feuilles de style qui modifient l'apparence et le comportement du menu.
Les menus "
drop-down" et "
chinon37" correspondent peut-être à ce que tu veux, auquel cas il te suffit de télécharger les feuilles de styles correspondantes.
Attention, ces menus déroulants requièrent JavaScript pour IE5 et 6.
Publié : 29 mars 2006, 19:58
par SB
Publié : 29 mars 2006, 20:53
par ithaque
le menu drop-down de kaez, il déconne pour moi
je ne peux pas cliquer sur un lien de la liste, elle n'apparait que si le curseur est sur la tet de liste, et cette liste disparait quand je bouge un peu....
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1
Publié : 29 mars 2006, 21:13
par Kazé
Alsacréations est clairement la référence, il serait malvenu que je les critique, surtout vu la tronche de mon site web.
Mais : leurs menus en CSS sont basés sur des listes de définitions (DL/DT/DD), ce qui a deux gros inconvénients
- du point de vue sémantique, c'est incorrect ;
- il faut coller du code JavaScript sur chaque item de menu pour que ça fonctionne.
Mes menus n'ont pas la prétention d'être beaux (sauf celui de Chinon évidemment

) mais ils sont simples à adapter à son site : une bête liste imbriquée, une feuille de style et ça roule. On peut tout faire dans Nvu sans se perdre dans le code source.
Notez qu'avec Firefox, Opera et IE7, ces menus n'ont pas besoin de JavaScript ; il n'y a qu'avec IE 5 et 6 qu'il faut utiliser un
patch JavaScript (à coller
une seule fois dans l'en-tête de la page).
Un autre avantage est qu'ils sont compatibles avec des navigateurs texte (pensez à l'accessibilité pour les non-voyants...).
ithaque a écrit :le menu drop-down de [Kazé], il déconne pour moi
Ah oui, tiens. Ca fonctionnait bien avec FF 1.0.x...
PS: ayé c'est corrigé. Avec un petit "z-index: 10" ça retombe en marche
drop-down.css
Publié : 29 mars 2006, 21:15
par ithaque
désolé kazé d'avoir égratigné ton nom
mais drop-down ca marche toujours pas
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1
Publié : 29 mars 2006, 21:19
par Kazé
Tu as rafraîchi ton navigateur (F5) ?
Ouh là, je viens de voir que ça merdouille sous IE5, je vais corriger ça.
Publié : 29 mars 2006, 21:22
par ithaque
ok cool ca marche
mais par contre, si je veux le code de cette page, en faisant
affichage/code source de la page j'ai le code du menu "aucune"
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1
Publié : 29 mars 2006, 21:25
par Kazé
Le code HTML ne contient que la liste. Pour avoir le style "drop-down", il faut que tu utilises cette feuille de style :
http://fabiwan.kenobi.free.fr/css/menus/drop-down.css
Enregistre-la sur ton disque, et déclare-la comme feuille de style externe dans tes pages, ça va transformer la bête liste en menu déroulant.