Discussion :

[muppetshow]

Bonjour,
Etant largement débutant, j'ai récupérer, sur un site que je ne retrouve pas d'ailleurs, un tuto concernant les menus déroulants en css.

Je l'ai adapté à mon besoin, il fonctionne bien, par contre je rencontre un problème que je ne sais pas résoudre.

Lorsque je clique sur le choix sélectionné, le fenêtre du menu reste active, je ne sais donc potentiellement pas que l'action a déjà été lancée

Voici ma feuille de style

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
#monmenu {
	FONT-WEIGHT: bold; 
	FONT-SIZE: 90%; 
	FONT-FAMILY: trebuchet ms,arial,tahoma,verdana,sans-serif
}
#monmenu UL UL {
	BORDER-RIGHT: #b0b0b0 1px solid; 
	PADDING-RIGHT: 0px; 
	BORDER-TOP: #b0b0b0 1px solid; 
	DISPLAY: none; 
	PADDING-LEFT: 0px; 
	LEFT: 194px; 
	PADDING-BOTTOM: 0px; 
	MARGIN: 0px; 
	BORDER-LEFT: #b0b0b0 1px solid; 
	PADDING-TOP: 0px; 
	BORDER-BOTTOM: #b0b0b0 1px solid; 
	POSITION: absolute; TOP: -1px
}
#monmenu LI {
	PADDING-RIGHT: 2px; 
	PADDING-LEFT: 2px; 
	PADDING-BOTTOM: 2px; 
	MARGIN: 0px; 
	FLOAT: left;
	WIDTH: 190px; 
	PADDING-TOP: 2px; 
	LIST-STYLE-TYPE: none; 
	POSITION: relative; 
	BACKGROUND-COLOR: #e0e0e0
}
#monmenu LI:hover {
	BACKGROUND-COLOR: #ffff70
}
#monmenu LI.sfhover {
	BACKGROUND-COLOR: #ffff70
}
#monmenu LI A {
	TEXT-DECORATION: none
}
#monmenu LI:hover UL.niveau2 {
	DISPLAY: block
}
#monmenu LI LI:hover UL.niveau3 {
	DISPLAY: block
}
#monmenu LI.sfhover UL.niveau2 {
	DISPLAY: block
}
#monmenu LI LI.sfhover UL.niveau3 {
	DISPLAY: block
}
#monmenu LI.plus {
	BACKGROUND-POSITION: right 50%; 
	BACKGROUND-IMAGE: url(illustrations/fdroite.gif); 
	BORDER-BOTTOM: #b0b0b0 1px solid; 
	BACKGROUND-REPEAT: no-repeat
}

et la manière dotn sont définis mes lignes de menu

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
 
<DIV id=monmenu style="PADDING-LEFT: 145px">
	<UL class=niveau1>
		<LI>Administration
		<UL class=niveau2 style="LEFT: 0px; TOP: 22px">
			<LI class=plus><A href=""><IMG alt=" " src="CSS_fichiers/cafe.gif" align=top border=none>Scans</A> 
				<UL class=niveau3>
					<LI><A href=""><IMG alt=" " src="CSS_fichiers/note.gif" align=top border=none>Complet</A> </LI>
					<LI><A href=""><IMG alt=" " src="CSS_fichiers/serveuse.gif" align=top border=none>Derniers KO</A> </LI>
					<LI><A href=""><IMG alt=" " src="images/011.ico" align=top border=none>Appliances</A> </LI>
				</UL>
			</LI>
			<LI><A href="javascript:MajAD();"><IMG alt=" " src="CSS_fichiers/cafe.gif" align=top border=none>Recharge AD</A> </LI>
			<LI><A href="javascript:window.close();"><IMG alt=" " src="images/sortie.gif" align=top border=none>Quitter</A> </LI>
		</UL>

Quelqu'un aurait-il une bonne idée ?

D'avance merci.

M.

[muppetshow]

Afin de préciser ma demande qui n'est peut-être pas claire, en fait, si j'utilise un menu déroulant à base de CSS et que des options de menu ne font pas changer de page mais lance des javascripts sur la page en cours, comment est-ce que je peux "réinitialiser" le menu pour me permettre marquer le fait qu'un click sur le menu à été fait ?

Merci

[muppetshow]

Je ne sais pas si je n'ai eu aucune réponse parce que ma question était débile ou d'une évidence profonde ou je ne sais trop quoi mais si cela peut intéresser quelqu'un, j'ai trouvé une solution.

Dans le javascript que je lance sur ma sélection de menu, j'en profite pour effacer mon div et le ré afficher tout de suite.

Code :

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

1
2
3
 
document.getElementById("monmenu").style.display='none';
document.getElementById("monmenu").style.display='block';

Comme cela, mon menu déroulant s'efface après le click et se réaffiche tout de suite. Comme la souris de strouve en dessous de la barre principale, au niveau des sous blocs, ça marche !!!

Voilà