pb avec un menu horizontal

**stars333** · 17/11/2007, 17h10

Bonjour,

J'ai un petit problème.
J'ai utilisé un tutoriel CSS pour créer un menu horizontal simple.
Je souhaitais que le menu déroulant disparaisse quant la souris le quittait j'ai donc utilisé l'événement onmouseout avec la fonction suivante pour faire disparaitre le menu déroulant.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

tout marche bien sur firefox sauf sous Internet explorer. Quand on descend vers le bas du menu déroulant et que l'on quitte le premier lien du menu celui-ci se ferme sans doute à cause du onmouseout.

Est-ce qu'il y aurait un moyen d'éviter ceci et d'avoir le même comportement que sous firefox ?

Voici mon code :

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
60
61
62
63
64
65
66
67
68
69
70
 
 
 
 
<div id="menus">
	<dl>
 
		<dt onmouseover="javascript:montre();"><a href="#" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
 
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Anime</dt>
 
		<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="index.php?lien=7">Enregistrer et modifier Anime</a></li>
				<li><a href="index.php?lien=6">Enregistrer et modifier type d'Anime</a></li>
 
				</ul>
		</dd>
	</dl>
 
 
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">Team</dt>
 
			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="index.php?lien=8">Enregistrer et modifier Team</a></li>
 
			</ul>
 
			</dd>
	</dl>
 
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Contenus</dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
			<ul>
 
				<li><a href="index.php?lien=4">Enregistrer et modifier type de fiche</a></li>
				<li><a href="index.php?lien=5">Enregistrer et modifier fiche</a></li>
				<li><a href="index.php?lien=2">Enregistrer et modifier news</a></li>
 
			</ul>
 
			</dd>
	</dl>
 
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Apparence</dt>
			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
			<ul>
 
			<li><a href="index.php?lien=2">Enregistrer et modifier news</a></li>
 
			</ul>
			</dd>
	</dl>
		<dl>	
		<dt onmouseover="javascript:montre('smenu5');">Membres</dt>
			<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
			<ul>
 
			<li><a href="index.php?lien=2">Enregistrer et modifier news</a></li>
 
			</ul>
			</dd>
	</dl>
	</div>

voici mon css :

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
<style type="text/css" media="screen">
.essai
{
background:green;
}
#menus {
width: 100%; /* correction pour Opera */
height:30px;
text-align:center;
margin:auto;
vertical-align:top;
margin-left:25px;
}
#menus ul
{
margin:0;
padding:0;
float:left;
position:absolute;
width:7%;
}
dl, dt, dd, ul, li {
list-style-type: none;
margin: 0;
padding: 0;
margin-left:0;
 
}
dl
{
/*border: 1px solid black;*/
width:15%;
float:left;
margin-top:0;
padding-top:0;
vertical-align:top;
margin-left:0;
}
 
#menus dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid black;
margin: 1px;
font-size:10pt;
margin:0;
padding:0;
width: 100%;
}
 
#menus dd {
display: none;
border: 1px solid black;
float:left;
font-size:10pt;
margin-left:0;
}
#menus li a, #menus dt a {
font-size:10pt;
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
background: #eee;
padding:0 5px 0 5px;
width: 100%;
}
#menus li a:hover, #menus li a:focus, #menus dt a:hover, #menus dt a:focus 
{
background: #3399ff;
border: 1px solid black;
}
#menus dt:hover
{
background: #3399ff;
}
#menus li
{
border: 1px solid gray;
}

et j'utilise le doctype suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Merci d'avance de votre aide

**omdafer** · 23/11/2007, 02h19

essai avec le css suivant :

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
ul#menu
{
 
 height: 35px ;
 margin: 0 ;
 padding: 0 ;
 background: url(../images/bg_menu.gif) repeat-x 0 -25px ;
 list-style-type: none ;
}
/* On donne une hauteur au menu, correspondant a
 la taille de l'image utilisée en fond, on met ensuite l'image de fond
  avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel; */
