Menu dynamique

**winnux** · 11/05/2006, 09h09

Bonjour à tous !!!

Dans le cadre du développement d'une interface graphique de configuration d'une application interne, je me suis mis au DHTML et je rencontre des problèmes avec un menu dynamique.

Un click sur l'image déroule ou enroule mes sous-rubriques tandis que le click sur le lien charge une autre page.

problèmes :
Sous IE et FF, il me faut plusieurs cliks au chargement de ma page pour exécuter le script action.

Sous FF, l'indentation de mes rubriques n'est pas respectée.

Sous IE et FF, la sous-rubrique contact est visible au démarrage.

J'avoue ne pas comprendre ce qu'il se passe, même si je pense que mon manque d'expérience dans le domaine est la raison de mes souçis...

Soyez indulgents, je ne suis pas du tout dans mon domaine et j'essaie de faire de mon mieux.

Voici le code généré par mes scripts :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> 
<html>
<head>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<style type="text/css">
     .niveau1 {display:none;margin-left:30px};
     .niveau2 {display:none;margin-left:35px};
     .niveau3 {display:none;margin-left:40px};
     .niveau4 {display:none;margin-left:45px};
</style>
<script language="JavaScript">
function gestion_menu(niveau) {
	var etat=document.getElementById(niveau).style.display;
	if (etat=='none') {
		document.getElementById(niveau).style.display='block';
	} else {
		document.getElementById(niveau).style.display='none';
	}
}
</script>
</head>
<a href='#' onclick="return gestion_menu('configPartner')"><img src="plus.jpg" alt="dérouler"/></a>&nbsp;<a href="newPartner.php">configuration partners</a><br/> 
<div class="niveau1" id='configPartner'>
	<a href='#' onclick="return gestion_menu('partner1')"><img src="plus.jpg" alt="dérouler"/></a>&nbsp;<a href="visuPartner.php?partner=1">fpa</a><br/>
         <div class="niveau2" id='partner1'>
         		 	<a href='#' onclick="return gestion_menu('configRolepartner1')"><img src="plus.jpg" alt="dérouler"/></a>&nbsp;<a href="newRole.php?partner=1">roles</a><br/> 
		 	<div class="niveau3" id='configRolepartner1'>
 
		    		       <a href="visuRole.php?role=1">MSC</a><br/>
            		       <a href="visuRole.php?role=2">Informatique</a><br/>
                     	</div>
         		 	<a href='#' onclick="return gestion_menu('configContactpartner1')"><img src="plus.jpg"  alt="dérouler"/></a>&nbsp;<a href="newContact.php?partner=1">contacts</a><br/> 
		 	<div class="niveau3" id='configContactpartner1'>
 
		    		       <a href="visuContact.php?contact=1">PAUMIER</a><br/>
                     	</div>
         </div>
    	<a href='#' onclick="return gestion_menu('partner2')"><img src="plus.jpg" alt="dérouler"/></a>&nbsp;<a href="visuPartner.php?partner=2">gco</a><br/>
         <div class="niveau2" id='partner2'>
         		 	<a href='#' onclick="return gestion_menu('configRolepartner2')"><img src="plus.jpg" alt="dérouler"/></a>&nbsp;<a href="newRole.php?partner=2">roles</a><br/> 
		 	<div class="niveau3" id='configRolepartner2'>
 
		    		       <a href="visuRole.php?role=3">EDI</a><br/>
                     	</div>
         		 	<a href='#' onclick="return gestion_menu('configContactpartner2')"><img src="plus.jpg"  alt="dérouler"/></a>&nbsp;<a href="newContact.php?partner=2">contacts</a><br/> 
		 	<div class="niveau3" id='configContactpartner2'>
 
		    		       <a href="visuContact.php?contact=2">CONTREMOULIN</a><br/>
                     	</div>
         </div>
    	<a href='#' onclick="return gestion_menu('partner3')"><img src="plus.jpg" alt="dérouler"/></a>&nbsp;<a href="visuPartner.php?partner=3">sla</a><br/>
         <div class="niveau2" id='partner3'>
         		 	<a href='#' onclick="return gestion_menu('configRolepartner3')"><img src="plus.jpg" alt="dérouler"/></a>&nbsp;<a href="newRole.php?partner=3">roles</a><br/> 
		 	<div class="niveau3" id='configRolepartner3'>
 
		    		       <a href="visuRole.php?role=4">Rapport</a><br/>
                     	</div>
         		 	<a href='#' onclick="return gestion_menu('configContactpartner3')"><img src="plus.jpg"  alt="dérouler"/></a>&nbsp;<a href="newContact.php?partner=3">contacts</a><br/> 
		 	<div class="niveau3" id='configContactpartner3'>
 
		    		       <a href="visuContact.php?contact=3">LANGLOIS</a><br/>
                     	</div>
         </div>
 
