menu en PHP/mySQL

Bonjour a toutes et tous,
je voulais savoir si quelqu'un pouvait m'aider à faire un menu en PHP/SQL comme celui-ci :

http://css.developpez.com/galerie/de...alderoulant2/#

En récupérant les titres "menu1","menu1",etc. à partir d'une SGBD SQL et les sous-menu également.

J'ai des notions en php/sql, il me faudrait juste un petit coup de pouce s'il vous plait

Merci pour votre aide.

Bonsoir,
j'ai posté le message de chez ma soeur et je n'avais pas mon code source.

J'ai deux tables comme cela :

Code:

1
2
3
CREATE TABLE rubrique (numrubrique INT not null, nomrubrique VARCHAR (20) NOT NULL, numssrubrique INT not null, PRIMARY KEY (numrubrique));

CREATE TABLE ss_rubrique (numssrubrique INT not null AUTO_INCREMENT, nomssrubrique VARCHAR (40) NOT NULL, photossrubrique VARCHAR (40), numrubrique INT not null, PRIMARY KEY (numssrubrique));

Elles contiennent les données suivantes :

Code:

1
2
3
INSERT INTO rubrique (numrubrique, nomrubrique, numssrubrique) VALUES ("1", "écrits", "1"), ("2", "scènes", "2");

INSERT INTO ss_rubrique (numssrubrique, nomssrubrique, photossrubrique, numrubrique) VALUES ("1", "théâtre", "foto1.gif", "1"), ("2", "enfance et jeunesse", "foto2.gif", "2");

J'ai trois fichiers.

Un fichier appelé functions.js qui contient la fonction pour le menu :

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
function afficheMenu(obj){
    
    var idMenu     = obj.id;
    var idSousMenu = 'sous' + idMenu;
    var sousMenu   = document.getElementById(idSousMenu);
    
    /*****************************************************/
    /**    on cache tous les sous-menus pour n'afficher    **/
    /** que celui dont le menu correspondant est cliqué **/
    /** où 4 correspond au nombre de sous-menus         **/
    /*****************************************************/
    for(var i = 1; i <= 4; i++){
        if(document.getElementById('sousmenu' + i) && document.getElementById('sousmenu' + i) != sousMenu){
            document.getElementById('sousmenu' + i).style.display = "none";
        }
    }
    
    if(sousMenu){
        //alert(sousMenu.style.display);
        if(sousMenu.style.display == "block"){
            sousMenu.style.display = "none";
        }
        else{
            sousMenu.style.display = "block";
        }
    }
    
}

Un fichier nommé style.css qui contient les styles pour le menu :

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
*{
    margin:0;
    padding:0;
}
#menu{
    width:150px;
    margin:20px auto 0 auto;
}
.menu, .sousmenu{
    text-align:center;
}
.menu{
    height:18px;
    width:150px;
    padding:2px 0;
    background:#404040;
    color:#fff;
}
.sousmenu{
    height:18px;
    width:150px;
    padding:1px 0;
    background:#808080;
    color:#fff;
}
.menu a{
    display:block;
    width:100%;
    height:100%;
    color:#fff;
    font-family:arial,sans-serif;
    font-size:12px;
    font-weight:bold;
    text-decoration:none;
    background:#404040;
}
.sousmenu a{
    display:block;
    width:100%;
    height:100%;
    color:#123456;
    font-family:arial,sans-serif;
    font-size:12px;
    font-weight:bold;
    text-decoration:none;
}
.menu a:hover, .sousmenu a:hover, .menu a:active, .sousmenu a:active, .menu a:focus, .sousmenu a:focus{
    color:#654321;
}

La page sur laquelle j'appelle le menu dynamiquement ainsi que les fichiers "functions.js" et "style.css" :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content=" />
<meta name="description" content=" />
<title></title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <link rel="stylesheet" href="menu/style.css" type="text/css" />
     <script type="text/javascript" src="menu/functions.js"></script>
</head>
<body>
<table width="900" height="421" border="0" align="center" bgcolor="#000000">
  <tr>
    <td width="22">&nbsp;</td>
    <td width="145" valign="top"><br />
    <?php include"menu/menu.php" ?>; </td>
    <td width="682" valign="top"><br />

