[PHP-JS] Javascript | Menu php déroulant

Version imprimable

Bonjour,
Aprés avoir consulté pas mal de post du forum je me décide à exposer mon problème :
Je suis en stage et je me dois de reprendre certain travaux qu'un élève avant moi a crée :) il s'y connais plus que moi c'est clair ! :mouarf:

Vous pouvez voir ici le menu en question ( à gauche ) :
http://www.vuici.com/

Le menu est un menu en php utilisant deux requetes et deux boucles.
J'ai decidé d'utiliser du javascript pour faire en sorte qu'en cliquant sur une catègorie les rubriques concernées apparaises ou se cache.

Mais voilà, je n'ai pas trouvé de sujet intègrant php et javascript pour un menu deroulant. En " bidouillant " un peu j'ai pu arriver à cela :
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 <table border=1 cellPadding=3 cellSpacing=0 bordercolor="#9BC0FF" width="180"> <tr> <td bordercolor="#003399"> <table border=0 cellPadding=0 cellSpacing=0 width="180" align="center"> <tr> <td align="center" height="54" class="titre_serv"> <img src="images/categories.jpg" width="180" height="54"></td> </tr> <tr> <td height="5"></td> <tr> <? $resulta=mysql_db_query("vuici","Select * From categories Order By nomcat;"); $resultb=mysql_db_query("vuici","Select * From rubriques Order By nomrub;"); while ($rowa=mysql_fetch_array($resulta)) { echo '<td align="center" height="24" background="images/miniminou.jpg" class="cat_menu" onClick="clicMenu()"> '.$rowa["nomcat"].' </td> </tr> <tr valign="top" bgcolor="#ffffff" style="display:none" id="menu"> <td>'; mysql_data_seek($resultb,0); while ($rowb=mysql_fetch_array($resultb)) { if ($rowa["numcat"]==$rowb["numcat"]) { echo ' <a href="services.php?rub='.$rowb["numrub"].'" class="menu_gauche">'.$rowb["nomrub"].'<br></a>'; } } echo '</td></tr><tr><td height="4"></td></tr>'; } ?> </tr> </table> </td> </tr> </table> <script language="Javascipt"> function clicMenu() { // Booléen reconnaissant le navigateur isIE = (document.all) isNN6 = (!isIE) && (document.getElementById) // Compatibilité : l'objet menu est détecté selon le navigateur if (isIE) menu = document.all['menu' + num]; if (isNN6) menu = document.getElementById('menu' + num); if (menu.style.display == "none"){ // Cas ou le tableau est caché menu.style.display = "" } else { // On le cache menu.style.display = "none" } } </script>
désolé pour la tartine :x , forcément cela ne marche pas du tout et c'est la première fois que je touche au javascript.
Si quelqu'un pouvais me montrer la voie, ou si il a déjà vu un exemple de ce type ...

Merci d'avance pour la patience que vous m'accordez

17/01/2007, 11h45
bayzil

re

Bonjour,
Apres avoir parcouru bon nombre de post à travers le web, je ne trouve toujours pas comment faire pour transfomer mon menu en menu déroulant :s
Quelqun aurait t'il une idée de génie qui pourrais m'éclairer ?
Amicalement, bayzil.
17/01/2007, 13h11
willoi

Regarde ici peut etre ca peut aider ....

http://www.aidejavascript.com/article151.html

Merci pour la reponse,
J'ai trouvé des choses semblable à ce que tu ma link, ce n'est pas se que je recherche :s

voici le menu sans javascript :
J'y ajoute quelques commentaires pour me faire comprendre.
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 <table border=1 cellPadding=3 cellSpacing=0 bordercolor="#9BC0FF" width="180"> <tr> <td bordercolor="#003399"> <table border=0 cellPadding=0 cellSpacing=0 width="180" align="center"> <tr> <td align="center" height="54" class="titre_serv"> <img src="images/categories.jpg" width="180" height="54"></td> </tr> <tr> <td height="5"></td> <tr> <? $resulta=mysql_db_query("vuici","Select * From categories Order By nomcat;"); $resultb=mysql_db_query("vuici","Select * From rubriques Order By nomrub;"); while ($rowa=mysql_fetch_array($resulta)) { echo '<td align="center" height="24" background="images/miniminou.jpg" class="cat_menu"> '.$rowa["nomcat"].' // ici cela affiche les titres de catégorie, je voudrais qu'en cliquant sur l'un deux les sous titres correspondant se developpe en dessou </td> </tr> <tr valign="top" bgcolor="#ffffff"> <td>'; mysql_data_seek($resultb,0); while ($rowb=mysql_fetch_array($resultb)) { if ($rowa["numcat"]==$rowb["numcat"]) // voici le test pour savoir qui va avec qui ( la 2eme boucle quoi ... ) { echo ' <a href="services.php?rub='.$rowb["numrub"].'" class="menu_gauche">'.$rowb["nomrub"].'<br></a>'; } } echo '</td></tr><tr><td height="4"></td></tr>'; } ?> </tr> </table> </td> </tr> </table>
Je vois tellement de truc à droite à gauche, mais aucun menu partant de deux table mysql -_- je suis paumé !

Une astuce ? je pense que le javascript peux fonctionner, sur un click => un évènement, il faudrait sauvegarder le numero de la categorie et afficher les rubriques associé au numero de la categorie, mais comment ? :(

ça donne mal à la tête tous ces codes :aie:

17/01/2007, 17h43
Macintoc

Regarde ici, ça explique comment faire un menu déroulant multi-dimensionnel en CSS pur (enfin presque, y a juste un fonction javascript qui sert a émuler la pseudo classe CSS hover sous IE, même pas 10 lignes de code).
17/01/2007, 18h02
bayzil

Bonjour,
Le style du menu ne doit pas changer, les sous rubriques doivent juste apparaitre ou disparaitre sur clic de la catègorie concernée.
Dans les codes à base de :
</ul> </li> <li> etc .. les sous menus sont " connus ", alors que moi resultent d'une requete, donc sont écrit " automatiquement ".
C'est cela qui me pose probleme ;)

Le fait d'utiliser javascript ne m'enbette pas du tout, au contraire ! mais le lier dans le php, bref je sais pas cuisiner cette soupe de code :lol:

Je sens que je vais devoir "squatter" ma prof de DA ...

Coté php, il suffit de faire un script qui ressemble a :

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
 
<?php
$sql='SELECT id, menu, lien
      FROM main_menu';
$query=mysql_query($sql);
while($result=mysql_fetch_array($query)) $menus[]=$result;
 
foreach($menus as $menu){
    $sql='SELECT sous_menu, lien
          FROM sous_menu
          WHERE id_main_menu='.$menu[0];
    $query=mysql_query($sql);
    while($result=mysql_fetch_array($query)) $sous_menus[]=$result;
}?>
 
<ul id="menu"><?php
    for($index=0,$index<count($menus);index++){
        $menu=$menus[$index];?>
        <li>
            <a href="<?php echo $menu[2]?>"><?php echo $menu[1]?></a><?php
            if(is_array($sous_menus[$index])){?>
                <ul><?php
                foreach($sous_menus as $sous_menu){
                    <li><a href="<?php echo $sous_menu[1]?>"><?php echo $sous_menu[0]?></a></li>
                }?>
                </ul><?php
            }?>
        </li><?php
    }?>
</url>

Le script est volontairement simpliste. Y a pas mal de truc qui pourrait être améliorer et optimisé, notamment si une autre méthode de stockage des menu avait été utilisé sous mysql. Mais bon, ça dépasse le cadre de ce topic.

Sinon, pour le fonctionnement du menu, c'est évidemment a adapter en fonction de tes besoins en modifiant le fichier CSS et javascript en conséquence ;)

18/01/2007, 11h05
bayzil

Bonjour,
Merci pour cet exemple, je vais me mettre au travail :)

C'est encore moi,

voilà où j'en suis arrivé :

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
<?php
$sql='SELECT *
      FROM categories
      Order By nomcat';
$query=mysql_query($sql);
while($result=mysql_fetch_array($query)) $menus[]=$result;
 
foreach($menus as $menu){
    $sql='SELECT *
          FROM rubriques
          WHERE numcat='.$menu[0];
          
    $query=mysql_query($sql);
    while($result=mysql_fetch_array($query)) $sous_menus[]=$result;
}?>
 
<ul id="menu"><?php
 
for($index = 0; $index < count($menus); $index++) {
        $menu=$menus[$index];?>
        <li>
            <a href="<??>"><?php echo $menu[1]?></a><?php
            if(is_array($sous_menus[$index])){?>
                <ul><?php
                foreach($sous_menus as $sous_menu){
                    
echo '<li><A HREF="services.php?rub='.$sous_menu[0].'" class="menu_gauche">'.$sous_menu[1].'</li><br></A>';
 
                }?>
                </ul><?php
            }?>
        </li><?php
    }?>
</url>

J'avou que j'ai pas tout compris au code, bref, ce code m'affiche la premiere catégorie puis toutes les rubriques, suivit de la deuxieme catégorie puis toutes les rubriques.
Un exemple plus visuel ou genre et Nombre sont les catégories :
genre à comme rubriques : lol, mdr, kikou.
nombre à comme rubriques: zut, flutte.

Et bien mon menu affichera :
GENRE
lol
mdr
kikou
zut
flutte
NOMBRE
lol
mdr
kikou
zut
flutte

Je n'arrive pas à me situer dans le code, savoir où se gère la "jointure" ...

Ptit édit : Les menus, menu, sous_menu, etc => Omagag ^^ la torture :aie:

Oups... oui, dans le foreach($menus as $menu), il faut préciser l'index courant du menu dans le tableau de sous-menu. Donc rajouter un $key=> au foreach() et reporter l'index dans le tableau $sous-menu.

Ce qui donne:
Code:

1 2 3 4 5 6 7 8 9 foreach($menus as $index=>$menu){ $sql='SELECT * FROM rubriques WHERE numcat='.$menu[0]; $query=mysql_query($sql); while($result=mysql_fetch_array($query)) $sous_menus[$index][]=$result; }?>
Et dans le foreach($sous_menus as $sous_menu), il faut donc préciser l'index du menu également :
Code:

1 2 3 4 foreach($sous_menus as $sous_menu){?> <li><a href="services.php?rub=<?php echo $sous_menu[$index][0]?>" class="menu_gauche"><?php echo $sous_menu[$index][1]?></a></li><br /><?php }?>
Au passage, tu peux en profiter pour remplacer la ligne :
Code:

1 2 for($index = 0; $index < count($menus); $index++)
Par
Code:

1 2 foreach($menus as $index=>$menu)
Ce qui te permet de supprimer la ligne juste en dessous, $menu=$menus[$index];

Bonjour,
Encore merci pour l'aide, j'ai modifié le code selon tes indications le voici :

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
<?php
$sql='SELECT *
      FROM categories
      Order By nomcat';
$query=mysql_query($sql);
while($result=mysql_fetch_array($query)) $menus[]=$result;
 
foreach($menus as $index=>$menu){
    $sql='SELECT *
          FROM rubriques
          WHERE numcat='.$menu[0];
          
    $query=mysql_query($sql);
    while($result=mysql_fetch_array($query)) $sous_menus[$index][]=$result;
}?>
 
<ul id="menu"><?php
 
//for($index = 0; $index < count($menus); $index++) {
foreach($menus as $index=>$menu)
        ?>
        <li>
            <a href="<??>"><?php echo $menu[1]?></a><?php
 
            if(is_array($sous_menus[$index])){?>
                <ul><?php
                foreach($sous_menus as $sous_menu){
                    
//echo '<li><A HREF="services.php?rub='.$sous_menu[0].'" class="menu_gauche">'.$sous_menu[1].'</li><br></A>';
 
             }?>   
<li><a href="services.php?rub=<?php echo $sous_menu[$index][0]?>" class="menu_gauche"><?php echo $sous_menu[$index][1]?></a></li><br /><?php
}?>
                </ul><?php
            ?>
        </li><?php
    ?>
</url>

il y a une erreur : "Notice: Undefined offset: 13 in c:\program files\easyphp1-8\www\vuici.com\include\menu_g.php on line 26"

c'est à dire cette ligne :

Code:

if(is_array($sous_menus[$index])){?>

édit : ne pas faire gaffe aux // :mouarf:

Tu devrais faire un petit effort sur l'indentation, tu te serais aperçus qu'il manquait des '{' et que certaines balises étaient placées au mauvaise endroit :p

Sinon, c'est pas normal qu'il te mette cette erreur a cette ligne, vu que le is_array est précisément là pour éviter cette erreur :-/

Essayes avec ça :

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
 
<?php
$sql='  SELECT *
                FROM categories
                Order By nomcat';
$query=mysql_query($sql);
while($result=mysql_fetch_array($query)) $menus[]=$result;
 
foreach($menus as $index=>$menu){
        $sql='  SELECT *
                        FROM rubriques
                        WHERE numcat='.$menu[0];
        $query=mysql_query($sql);
        while($result=mysql_fetch_array($query)) $sous_menus[$index][]=$result;
}?>
 
<ul id="menu"><?php
        foreach($menus as $index=>$menu){?>
		<li>
			<a href="<??>"><?php echo $menu[1]?></a><?php
                        if(is_array($sous_menus[$index])){?>
				<ul><?php
                                        foreach($sous_menus as $sous_menu){
                                                <li><a href="services.php?rub=<?php echo $sous_menu[$index][0]?>" class="menu_gauche"><?php echo $sous_menu[$index][1]?></a></li><?php
                                        }?>
				</ul><?php
                        }?>
		</li><?php
        }?>
</url>

Si y a toujours l'erreur, remplace is_array par isset.

22/01/2007, 11h31
bayzil
Bonjour,
Oui j'ai pas travaillé du weekend je l'avou ! ;)
allez, je mis met !

édit : Un message d'erreur apparait :
" Parse error: parse error in c:\program files\easyphp1-8\www\vuici.com\include\menu_g.php on line 25 "

Soit :
Code:

1 2 foreach($sous_menus as $sous_menu){ <li><a href="services.php?rub=<?php echo $sous_menu[$index][0]?>" class="menu_gauche"><?php echo $sous_menu[$index][1]?></a></li><?php
j'ai donc changer

Code:

foreach($sous_menus as $sous_menu){

par

Code:

foreach($sous_menus as $sous_menu){?>

donc mon menu s'affiche comme cela :
(Exemple)
Administration et Consulting
Assistance juridique
Agility
Théatre
Personnes âgées
Locations
Coiffure et relooking
Demandes d'emplois
Animations pour enfants
Sécurité
Conseil informatique
Couture
Camping
Aide aux Devoirs
Animaux
Consulting
Dressage d'animaux
Arts plastiques
Personnes
...

Voilà donc les sous_menu ne correspondent pas :s; il y en a 13 par categories, bizarement, franchement ... j'ai de plus en plus peur du vendredi 13 ! :cry:

j'ai aussi ça :

Auto - Moto - Bateau
Secrétariat
Toilettage animalier

Notice: Undefined offset: 4 in c:\program files\easyphp1-8\www\vuici.com\include\menu_g.php on line 25

Notice: Undefined offset: 4 in c:\program files\easyphp1-8\www\vuici.com\include\menu_g.php on line 25

Nettoyage Auto et Moto

is_array ; isset n'y change rien.

point positif : si on peut positiver ... :aie: les categories et sous_categorie ne se retrouve pas deux fois.

Bonjour,
Voilà je met à jour le post en indiquant que je me suis tourné vers du javascript ce qui donne :

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
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
<script language="JavaScript">
<!--
 
function SymError()
{
  return true;
}
 
window.onerror = SymError;
 
var SymRealWinOpen = window.open;
 
function SymWinOpen(url, name, attributes)
{
  return (new Object());
}
 
window.open = SymWinOpen;
 
//-->
</script>
 
<script language="javascript">
function montre(val)
{
  document.getElementById(val).style.display = '';
}
function cache(val)
{
  document.getElementById(val).style.display = 'none';
}
</script>
 
 
<table border=1 cellPadding=3 cellSpacing=0 bordercolor="#9BC0FF" width="180">
	<tr>
		<td bordercolor="#003399">
      <table border=0 cellPadding=0 cellSpacing=0 width="180" align="center" style="cursor:hand">
        <tr>
       	  <td align="center" height="54" class="titre_serv"> <img src="images/categories.jpg" width="180" height="54">
</td>
   	</tr>
	<tr>
		 <td height="5"></td>
    <tr>
 
 
 
 
<?
 
 
//extraction des rubriques
$req="SELECT * FROM categories ORDER BY nomcat;";
$rub=mysql_query($req);
// boucle de lecture des rubriques
while ($ligrub=mysql_fetch_array($rub))
{
  echo '<td align="center" height="24" background="images/miniminou.jpg" class="cat_menu"><a onclick="montre(this.value);" onclick="cache(this.value);" value="'.$ligrub[0].'">'.$ligrub[1] ;
  echo '</a><br></td>
	</tr>         
 
                <tr valign="top" bgcolor="#ffffff">
	<td>';
 
 
  $norub=$ligrub[0];
  // affichage des sous-rubriques si elles ont été demandées pour cette rubrique
      $req2="SELECT * FROM rubriques where numcat=$norub ORDER BY 2;";
      $ssrub=mysql_query($req2);
      if (mysql_num_rows($ssrub)!=0)
      {  echo '<div style="display:none" id="'.$ligrub[0].'">' ;
         // boucle de lecture des sous-rubriques
         while ($ligssrub=mysql_fetch_array($ssrub))
            echo '&nbsp;<a href="services.php?rub='.$ligssrub["numrub"].'" class="menu_gauche">'.$ligssrub[1].'<br></a>';
         echo '</div>' ;
      }
  echo '</td></tr><tr><td height="4"></td></tr>';
}
?>
 
</tr>
</table>
		</td>
	</tr>
</table>
 
<script language="JavaScript">
<!--
var SymRealOnLoad;
var SymRealOnUnload;
 
function SymOnUnload()
{
  window.open = SymWinOpen;
  if(SymRealOnUnload != null)
     SymRealOnUnload();
}
 
function SymOnLoad()
{
  if(SymRealOnLoad != null)
     SymRealOnLoad();
  window.open = SymRealWinOpen;
  SymRealOnUnload = window.onunload;
  window.onunload = SymOnUnload;
}
 
SymRealOnLoad = window.onload;
window.onload = SymOnLoad;
 
//-->
</script>

Voilà, si ça peut aider quelqun un jour pour la création de menu dynamique lié aux tables php :) !

Il y a juste un problème dans ce code c'est la fermeture des menus qui marche pas, j'y travail, mais c'est surment pas grand chose surment l'appel des fonctions :

Code:

<a onclick="montre(this.value);" onclick="cache(this.value);" value="'.$ligrub[0] .... etc

apparemment ya que le premier onclick qui est prit en compte :s

Last Édit ! : voilà la reponse :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script language="javascript">
function showm(val)
{
if  (document.getElementById(val).style.display == '')
    {
    document.getElementById(val).style.display = 'none';
    }
    else
    {
    document.getElementById(val).style.display = '';
    }
}
</script>

Merci pour l'aide, enfin fini ce @^#% de menu :)