créer un menu déroulant

**nuphius** · 07/06/2011, 10h18

Bonjour,

j'ai créer un menu déroulant qui est le menu de ce site http://www.tofus.fr. Mon problème est pour que mon menu fonction je suis obliger de mettre les propriétées height et overflow dans la balise div qui doit s'ouvrir et se fermer.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="guide_haut">
                        	<a title="Un condensé de l'essentiel à savoir pour les nouveaux joueurs" onclick="test(100,'guide_milieux')"><!--
                            --><img src="images/temps/guide.png" alt="Le guilde du débutant"><!--
                            --></a>
                        </div>
                        <div id="guide_milieux" style="height:0px; overflow:hidden;">
                        	<ul>
                        		<li><a href="http://www.tofus.fr/guide/arrive1.php" title="Arrivée sur Dofus">Arrivée sur Dofus</a></li>
                                <li><a href="http://www.tofus.fr/guide/astrub1.php" title="A la découverte d'Astrub">A la découverte d'Astrub</a></li>
                                <li><a href="http://www.tofus.fr/guide/monde1.php" title="Le monde s'éclaire">Le monde s'éclaire</a></li>
                                <li><a href="http://www.tofus.fr/conseil/voca.php" title="Le vocabulaire de dofus">Vocabulaire</a></li>
                            </ul>
                        </div>
                        <div id="guide_bas"></div>

je n'arrive pas a comprendre pourquoi en mettant les propriétées height et overflow dans mon fichier css, mon script javascript n'arrive pas a y accéder

mon 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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
function test(taille_menu,nom_menu){
 
	var div=document.getElementById(nom_menu);
	var taille=div.style.height;
 
	if(taille=="0px"){
 
		derou(0,taille_menu,div);
 
	}
	else if(taille==taille_menu+'px'){
 
		enrou(taille_menu,div);
	}
}
function derou(taille,taille_menu,div){
 
	if (taille<taille_menu){
 
		taille+=8;
		div.style.height=taille+"px";
 
		setTimeout(function(){derou(taille,taille_menu,div)},5);
	}
	else{
 
		div.style.height=taille_menu+"px";
	}
}
function enrou(taille,div){
 
		function reduction(){
 
			taille-=8;
			div.style.height=taille+"px";
 
			if (taille<8){
 
				div.style.height="0px";
				clearInterval(timer);
			}		
		}
		var timer=setInterval(function(){reduction()},5);
}