menu déroulant dynamique

Version imprimable

Bonjour à tous,
Je souhaiterais inclure un menu déroulant sur mon site PHP/MySQL. On m'a dit que c'était assez facile à faire avec Javascript, mais comme je rame, et ben je galère pas mal...

Alors je vais expliquer en détail. Le menu est créé dynamiquement et pourra changer car il dépend des rubriques qu'insérera l'administrateur du site que je suis en train de concevoir.
Ce menu est conçu de rubriques et de sous rubriques, qui créé un menu du type de celui-ci:

TITRE1
SOUSTITRE1
SOUSTITRE2
SOUSTITRE3
TITRE2
SOUSTITRE1
SOUSTITRE2
TITRE3
TITRE4
SOUSTITRE1
SOUSTITRE2

Si ça peut aider, je vous montre le code du fichier menu.html
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <div id="menuGeneral"> <dl id="menu"> <THELIA_MENU_RUBRIQUES type="RUBRIQUE" parent="0" profondeur="1" classement="manuel"> <dt><a href="#URL">#TITRE</a></dt> <dd class="ssmenu"> <ul> <THELIA_BLOC_SOUS_MENU type="RUBRIQUE" parent="#ID"> <THELIA_SOUS_MENU_RUBRIQUE type="RUBRIQUE" id="#ID" courante="0"> <li><a href="#URL">#TITRE</a></li> </THELIA_SOUS_MENU_RUBRIQUE> <THELIA_SOUS_MENU_RUBRIQUE_SELECTION type="RUBRIQUE" id="#ID" courante="1"> <li><a href="#URL" class="selected">#TITRE</a></li> </THELIA_SOUS_MENU_RUBRIQUE_SELECTION> </THELIA_BLOC_SOUS_MENU> <li class="invisibleW3C"> </li> </ul> </dd> </THELIA_MENU_RUBRIQUES> <THELIA_MENU_CONTENU type="CONTENU" parent="0" profondeur="1" classement="manuel"> <dt><a href="#URL">#TITRE</a></dt> </THELIA_MENU_CONTENU> </dl> </div>
Voila le but est d'obtenir un menu du genre:

TITRE1
TITRE2
TITRE3
TITRE4

et, par exemple qu'au passage de la souris du TITRE2, on obtienne:

TITRE1
TITRE2
SOUSTITRE1
SOUSTITRE2
TITRE3
TITRE4

Voilà, je remercie par avance ceux qui voudront bien me filer un coup de main...

Ajor

21/05/2008, 09h08
le_chomeur

une petite recherche t'aurais amené ici :

http://www.developpez.net/forums/sho...d.php?t=270288 ( a adapter ... )

ou encore ici :

http://css.developpez.com/galerie/

toute une galerie de menu en css / javascript ^^
21/05/2008, 10h40
ajor

merci beaucoup...

Désolé de ne pas avoir utilisé la fonction recherche:?
21/05/2008, 11h10
ajor

Je viens de regarder les liens proposé mais il me semble que ce sont tous des menus statiques.
Est-ce qu'il a déjà été proposé des menus de ce genre du type dynamique comme le mien?

Je suis vraiment débutant en Javascript, donc j'ai besoin d'un petit peu d'aide pour utiliser ces fonctions.
Si j'ai bien compris, je place le code suivant au début de ma page:

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
<script type="text/javascript"> 				
<!--
/******** Debut du script du menu ************/
var timer = null;
var objOut = null;
 
function mouseOut(obj)
{
   var elmt = document.getElementById(obj.id+"Item");
   elmt.style.display = "none";
 
   document.getElementById(obj.id+"Titre").className="titreMenu itemOut";
 
   //instruction a placer a la fin de la fonction
   timer = null;
}
 
