Menu hierarchique php mysql javascript

Version imprimable

bonjour,
je souhaite créer , un menu déroulant vertical genre accordéon mais couplé avec une base de données.
j'ai téléchargé le menu déroulant vertical2 dans la galerie
http://css.developpez.com/galerie/?p...-verticaux#MV2
Pour cela, j'ai structuré ma base de données et réalisé la table suivante:
http://creuselimousin.free.fr/table.jpg
voici le code html pour incorporer mon script php

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
<div id="menu">
 
  <div class="menu" id="menu1" onclick="afficheMenu(this)">
		<a href="#">Menu 1</a>
	</div>    
 
	<div id="sousmenu1" style="display:none">
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.1</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.2</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.3</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.4</a>
		</div>
	</div>
 
	<div class="menu" id="menu2" onclick="afficheMenu(this)">
		<a href="#">Menu 2</a>
	</div>
	<div id="sousmenu2" style="display:none">
		<div class="sousmenu">
			<a href="#">Sous-Menu 2.1</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 2.2</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 2.3</a>
		</div>
	</div>
 
	<div class="menu" id="menu3" onclick="afficheMenu(this)">
		<a href="#">Menu 3</a>
	</div>
 
	<div class="menu" id="menu4" onclick="afficheMenu(this)">
		<a href="#">Menu 4</a>
	</div>
	<div id="sousmenu4" style="display:none">
		<div class="sousmenu">
			<a href="#" >Sous-Menu 4.1</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.2</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.3</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.4</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.5</a>
		</div>
	</div>
</div>

et le script php pour afficher les menus et sous menus correspondants:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 <?php
    mysql_select_db($database_dream, $dream);
    $query = 'SELECT item_menu, id_menu FROM menu WHERE id_menu_dir is NULL';
    $data = mysql_query($query) or die(mysql_error());
    echo '<div id="menu">';
    $i = 1;
    while($row = mysql_fetch_assoc($data)) {
    echo '<div class="menu" id="menu' . $i++ . '" onclick="afficheMenu(this);"><a href="#">' . $row['item_menu'] . '</a></div>';
    $subQuery = 'SELECT item_menu FROM menu WHERE id_menu = ' . $row['id_menu'];
    $subData = mysql_query($subQuery) or die(mysql_error());
    echo '<div id="sousmenu1" style="display:none;">';
    $j = 1;
    while ($subRow = mysql_fetch_assoc($subData)) {
    echo '<div class="sousmenu"><a href="#">' . $subRow['item_menu'] . '</a></div>';
    }
    echo '</div>';
    }
 
    echo '</div>';
    ?>

les menus principaux apparaissent , mais aucuns sous menus.
Avez-vous une idée de l'erreur?
Merci de m'aider

20/11/2011, 18h13
nextdev

Code:

<div id="sousmenu1" style="display:none;">

Sûr qu'il ne sont pas là du tout ? Dans la source html ?

Edit: En fait, tu as une erreur dans $subQuery, tu as sélectionné le mauvais id pour ta "jointure" des sous menus.
20/11/2011, 19h39
ideal23

et alors la solution d'après toi?
j'ai modifié avec:

Code:

$subQuery = 'SELECT item_menu FROM menu WHERE id_menu_dir =' . $row['id_menu'];

j'ai bien le menu principal de ordinateurs portable le premier menu avec les sous menus , mais pas les autres?
20/11/2011, 20h36
nextdev

Bizarre, ça devrait rouler...
Les autres sous menu sont ils présent dans la source html ?

Peut être ceci qui cloche pour un bon affichage :

Code:

echo '<div id="sousmenu'.$i.'" style="display:none;">';

Et initialise $i à 0 aulieu de 1.
20/11/2011, 20h49
ideal23

merci encore
la modification mélange les sous menu par rapport aux menus principaux.

Humm... en fait remet $i = 1 et ça devrait le faire :ccool:

