[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, 10h45
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, 12h11
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, 16h43
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, 17h02
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, 10h05
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, 10h31
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 :)