ul#menu li
{
 float: left ;
 text-align: center ;
}/* On rend les li en flottant pour pouvoir les
 afficher horizontalement, on cache les puces, et on centre le texte */
ul#menu li a
{
 width: 150px ;
 line-height: 25px ;
 font-size: 1.2em ;
 font-weight: bold ;
 /*letter-spacing: 2px ;*/
 color: #fff ;
 display: block ;
 text-decoration: none ;
 border-right: 2px solid #dea ;
}/* C'est sur les liens que le gros du travail est
 effectué, largeur, hauteur de ligne, taille de police, graisse de police,
  espacement des lettres, couleur, bordure et decoration du texte. 
  Nous pouvons dimensionner les a grâce à la propriété display: block ; */
ul#menu li a:hover
{
 background: url(../images/bg_menu.gif) repeat-x 0 0 ;
}/* Et pour finir on décale l'image de fond au passage
 de la souris pour laisser aparaître l'état survolé de l'image, 
 voir le tutoriel sur les roll over pour plus de détails */
 
 ul#menu li span:hover  
{
 /* définition de la balise <span> au survol */
 display: inline;
 position: absolute ;
 top: 313px;
  /* positions et dimensions du calque, que vous pouvez changer à loisir 
  left: 150px;*/
  /*width: 150px;*/
  /*height: 100px;*/
 
  text-align: center;
  color: #6699CC;
 }
 
ul#menu li a span 
{ /* définition de la balise <span> inclue dans <a> */
display: none;
position: absolute ;
 top: 313px;
  /* positions et dimensions du calque, que vous pouvez changer à loisir 
  left: 150px;*/
  /*width: 150px;*/
  /*height: 100px;*/
 
  text-align: center;
  color: #6699CC;
}
ul#menu li a:hover span 
{
 /* définition de la balise <span> au survol du lien span*/
 display: inline;
 
 }
 
ul#menu li  span a
{
color:#6699cc; text-decoration:none;
}

a modifier à ta gise.

Puis dans ton body par exemple

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<ul id="menu">
 
   <li><a href="#"><span><script>
   pop2(zlien[1]);</script></span>BlaBla 1</a></li>
   <li><a href="#"><span><script>
   pop2(zlien[2]);</script></span>BlaBla 2</a></li>
   <li><a href="#"><span><script>
   pop2(zlien[3]);</script></span>Blabla 3</a></li>
 
   <li>......</li>
.....
  </ul>

pour le fun un javascript :

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
 
//liste des lien.
zlien[0][0] = '<A HREF="<a href="http://www.omdasoft.fr" target="_blank">http:</a>" target="_blank" >Rubrique 1.1</A>';
zlien[0][1] = '<A HREF="<a href="http://www.paktaj.fr" target="_blank">http:</a>" target="_blank" >Rubrique 1.2</A>';
zlien[1][0] = '<A HREF="index.php?page=c" >Rubrique 2.1</A>';
zlien[1][1] = '<A HREF="index.html" >rubrique 2.2</A>';
zlien[2][0] = '<A HREF="#" >Rub 3 sous rub 1</A>';
zlien[2][1] = '<A HREF="<a href="http://www.omdafer.fr" target="_blank">http://www.omdafer.fr</a>" >Rub 3 sous-rub 2</A>';
zlien[3][0] = '<A HREF="" >ETC...</A>';
 
//la fonction pop2
function pop2(msg)
{
var content ="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=150  ><TR ><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=1>"; 
pass = 0
 while (pass < msg.length)
  {
   content += "<TR><TD background='../images/bg_menu.gif'><FONT SIZE=1 FACE=\"Verdana\">  "+msg[pass]+"</FONT></TD></TR>";
   pass++;
  }
 content += "</TABLE ></TD></TR></TABLE>";
 document.write(content);
}

Pas besoin de fonction javascript pour afficher ou masquer les rubriques de ton Menu.

pb avec un menu horizontal

JavaScript

Discussions similaires

Partager

Partager