Edit: et non alors en fait, on va changer l'itération

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
mysql_select_db($database_dream, $dream);
$query = 'SELECT item_menu, id_menu FROM menu WHERE id_menu_dir is NULL';
$data = mysql_query($query) or die(mysql_error());
echo '<div id="menu">';
$i = 1;
while($row = mysql_fetch_assoc($data)) {
echo '<div class="menu" id="menu' . $i . '" onclick="afficheMenu(this);"><a href="#">' . $row['item_menu'] . '</a></div>';
$subQuery = 'SELECT item_menu FROM menu WHERE id_menu = ' . $row['id_menu'];
$subData = mysql_query($subQuery) or die(mysql_error());
echo '<div id="sousmenu' . $i . '" style="display:none;">';
$j = 1;//??
while ($subRow = mysql_fetch_assoc($subData)) {
echo '<div class="sousmenu"><a href="#">' . $subRow['item_menu'] . '</a></div>';
}
echo '</div>';
$i++;
}
 
echo '</div>';
?>

20/11/2011, 21h22
ideal23

cette modification donne comme sous menu le même menu principal. ordinateurs de bureau donne comme sous menu , ordinateurs de bureau, idem pour les autres menus principaux.
20/11/2011, 22h05
nextdev

heuu... j'ai remis l'erreur de l'id, en copiant le code... remet ça

Code:

$subQuery = 'SELECT item_menu FROM menu WHERE id_menu_dir =' . $row['id_menu'];
20/11/2011, 22h39
ideal23

nextdev, merci
çà fonctionne parfaitement. Je ne suis pas encore à ton niveau. Bravo
20/11/2011, 23h44
nextdev

de rien ;)

Et je ne soutiens pas le code de ce menu, qui consomme un peu trop de ressource sql à mon goux... :mrgreen:
20/11/2011, 23h50
ideal23

ah bon, mais on peux aisément dans une partie administration faire toutes les modifs possible. pour les personnes qui ne veulent pas entrer dans le code, avec un formulaire c'est plus pratique pour eux.C'est ma prochaine mission.
21/11/2011, 00h21
nextdev

Binn on peu réaliser le meme menu, sur la meme table, mais avec une seule requête sql (aulieu des 4 actuelles qui vont encore augmenter à chaque section rajoutée)

Bon il y aurais par contre une boucle php en plus, pour pré traiter le menu, mais c'est quand même mieux que 3 req sql.
Attention ça marche bien pour ce cas précis, ou justement la table n'est pas grosse, et que en plus dans l'exemple, la table est au final "scanner en entière" par 4 requetes...
21/11/2011, 00h37
ideal23

Cette table sera beaucoup plus importante , même très importante. Ensuite je veux créer une autre table , et avec des requêtes la joindre à celle du menu. c'est un genre site vitrine. comme ici:
http://www.mon-carrelage.com/index.php?page=promotions
moins conséquente et pas de panier bien sûr
21/11/2011, 01h07
nextdev

En fait la méthode que je parle fonctionnera bien si tu affiches toujours le même menu, peu importe la page (et que donc ce menu affiche toujours au final "la table entière")

Et avec le code actuel, il faut à priori une autre table, pour obtenir un autre menu, et donc la table de chaque menu est bien scannée en entière à chaque fois.

Bon de tout manière, il y a pas grand chose à gagner tant que ton script ne sera pas sollicité.

pour ceux que çà intéresse voici le code complet:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  <?php
mysql_select_db($database_dream, $dream);
$query = 'SELECT item_menu, id_menu FROM menu WHERE id_menu_dir is NULL';
$data = mysql_query($query) or die(mysql_error());
echo '<div id="menu">';
$i = 1;
while($row = mysql_fetch_assoc($data)) {
echo '<div class="menu" id="menu' . $i . '" onclick="afficheMenu(this);"><a href="#">' . $row['item_menu'] . '</a></div>';
$subQuery = 'SELECT item_menu FROM menu WHERE id_menu_dir =' . $row['id_menu'];
 
$subData = mysql_query($subQuery) or die(mysql_error());
echo '<div id="sousmenu' . $i . '" style="display:none;">';
$j = 1;//??
while ($subRow = mysql_fetch_assoc($subData)) {
echo '<div class="sousmenu"><a href="#">' . $subRow['item_menu'] . '</a></div>';
}
echo '</div>';
$i++;
}
 
echo '</div>';
?>