</div>
</body>
</html>

**if_zen** · 11/05/2006, 09h37

au début, etat vaut '' quelque soit le display que tu aies attribué par ton css.
Etat ne vaut 'block' ou 'none' que quand tu as deja défini la propriété par une instruction javascript.
Donc deja tu peux commencer par tester si etat=='block' et là tu lui dis 'none' else 'block' (en fait faire le test à l'envers, pour que le premier marche) Sinon etat='' donc tu fais etat='none'... Bref je suis pas sûr d'etre très clair.

Et puis c'est à vérifier, parce que je suis pas sûr que ce soit ton soucis en fait :o)

Sinon peux tu préciser :
- script action : tu parles que quelle action ?
- l'indentaiton pas respectée : il y en a une différente ou pas du tout ?
Dans le cas ou elle est différente, esssaye de préciser le margin de ton body, parce que IE et FF n'ont pas les memes valeurs par défaut
body {
margin: 0px;
}

- ta sous rubrique contact, c'est une niveau2 ou une niveau3 ? Je vois pas pourquoi ça serait visible au démarrage encore...

@+ donc

**winnux** · 11/05/2006, 10h30

Salut if_zen !!

Effectivement, tu as raison, en changeant le test de sens je déroule et enroule comme je veux même au premier click.

En revanche, j'ai toujours le problème pour ma sous-rubrique contact qui est (pour répondre à ta question) une niveau 3 comme les roles.

J'ai essayé de raisonner comme toi mais je ne comprends tjrs pas : c'est comme si lorsque je click pour display block la div partner1, je display block aussi la div [FONT=monospace]configContactPartner1 (j'espère que tu me suis)

Quand j'ai parlé d'action, je voulais dire gestion_Menu, dsl.

Sinon pour l'indentation, la div niveau1 et les div niveau2 sont bien indentées mais les niveau3 sont à la même indentation que les niveau2 sous FF mais pas sous IE.

Pour contrer ça, j'ai réaliser une indentation "à la main (&nbsp

" mais je pense que ce n'est pas très propre.

Voilà voilà

Merci pour ton aide... et dsl pour le temps de réponse mais je suis sur plusieurs proj en même tps.

[/FONT]

**if_zen** · 11/05/2006, 12h32

Un truc qui devrait te faire marcher ta page vachement mieux :

dans ton <style>, tu as :

Code :

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

1
2
3
4
5
6
7
 
<style type="text/css">
     .niveau1 {display:none;margin-left:30px};
     .niveau2 {display:none;margin-left:35px};
     .niveau3 {display:none;margin-left:40px};
     .niveau4 {display:none;margin-left:45px};
</style>

Cherche l'erreur !

Bon, ok un indice : c'est pas }; à la fin des lignes mais ;} !
firefox apprécie vachement mieux...

tiens moi au courant je suis en pause casse-croute là @+

**blueice** · 11/05/2006, 13h00

Envoyé par if_zen

Un truc qui devrait te faire marcher ta page vachement mieux :

dans ton <style>, tu as :

Code :

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

1
2
3
4
5
6
7
 
<style type="text/css">
     .niveau1 {display:none;margin-left:30px};
     .niveau2 {display:none;margin-left:35px};
     .niveau3 {display:none;margin-left:40px};
     .niveau4 {display:none;margin-left:45px};
</style>

Cherche l'erreur !

Bon, ok un indice : c'est pas }; à la fin des lignes mais ;} !
firefox apprécie vachement mieux...

tiens moi au courant je suis en pause casse-croute là @+

Trop fort ! +1
Certes pas très drôle pour winux

**winnux** · 11/05/2006, 13h41

ok ok, je m'incline tout marche nickel...J'aurais du rester à java...
merci encore et bonne continuation dans vos développements !

Menu dynamique

HTML

Discussions similaires

Partager

Partager