Discussion :

[thibaud74]

Bonjour !
J'utilisais un menu fait avec javascript par dreamweaver il y a quelques années, mais il n'est pas compatible avec firefox et donc sans doute les standards... Je voudrais donc le réaliser avec CSS. J'ai cherché divers scripts sur le web, mais ils ne me satisfont pas car il s'agit de menus en textes.
A cette adresse...
http://quelsmondes.free.fr/ulysse/index.html
...vous verrez qu'il s'agit d'un menu de rollover. En apparence, on a un bouton isolé. Au survol, le bouton se transforme en une image qui indique trois ou quatre choix dans un menu.
En javascript, le truc consistait à déclarer une zone de survols, elle-même divisée en espaces cliquables.
Est-ce possible de réaliser un tel menu déroulant avec CSS ?

Merci de l'aide,
Thibaud.

[Halleck]

Texte ou image, ça ne change rien en pratique.

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
 
Etat normal:
.menu {
     image de fond => background:url(... ou background-image:...
}
 
Etat survolé
.menu:hover {
     une autre image => background:url(... ou background-image:...
}
 
Au survol, afficher la liste de liens :
.menu:hover ul {
     display:block;
}
liste de liens, caché par défaut;
.menu ul {
     display:none;
}

Page HTML:

Code :

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

1
2
3
4
5
6
 
MENU :
<div class="menu">
     Lien1
     <ul class="menu">Liste de liens, caché par défaut</ul>
</div>

Si tu tiens vraiment à avoir des images au lieu du texte, tu peux attribuer des id à tes liens de menu:
CSS >
.menu#1 { l'image voulue, et même opération pour le survol }
HTML >
<div class="menu" id="1">&nbsp;</div>
, etc...



Il y a sans doute plus élégant, mais là je pense que ça marche (j'espère ) pour tous les navigateurs

Bon courage !

PS : il y a dans les Sources de developpez.com un exemple complet de menu, il suffit juste de le transposer pour des images.