menu déroulant dynamique

**ajor** · 21/05/2008, 10h00

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 :

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
<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">&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>

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

**le_chomeur** · 21/05/2008, 10h08

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 ^^

**ajor** · 21/05/2008, 11h40

merci beaucoup...

Désolé de ne pas avoir utilisé la fonction recherche

**ajor** · 21/05/2008, 12h10

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?

**ajor** · 21/05/2008, 15h28

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 :

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
<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 :

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

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

**le_chomeur** · 21/05/2008, 15h35

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 )

**ajor** · 26/05/2008, 20h04

Bonjour à tous,

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

Voici le code de mon menu:

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
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)

menu déroulant dynamique

JavaScript

Discussions similaires

Partager

Partager