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

**bayzil** · 16/01/2007, 11h21

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 !

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 :

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
 
<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 '&nbsp;<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

, 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

**bayzil** · 17/01/2007, 10h45

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.

**willoi** · 17/01/2007, 12h11

Regarde ici peut etre ca peut aider ....

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

**bayzil** · 17/01/2007, 15h46

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 :

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
<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 '&nbsp;<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

**Macintoc** · 17/01/2007, 16h43

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

**bayzil** · 17/01/2007, 17h02

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

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

**Macintoc** · 17/01/2007, 17h38

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

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

**bayzil** · 18/01/2007, 10h05

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

**bayzil** · 18/01/2007, 14h49

C'est encore moi,

voil� o� j'en suis arriv� :

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

**Macintoc** · 18/01/2007, 16h00

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Par

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
foreach($menus as $index=>$menu)

Ce qui te permet de supprimer la ligne juste en dessous, $menu=$menus[$index];

**bayzil** · 19/01/2007, 10h40

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

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

S�lectionner tout - Visualiser dans une fen�tre � part

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

�dit : ne pas faire gaffe aux //

**Macintoc** · 19/01/2007, 16h11

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 :

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

**bayzil** · 22/01/2007, 10h31

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

foreach($sous_menus as $sous_menu){

par

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 !

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

les categories et sous_categorie ne se retrouve pas deux fois.

**bayzil** · 23/01/2007, 11h13

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

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

S�lectionner tout - Visualiser dans une fen�tre � part

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

S�lectionner tout - Visualiser dans une fen�tre � part

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

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

JavaScript

Discussions similaires

Partager

Partager