[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

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager