[PHP-JS] Menu vertical dynamique (source requête SQL)

**nbelg27** · 10/01/2007, 15h09

Bonjour,

je suis entrain de réaliser un menu vertical sur un intranet
J'ai donc récupérer un scripte js pour un menu vertical, dont voici le source :

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
 
////////////////////////////////////////////
//
// Script de [Menu Vertical] - Fichier JS
// Création: 10/10/2005
// Dernière modification: 01/07/2006 
// by haryou [haryoudev.free.fr] - haryoudev@free.fr
//
/////////////////////////////////////////////
 
// Menu rectractable
 /* Modifier comme ceci
     var menu_rectractable = "";							-> Menu non retractable
	 var menu_rectractable = "ok";						-> Menu retractable
 */
 var menu_rectractable = "ok";
 
// Eléments du Menu
 /* Modifier ici les noms des catégories - Vous pouvez en rajouter ou en supprimer, mais il faudra en avoir autant de groupe de liens
	 categorie[X] = new Array();						-> Type de la variable (ne pas modifier)
	 categorie[X][0] = "Catégorie 1";					-> Nom de la catégorie
	 categorie[X][1] = "http://liencatégorie1/";		-> Lien de la catégorie - Si vide, il n'y aura pas de lien sur cette catégorie 
	 categorie[X][2] = "_blank";						-> Cible du lien - _blank (nouvelle page), _self (même page),... ou nom de votre frame
 */
 // --- Categories du Menu ---
 categorie = new Array();
 
  // -- [categorie 1]
  categorie[0] = new Array();
   categorie[0][0] = "Catégorie 1";
   categorie[0][1] = "";
   categorie[0][2] = "_blank";
  // -- [categorie 2]
  categorie[1] = new Array();
   categorie[1][0] = "Catégorie 2";
   categorie[1][1] = "http://liencatégorie2/";
   categorie[1][2] = "_blank";
  // -- [categorie 3]
  categorie[2] = new Array();
   categorie[2][0] = "Catégorie 3";
   categorie[2][1] = "";
   categorie[2][2] = "_self";
  // -- [categorie 4]
  categorie[3] = new Array();
   categorie[3][0] = "Catégorie 4";
   categorie[3][1] = "http://liencatégorie4/";
   categorie[3][2] = "_blank";
  // -- [categorie 5]
  categorie[4] = new Array();
   categorie[4][0] = "Catégorie 5";
   categorie[4][1] = "";
   categorie[4][2] = "_self";
  // -- [categorie 6]
  categorie[5] = new Array();
   categorie[5][0] = "Catégorie 6";
   categorie[5][1] = "http://liencatégorie6/";
   categorie[5][2] = "_blank";
 
 // Cible des liens du menu
 /* Modifier ici la cible des liens. Vous devez affecter à la variable target:
     _blank: pour ouvrir dans une nouvelle page      =>       target = '_blank';
	 _self: pour ouvrir dans la même page            =>       target = '_self';
	 xxxx: pour ouvrir dans la frame/iframe xxxx     =>       target = 'xxxx';
 */
 var target = '_blank';
 
// --- Groupe de liens ---
 /* Modifier, ici, les titres et liens, la cible
    Vous pouvez en rajouter ou en supprimer autant de liens que vous voulez.
 */
 lien = new Array();
 // -- [Liens de la categorie 1]
 lien[0] = new Array();
 lien[0]["Titre1"] = "http://liens1/";
 lien[0]["Titre2"] = "http://liens2/";
 lien[0]["Titre3"] = "http://liens3/";
 lien[0]["Titre4"] = "http://liens4/";
 lien[0]["Titre5"] = "http://liens5/";
 // -- [Liens de la categorie 2]
 lien[1] = new Array();
 lien[1]["Titre1"] = "http://liens1/";
 lien[1]["Titre2"] = "http://liens2/";
 lien[1]["Titre3"] = "http://liens3/";
 lien[1]["Titre4"] = "http://liens4/";
 lien[1]["Titre5"] = "http://liens5/";
 // -- [Liens de la categorie 3]
 lien[2] = new Array();
 lien[2]["Titre1"] = "http://liens1/";
 lien[2]["Titre2"] = "http://liens2/";
 lien[2]["Titre3"] = "http://liens3/";
 lien[2]["Titre4"] = "http://liens4/";
 lien[2]["Titre5"] = "http://liens5/";
 // -- [Liens de la categorie 4]
 lien[3] = new Array();
 lien[3]["Titre1"] = "http://liens1/";
 lien[3]["Titre2"] = "http://liens2/";
 lien[3]["Titre3"] = "http://liens3/";
 lien[3]["Titre4"] = "http://liens4/";
 lien[3]["Titre5"] = "http://liens5/";
 // -- [Liens de la categorie 5]
 lien[4] = new Array();
 lien[4]["Titre1"] = "http://liens1/";
 lien[4]["Titre2"] = "http://liens2/";
 lien[4]["Titre3"] = "http://liens3/";
 lien[4]["Titre4"] = "http://liens4/";
 lien[4]["Titre5"] = "http://liens5/";
 // -- [Liens de la categorie 6]
 lien[5] = new Array();
 lien[5]["Titre1"] = "http://liens1/";
 lien[5]["Titre2"] = "http://liens2/";
 lien[5]["Titre3"] = "http://liens3/";
 lien[5]["Titre4"] = "http://liens4/";
 lien[5]["Titre5"] = "http://liens5/";
 
