[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