function fout(obj)
{
   objOut = obj;
   if (timer==null)
   {
      timer = setTimeout("mouseOut(objOut)","1000");
   }
}
 
 
function fover(obj)
{
   var elmt;
   clearTimeout(timer);
   timer = null;
 
   elmt = document.getElementById(obj.id+"Item");
   elmt.style.display = "block";
 
   document.getElementById(obj.id+"Titre").className="titreMenu itemOver";
 
   if (objOut!=obj && objOut!=null)
   {
      mouseOut(objOut);
   }
}
/******** Fin du script du menu ************/
//--> 				 				
</script>

Puis je place dans le code (copié plus haut) quelque chose comme ça:

Code:

1
2
3
4
5
6
<div class="menu"id="Menu1"onmouseout="fout(this)"onmouseover="fover(this)"> 				
<div class="titreMenu itemOut"id="Menu1Titre">Menu 1</div>
 
<divclass="contenuMenu"id="Menu1Item">
<divclass="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><ahref="#"class="lienMenu">Sousmenu 11</a></div>
  </div>

J'ai du mal à savoir comment adapter ce code au miens.
Mais déjà, est-ce que c'est vraiment faisable?
Ajor

21/05/2008, 14h35
le_chomeur

oui c'est faisable :
http://css.developpez.com/galerie/pr...alderoulant2/#
le fait que tu es 1 ou 10 menu / sous menu ne change rien ... regarde la source elle est très simple a mettre en place ( juste une modification des balise html à effectuer )

Bonjour à tous,

Alors j'ai essayé plusieurs trucs, mais je n'y arrive pas...

Voici le code de mon menu:

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
79
80
<!-- menu général-->
 
<script type="text/javascript"> 				
<!--
/******** Debut du script du menu ************/
var timer = null;
var objOut = null;
 
function mouseOut(obj)
{
   var elmt = document.getElementById(obj.id+"Item");
   elmt.style.display = "none";
 
   document.getElementById(obj.id+"Titre").className="titreMenu itemOut";
 
   //instruction a placer a la fin de la fonction
   timer = null;
}
 
function fout(obj)
{
   objOut = obj;
   if (timer==null)
   {
      timer = setTimeout("mouseOut(objOut)","1000");
   }
}
 
 
function fover(obj)
{
   var elmt;
   clearTimeout(timer);
   timer = null;
 
   elmt = document.getElementById(obj.id+"Item");
   elmt.style.display = "block";
 
   document.getElementById(obj.id+"Titre").className="titreMenu itemOver";
 
   if (objOut!=obj && objOut!=null)
   {
      mouseOut(objOut);
   }
}
/******** Fin du script du menu ************/
//--> 				 				
</script>
 
 
		<div id="menuGeneral">
			<dl id="menu">
			<THELIA_MENU_RUBRIQUES type="RUBRIQUE" parent="0" profondeur="1" classement="manuel" onmouseout="fout(this) "onmouseover="fover(this)">
				<dt><a href="#URL">#TITRE</a></dt>
				<dd class="ssmenu">
					<ul>
 
					<THELIA_BLOC_SOUS_MENU type="RUBRIQUE" parent="#ID" >
 
 
					<THELIA_SOUS_MENU_RUBRIQUE type="RUBRIQUE" id="#ID" courante="0" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'">
					<li><a href="#URL">#TITRE</a></li>
					</THELIA_SOUS_MENU_RUBRIQUE>
 
 
					<THELIA_SOUS_MENU_RUBRIQUE_SELECTION type="RUBRIQUE" id="#ID" courante="1">
						<li><a href="#URL" class="selected">#TITRE</a></li>
					</THELIA_SOUS_MENU_RUBRIQUE_SELECTION>
 
					</THELIA_BLOC_SOUS_MENU>
						<li class="invisibleW3C">&nbsp;</li>	
 
					</ul>
				</dd>
				</THELIA_MENU_RUBRIQUES>
				<THELIA_MENU_CONTENU type="CONTENU" parent="0" profondeur="1" classement="manuel">
				<dt><a href="#URL">#TITRE</a></dt>
			</THELIA_MENU_CONTENU>
			</dl>
		</div>

Les sous menus ne disparaissent pas, et je ne comprend pas pourquoi...
Ce code ne produit aucun changement sur le résultat (comparé au code de mon premier post)