<!--------------------------------------------- Ne rien modifier sous cette ligne ---------------------------------------------->
function sousmenu_hide(actif) {
for (var i=0; i<categorie.length; i++)
 document.getElementById('menu' + i).className = i == actif ? 'sousmenu' : 'hide';
}
 
rectract_ok = menu_rectractable == "ok" ? "onmouseover='sousmenu_hide(-1)'" : '';
 
document.write("<table cellspacing='0' cellpadding='0' width='80%' border='0'><tbody>");
 for (var i=0; i<categorie.length; i++) {
   document.write("<tr class='cat_titre_nonselect'>");
   if (categorie[i][1] != "") {
    document.write("<td width='2%' " + rectract_ok + " class='bordure_cat_g'>&nbsp;</td>");
	document.write("<td height='20' width='96%' class='bordure_cat' onmouseover='sousmenu_hide(" + i + ")'>");
	document.write("&nbsp;&nbsp;<img src='images/menu.gif' height='9' width='8'>&nbsp;&nbsp;");
	document.write("<a href='" + categorie[i][1] + "' target='" + categorie[i][2] + "' class='cat_titre_nonselect' onmouseover=\"this.className='cat_titre_select';\" onmouseout=\"this.className='cat_titre_nonselect';\">" + categorie[i][0] + "</a>");
   } else {
    document.write("<td width='2%' " + rectract_ok + " class='bordure_cat_g'>&nbsp;</td>");
	document.write("<td height='20' width='96%' class='bordure_cat' onmouseover='sousmenu_hide(" + i + ")'>");
	document.write("&nbsp;&nbsp;<img src='images/menu.gif' height='9' width='8'>&nbsp;&nbsp;" + categorie[i][0]);
   }
   document.write("</td><td width='2%' " + rectract_ok + " class='bordure_cat_d'>&nbsp;</td></tr>");
   document.write("<tr>");
   document.write("<td " + rectract_ok + "></td>");
   document.write("<td><center><table width='90%' class='hide' id='menu" + (i) + "'>");
	 for (url in lien[i]) {
		if (target == "_blank") {
		 document.write("<tr onclick=\"window.open('" + lien[i][url] + "')\">");
		 document.write("<td class='sousmenu_nonselect' onmouseover=\"this.className='sousmenu_select';\" onmouseout=\"this.className='sousmenu_nonselect';\">" + url + "</tr></td>");
		} else if (target == "_self" || target == "_parent" || target == "_top") {
		 document.write("<tr onclick=\"document.location.href='" + lien[i][url] + "'\">");
		 document.write("<td class='sousmenu_nonselect' onmouseover=\"this.className='sousmenu_select';\" onmouseout=\"this.className='sousmenu_nonselect';\">" + url + "</tr></td>");
		} else {
		 document.write("<tr onclick=\"top." + target + ".location.href='" + lien[i][url] + "'\">");
		 document.write("<td class='sousmenu_nonselect' onmouseover=\"this.className='sousmenu_select';\" onmouseout=\"this.className='sousmenu_nonselect';\">" + url + "</tr></td>");
		}
	 }
   document.write("</table></center></td><td " + rectract_ok + "></td><td></td></tr><tr " + rectract_ok + "><td colspan='4'></td></tr>");
 }
document.write("</tbody></table>");

seulement comme la source de données de mon menu vient d'une requête SQL,
je voudrais savoir comment intégrer cette requête et faire le lien entre php et jvascript (je suis débutant sur les deux langages

).
c'est-à- dire transmettre le contenu du menu (un tableau) de php vers javascript.

Merci d'avance pour votre aide

**J0r_x** · 10/01/2007, 15h20

Remplis ton tableau en php et tu le rappel aprés dans ton javscript.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<?php 
$query = mysql_query("SELECT * FROM .... ");
$i=0;
while ($result=mysql_fetch_row($query)) {
   $categorie[$i] = new Array();
   $categorie[$i][0] = '"'.$result[0].'"'
   $categorie[$i][1] = '"'.$result[1].'"'
   $categorie[$i][2] = "_blank"
}
?>

**nbelg27** · 10/01/2007, 15h31

Merci pour ta réponse
mais comment tu fais pour appeler un tableau php à partir de javascrip t

voici la ligne qui fait appel à la fonction javascript :

Code :

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

1
2
 
 <script type="text/javascript" src="includes/menu.js"></script>

[PHP-JS] Menu vertical dynamique (source requête SQL)

Langage PHP

Discussions similaires

Partager

Partager