Puis, le fichier du menu :

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
<?php
require("identification/connexion_sql.php");
$db = mysql_connect($host_db,$login_db,$password_db) or die ("impossible de se connecter a la base".mysql_error());
mysql_select_db($name_db,$db) or die ("base inexistante".mysql_error());
$req = mysql_query("SELECT * FROM rubrique, ss_rubrique WHERE rubrique.numssrubrique = ss_rubrique.numssrubrique AND rubrique.numrubrique = ss_rubrique.numrubrique") or die ("impossible d'effectuer la requête");
$arrayFlag = array();
while($shopone = mysql_fetch_array($req)){
$nomrubrique = stripslashes($shopone['nomrubrique']);
$nomssrubrique = stripslashes($shopone['nomssrubrique']);
$nomrubrique2 = utf8_encode($nomrubrique);
$nomssrubrique2 = utf8_encode($nomssrubrique);
if( !isset($arrayFlag[$shopone['numrubrique']])) // On vérifie que le champ n'a pas été déjà affiché
{
print'
<div id="menu">
    <div class="menu" id="menu1" onclick="afficheMenu(this)">
        <a href="#">'.$nomrubrique2.'</a>
    </div>';
$arrayFlag[$shopone['numrubrique']] = true;} // On signale qu'on a affiché cette catégorie au moins une fois

print'<div id="sousmenu1" style="display:none">
        <div class="sousmenu">
            <a href="#">'.$nomssrubrique2.'</a>
        </div>
        </div>
        </div>';  
 }
 mysql_close();
?>

Pour l'instant, le résultat n'est pas terrible comme vous pourrez le constater :

http://www.la-grange-sardieres.fr/si...esentation.php

Je voudrai le même résultat que le menu pris en exemple dans mon 1er message, mais dans ce que j'ai fait il y a quelque chose qui ne va pas.

Merci beaucoup pour votre aide.

J'ai avancé un peu mais le résultat n'est pas encore ça.

J'ai changé le code du menu.

Voici mon nouveau code :

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
require("identification/connexion_sql.php");
$db = mysql_connect($host_db,$login_db,$password_db) or die ("impossible de se connecter a la base".mysql_error());
mysql_select_db($name_db,$db) or die ("base inexistante".mysql_error());
$req = mysql_query("SELECT * FROM rubrique, ss_rubrique WHERE ss_rubrique.numrubrique = rubrique.numrubrique ORDER BY rubrique.numrubrique ASC, ss_rubrique.numssrubrique") or die ("impossible d'effectuer la requête");
$arrayFlag = array();
print'<div id="menu">';
while($shopone = mysql_fetch_array($req)){
$nomrubrique = stripslashes($shopone['nomrubrique']);
$nomssrubrique = stripslashes($shopone['nomssrubrique']);
$nomrubrique2 = utf8_encode($nomrubrique);
$nomssrubrique2 = utf8_encode($nomssrubrique);
if( !isset($arrayFlag[$shopone['numrubrique']])) // On vérifie que le champ n'a pas été déjà affiché
{

print'
	<div class="menu" id="menu'.$shopone['numrubrique'].'" onclick="afficheMenu(this)">
		<a href="#">'.$nomrubrique2.'</a>
	</div>';
	
$arrayFlag[$shopone['numrubrique']] = true;} // On signale qu'on a affiché cette catégorie au moins une fois

if( !isset($arrayFlag[$shopone['numrubrique']])) // On vérifie que le champ n'a pas été déjà affiché
{

print'<div id="sousmenu'.$shopone['numrubrique'].'" style="display:none">
					<div class="sousmenu">
					<a href="#">'.$nomssrubrique2.'</a>
		</div>';  
 }else{
 print'<div class="sousmenu">
					<a href="#">'.$nomssrubrique2.'</a>
		</div>';  
		}
 }
print'</div>';
 mysql_close();
?>

Puis le résultat :

http://www.la-grange-sardieres.fr/si...esentation.php

Quelqu'un pourrait m'aider ?

problème résolu