menu déroulant

Version imprimable

Voir 40 message(s) de cette discussion en une page

menu déroulant

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:

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.

02/07/2008, 15h02
jbrasselet

Code:

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
02/07/2008, 15h08
Tchupa
Donc je l'ai remplacer par
Code:

1 2 window.onclick=montre;
Et ça ne change rien . :(
02/07/2008, 15h09
E.Bzz

Bonjour,

Citation:

Envoyé par Tchupa

Donc je l'ai remplacer par

pas "remplacer", mais "enlever" ;)

A+
02/07/2008, 15h13
Tchupa
:roll: la ligne?
Code:

1 2 window.onclick:montre;
?
Je ne vous suis pas désolé.
Amicalement Tchupa.
02/07/2008, 15h13
jbrasselet

Tu veux qu'il apparaisse lorsque tu clique sur quoi? C'est sur cet objet que tu dois mettre le onclick
02/07/2008, 15h16
E.Bzz

Citation:

Envoyé par jbrasselet qui aurait dû dire

Code:

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)

:mrgreen:
02/07/2008, 15h17
jbrasselet

Merci de préciser ma pensée :mouarf:

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:

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:

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>

02/07/2008, 15h36
jbrasselet

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 :mrgreen:
02/07/2008, 15h40
Tchupa

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.
02/07/2008, 16h01
E.Bzz

Citation:

Envoyé par Tchupa

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

Plus exactement : ils s'affichent ;)
=> initialise leur display à "none"

Citation:

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

Idem que précédemment ...

Citation:

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+
02/07/2008, 16h04
Tchupa

Citation:

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 ? :cry:
02/07/2008, 16h08
E.Bzz

Citation:

Envoyé par Tchupa

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

Si tu parles des liens de ce type

Code:

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

ils ne manqueront à personne, si ? :?

A+
02/07/2008, 16h17
Tchupa

Citation:

Envoyé par E.Bzz

Si tu parles des liens de ce type

Code:

<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. :(
02/07/2008, 16h34
E.Bzz

Citation:

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 ?

Citation:

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

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

A+

Oui biensur , voici mon css:

Code:

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:

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>

02/07/2008, 16h49
E.Bzz

Ca serait pas plutôt

Code:

#menu li ul {

que tu dois passer en display:none ?

A+
02/07/2008, 16h59
Tchupa

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?

Code:

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+

Voir 40 message(s) de cette discussion en une page