Discussion :

[bayzil]

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]

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]

Regarde ici peut etre ca peut aider ....

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

[bayzil]

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]

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]

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]

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]

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

[bayzil]

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]

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]

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]

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]

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]

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