menu déroulant

**Tchupa** · 02/07/2008, 14h59

Bonjour a tous voilà je rencontre actuellement un problème avec mon menu déroulant, en effet ce n'est pas très esthétique, mon menu se déroule a chaque chargement de page alors que normalement il ne devrait se dérouler que lorsque l'on clic sur le menu.
Voici ma fonction javascript qui gère ce menu déroulant:

Code :

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

1
2
3
4
5
6
7
8
9
 
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';}
}

Vous pouvez vous rendre compte du problème ici
Je voudrais que le menu se déroule seulement si l'on clic sur l'un des boutons en haut et non a chaque chargement de page.
En vous remerciant Amicalement.

**jbrasselet** · 02/07/2008, 15h02

Code :

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

window.onload=montre;

tu le lance à chaque fois que ta page se charge c'est normal.
Il faut que ta fonction montre soit appelée sur un onclick

**Tchupa** · 02/07/2008, 15h08

Donc je l'ai remplacer par

Code :

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

1
2
 
window.onclick=montre;

Et ça ne change rien .

**E.Bzz** · 02/07/2008, 15h09

Bonjour,

Envoyé par Tchupa

Donc je l'ai remplacer par

pas "remplacer", mais "enlever"

A+

**Tchupa** · 02/07/2008, 15h13

la ligne?

Code :

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

1
2
 
window.onclick:montre;

?
Je ne vous suis pas désolé.
Amicalement Tchupa.

**jbrasselet** · 02/07/2008, 15h13

Tu veux qu'il apparaisse lorsque tu clique sur quoi? C'est sur cet objet que tu dois mettre le onclick

**E.Bzz** · 02/07/2008, 15h16

Envoyé par jbrasselet qui aurait dû dire

Code :

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

window.onload=montre;

tu le lance à chaque fois que ta page se charge c'est normal.
Il faut que ta fonction montre soit appelée sur un onclick uniquement (et pas sur onload)

**jbrasselet** · 02/07/2008, 15h17

Merci de préciser ma pensée

**Tchupa** · 02/07/2008, 15h31

A votre qu'est ce qui est le plus ergonomique pour vous?
Que le menu se déroule au clic ou au passage de la souris?

Donc comme je disais ma fonction java:

Code :

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

1
2
3
4
5
6
7
8
 
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';}
}

Donc je retire le onload

Et voila par exemple à quoi ressemble un bouton avec son sous menu

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<ul id="menu">
                    <li onclick="javascript:montre();"><a href="index.php?p=news"><img src="images/index_06.gif" alt="" /></a></li> 
                    <!-- Bouton acceuil-->
                    <li><a href=""><img src="images/index_07.gif" alt="" /></a></li> 
                    <!-- séparateur-->
                    <li onclick="javascript:montre('smenu2');"><img src="images/index_08.gif" alt="Tarif" /> <!-- Bouton tarif-->
					<ul id="smenu2">
					<li><a href="index.php?p=tarif&typ=permisB">Permis Voiture</a></li>
					<li><a href="index.php?p=tarif&typ=permisA">Permis Moto</a></li>
					<li><a href="index.php?p=tarif&typ=BSR">Permis BSR</a></li>
					<li><a href="index.php?p=tarif&typ=ConduiteAccompagnee">Conduite Accompagnée</a></li>
					</ul>

**jbrasselet** · 02/07/2008, 15h36

Je pense que sur le clic c'est le mieux, enfin je préfères.

J'aime pas voir des trucs apparaitre et disparaitre dès que je bouge la souris

**Tchupa** · 02/07/2008, 15h40

J'ai le code tel que je vous le présente dans mon poste précédent seulement si vous actualisé la page tout les menu se déroule encore et si on clic a nouveau sur un bouton il se replie pas

De plus j'ai remarqué , que j'ai le même soucis lorsque l'on clic sur un bouton qui n'a pas de sous menu c'est comme si on actualiser la page tout les sous-menu se déroule.

**E.Bzz** · 02/07/2008, 16h01

Envoyé par Tchupa

si vous actualisé la page tout les menu se déroule encore

Plus exactement : ils s'affichent

=> initialise leur display à "none"

et si on clic a nouveau sur un bouton il se replie pas

Idem que précédemment ...

De plus j'ai remarqué , que j'ai le même soucis lorsque l'on clic sur un bouton qui n'a pas de sous menu c'est comme si on actualiser la page tout les sous-menu se déroule.

Normal : enlève les balises <A> autour de ces images ...

A+

**Tchupa** · 02/07/2008, 16h04

Envoyé par E.Bzz

Plus exactement : ils s'affichent

=> initialise leur display à "none"
Idem que précédemment ...
Normal : enlève les balises <A> autour de ces images ...

A+

Si je retires les balise <a> y'aura plus les liens non ?

**E.Bzz** · 02/07/2008, 16h08

Envoyé par Tchupa

Si je retires les balise <a> y'aura plus les liens non ?

Si tu parles des liens de ce type

Code :

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

<li><a href=""><img src="images/index_07.gif" alt="" /></a></li>

ils ne manqueront à personne, si ?

A+

**Tchupa** · 02/07/2008, 16h17

Envoyé par E.Bzz

Si tu parles des liens de ce type

Code :

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

<li><a href=""><img src="images/index_07.gif" alt="" /></a></li>

ils ne manqueront à personne, si ?

A+

Oui effectivement mais ça c'est l'image qui sépare les boutons il n'y a rien dessus.
Ensuite j'ai mis le diplay:none; dans mon css et là le menu se déroule plus du tout.

**E.Bzz** · 02/07/2008, 16h34

Envoyé par Tchupa

Oui effectivement mais ça c'est l'image qui sépare les boutons il n'y a rien dessus.

