créer un menu html (css) d'une façon récursive
3 participants
Page 1 sur 1
créer un menu html (css) d'une façon récursive
Salut à tous !
je viens juste de finir avec ce code (stage php/mySQL) :
il vous faut deux tables dans la base mySQL :
menu (idItem, txtItem, niveau)
est_sous_menu_de (idSousMenu, idMenu)
exemple :
.\menu.php
.\lib\connexion.php
.\css\menu.css
je suis désolé si le code n'est pas bien présenté : je débute
Bonne lecture !
je viens juste de finir avec ce code (stage php/mySQL) :
il vous faut deux tables dans la base mySQL :
menu (idItem, txtItem, niveau)
est_sous_menu_de (idSousMenu, idMenu)
exemple :
menu1 (1, "Fichier", 1)
menu2 (2, "Edition", 1)
menu3 (3, "Enregistrer", 2)
est_sous_menu_de1 (3, 1) // "Enregistrer" est un "sous_menu" de "Fichier"..
.\menu.php
- Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<!-- Feuille de style du menu -->
<link rel="stylesheet" type="text/css" href="css/menu.css">
<body>
<!-- Construction dynamique du menu -->
<?php
require("lib/connexion.php");
/* Fonction récursive qui construit un menu et ses sous-menus et leurs sous-menus...
* @param :
* $idItem: identifiant du menu à créer
* $niveau: niveau de profondeur du menu (0: menu; 1: sous-menu; 2: sous-sous-menu; ...)
*/
function creerItem ($idItem, $niveau) {
// ici on récupère txtItem et niveau d'après idItem passé en paramètre
$row = mysqli_fetch_array(db_query("SELECT txtItem, niveau FROM menu WHERE idItem = " . $idItem));
$txtItem = $row[0];
$niveauItem = $row[1];
// S'il cet item est un sous-menu, utilisons la récursivité pour construire son arborescence..
//(un item est un sous-menu s'il a au moins une entrée dans la table est_sous_menu_de)
$nbEnregistrement = mysqli_fetch_array(db_query("SELECT count(*) FROM est_sous_menu_de WHERE idMenu = " . $idItem));
if ($niveauItem[0] == $niveau) {
if ($nbEnregistrement[0] != 0) {
echo ' <li class="sousmenu"><a href="' . $txtItem . '">' . $txtItem . '</a>';
echo "\n";
echo '<ul class="niveau' . ($niveau + 1) . '">';
echo "\n";
$sousItem = db_query("SELECT * FROM est_sous_menu_de WHERE idMenu = " . $idItem);
while ($itemRow = mysqli_fetch_array($sousItem)) {
// appel récursif
creerItem($itemRow[0], $niveau+1);
}
echo '</ul></li>';
echo "\n";
}
else {
echo ' <li><a href="' . $txtItem . '">' . $txtItem . '</a></li>';
echo "\n";
}
}
}
/* Fonction qui utilise creerItem() pour construire le menu */
function creerArboMenu () {
/* Connexion à la base pour récupérer les éléments du menu */
$menuItems = db_query("SELECT * FROM menu");
// On crée autant d'items qu'on a du récupérer
while($row = mysqli_fetch_array($menuItems)) {
creerItem($row[0], 1);
}
}
/* Notre programme principal */
echo '<div id="menu">';echo "\n";
echo '<ul class="niveau1">';echo "\n";
creerArboMenu();
echo '</ul>';echo "\n";
echo '</div>';echo "\n";
?>
</body>
</html>
.\lib\connexion.php
- Code:
<?php
// Fonction qui retourne une connexion vers la base de donnée
function db_connect () {
$base="coachimagecom";
$link=mysqli_connect("localhost", "root", "", $base) or die ("impossible de se connecter : " . mysqli_connect_error() . "\n");
if($link == FALSE){
echo "Erreur : " . mysqli_connect_error() . "\n";
exit;
}
// on choisit la bonne base
/*if(mysqli_select_db($link, $base) == FALSE){
print "erreur ".mysql_error()."\n";
mysql_close($link);
exit;
}*/
return ($link);
}
// Fonction qui éxecute $requete et renvoit le résultat
function db_query ($requete) {
$link = DB_connect();
$rs = mysqli_query($link, $requete);
return $rs;
}
?>
.\css\menu.css
- Code:
/* Feuille de style pour décorer le menu déroulant */
/* On définit la taille de la div du menu ainsi que la taille des parties du menu */
div#menu {
width: 150px;
}
div#menu ul {
font-family: Tw Cen MT;
padding: 0;
width: 170px;
border: 1px solid;
margin: 0px;
text-align: center;
background-color: #000099;
}
/* On positionne les éléments du menu */
div#menu ul li {
position: relative;
list-style: none; /* on enlève les icones de listes */
border-top: 5px solid; /* ajout d'une bordure de séparation d'éléments */
border-bottom: 5px solid; /* ajout d'une bordure de séparation d'éléments */
border-color: #000080;
}
div#menu ul ul {
position: absolute;
top: 0;
left: 170px; /* 100 px correspond au décalage à droite, on décale de la taille de ul de base */
display: none;
}
div#menu li a {
color: #FFFFFF;
text-decoration: none; /* plus de soulignement pour les liens */
}
/* Lors du survol avec la souris, les sous-menus apparaissent grâce à display: block */
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {
display: block;
}
/* Lors du survol de la souris, les items prennent une couleur différente */
div#menu li:hover {
background-color: #6600FF;
}
je suis désolé si le code n'est pas bien présenté : je débute
Bonne lecture !
Chatbour- Membre confirmé
-
Nombre de messages : 224
Age : 39
Location : %windir%
Date d'inscription : 23/11/2007
Feuille de personnage
choix:
RBS_admin- Mas2oul
-
Nombre de messages : 197
Age : 37
Location : sousse
Date d'inscription : 05/11/2007
Feuille de personnage
choix:
Re: créer un menu html (css) d'une façon récursive
bon travail, je t'encourage.
pc_DKN- Membre régulier
- Nombre de messages : 59
Age : 37
Location : system32
Date d'inscription : 02/06/2008
Feuille de personnage
choix:
Sujets similaires
» html et php
» Superposer des images (HTML)
» Ajoutez la commande Crypter au menu contextuel-Windows xp/20
» Superposer des images (HTML)
» Ajoutez la commande Crypter au menu contextuel-Windows xp/20
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|