menu en PHP/mySQL

**quaresma** · 19/10/2010, 15h01

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.

**quaresma** · 19/10/2010, 21h13

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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

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

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

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

**quaresma** · 20/10/2010, 16h48

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 :

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

**quaresma** · 31/10/2010, 23h36

problème résolu

menu en PHP/mySQL

Langages serveur

Vue hybride

Discussions similaires

Partager

Partager