Alors desquels parles-tu ?

Ensuite j'ai mis le diplay:none; dans mon css et là le menu se déroule plus du tout.

Pourtant ça semble être le fonctionnement prévu : la fonction repasse le display à "block" pour le menu à afficher ...
On peut voir tes adaptations ?

A+

**Tchupa** · 02/07/2008, 16h43

Oui biensur , 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
 
 
body {
background : #000000 url(images/font.png) no-repeat top center;
width : 1004px;
height : 1354px;
margin : auto;
}
#header {
width : 796px;
min-height : 1338px;
background : #ffffff;
margin : auto;
}
#banner {
width : 796px;
height : 174px;
background : url(images/index_05.gif) no-repeat top center;
margin-top : 15px;
}
#menu {
display : block;
background-image : url(images/index_06.gif);
list-style-type : none;
width : 796px;
height : 20px;
margin : 0;
padding : 0;
}
#menu li {
list-style-type : none;
float : left;
background-image : url(images/menu-font.png);
height : 20px;
text-decoration : none;
color : blue;
 
}
#menu li ul {
position : absolute;
width : 150px;
height : 20px;
}
#menu li ul li {
float : left;
width : 150px;
height : 20px;
display:none;
 
}
#menu li a:hover, #menu dt a:hover {
background-image : url(images/menu-font.png);
color : #0099ff;
text-decoration : none;
font-family : Times New Roman, Times, serif;
font-size : 14px;
float : left;
 
}
input {
border : 1px solid #2d9bc0;
}
.submit {
background-color : white;
border : 2px solid #2d9bc0;
font-weight : bold;
}
.submit:hover {
background-color : #c1dbf4;
border : 2px solid #2d9bc0;
}
a:visited {
color : blue;
}
a img {
border : 0;
display : block;
}

celui de mon index.

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
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		        <style type="text/css" media="screen">
                @import url("./design.css"); <!-- permet d'appeler le css -->
				</style>
 
				<script type="text/javascript">
<!--
 
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>
 
     </head>
     <body>
          <div id="header">   
               <div id="banner"></div>
               <ul id="menu">
                    <li onclick="javascript:montre();"><a href="index.php?p=news"><img src="images/index_06.gif" alt="" /></a></li> 
                    <!-- Bouton acceuil-->
                    <li><a href=""><img src="images/index_07.gif" alt="" /></a></li> 
                    <!-- séparateur-->
                    <li onclick="javascript:montre('smenu2');"><img src="images/index_08.gif" alt="Tarif" /> <!-- Bouton tarif-->
					<ul id="smenu2">
					<li><a href="index.php?p=tarif&typ=permisB">Permis Voiture</a></li>
					<li><a href="index.php?p=tarif&typ=permisA">Permis Moto</a></li>
					<li><a href="index.php?p=tarif&typ=BSR">Permis BSR</a></li>
					<li><a href="index.php?p=tarif&typ=ConduiteAccompagnee">Conduite Accompagnée</a></li>
					</ul>
					</li>
                    <li><a href=""><img src="images/index_09.gif" alt="" /></a></li> 
                    <!-- séparateur-->
					<li onclick="javascript:montre('smenu3');"><img src="images/index_10.gif" alt="Code" /> <!-- Bouton code-->
						<ul id="smenu3">
						<li><a href="index.php?p=code&ville=Hautmont">Horaire de cours</a></li>
						</ul>
				 </li>
					<li><a href=""><img src="images/index_11.gif" alt="" /></a></li> 
					<!-- séparateur-->
					<li onclick="javascript:montre('smenu4');"><img src="images/index_12.gif" alt="Permis" /> <!-- Bouton permis-->
						<ul id="smenu4">
						<li><a href="index.php?p=permis1">Permis A</a></li>
						<li><a href="index.php?p=permis">Permis B</a></li>
						<li><a href="index.php?p=permis3">Permis BSR</a></li>
						<li><a href="index.php?p=permis2">Conduite Accompagnée</a></li>
						</ul>
				 </li>
					<li><a href=""><img src="images/index_13.gif" alt="" /></a></li> 
					<!-- séparateur-->
					<li><a href="index.php?p=galerie"><img src="images/index_14.gif" alt="Photo" /></a></li> 
					<!-- Bouton photo-->
 
					<li><a href=""><img src="images/index_15.gif" alt="" /></a></li> 
					<!-- séparateur-->
					<li onclick="javascript:montre('smenu5');"><a href="index.php?p=statistiques"><img src="images/index_16.gif" alt="Stats" /></a> <!-- Bouton stats-->
 
					<li><a href=""><img src="images/index_17.gif" alt="" /></a></li> 
					<!-- séparateur-->
					<li onclick="javascript:montre('smenu6');"><img src="images/index_18.gif" alt="Contact" /> <!-- Bouton contact-->
						<ul id="smenu6">
						<li><a href="index.php?p=contact3">Contacter auto-ecole</a></li>
						<li><a href="index.php?p=contact">Contacter webmaster</a></li>
						</ul>
				 </li>
			</ul>

**E.Bzz** · 02/07/2008, 16h49

Ca serait pas plutôt

Code :

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

#menu li ul {

que tu dois passer en display:none ?

A+

**Tchupa** · 02/07/2008, 16h59

Ok impeccable maintenant, je voudrais savoir encore une chose comment je dois faire pour lorsque le visiteur re clique sur le menu qui vient de dérouler pour qu'il se ré enroule?

**E.Bzz** · 02/07/2008, 17h02

Code :

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

1
2
3
4
5
6
7
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=(d.style.display=='none')?'block':'none';}
}

A+

menu déroulant

JavaScript

Discussions similaires

Partager

Partager