Menu hierarchique php mysql javascript

**ideal23** · 20/11/2011, 12h36

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 :

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

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

**nextdev** · 20/11/2011, 19h13

Code :

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

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

**ideal23** · 20/11/2011, 20h39

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

Code :

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

   $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?

**nextdev** · 20/11/2011, 21h36

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 :

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

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

Et initialise $i à 0 aulieu de 1.

**ideal23** · 20/11/2011, 21h49

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

**nextdev** · 20/11/2011, 22h00

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

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

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
<?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>';
?>

**ideal23** · 20/11/2011, 22h22

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.

**nextdev** · 20/11/2011, 23h05

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

Code :

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

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

**ideal23** · 20/11/2011, 23h39

nextdev, merci
çà fonctionne parfaitement. Je ne suis pas encore à ton niveau. Bravo

**nextdev** · 21/11/2011, 00h44

de rien

Et je ne soutiens pas le code de ce menu, qui consomme un peu trop de ressource sql à mon goux...

**ideal23** · 21/11/2011, 00h50

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.

**nextdev** · 21/11/2011, 01h21

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

**ideal23** · 21/11/2011, 01h37

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

**nextdev** · 21/11/2011, 02h07

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é.

**ideal23** · 21/11/2011, 12h01

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

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
  <?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>';
?>

Menu hierarchique php mysql javascript

Langage PHP

Discussions similaires

Partager

Partager