créer un menu html (css) d'une façon récursive

Aller en bas

créer un menu html (css) d'une façon récursive

Message par Chatbour le Ven 27 Juin 2008 - 10:55

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 :

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 Wink
Bonne lecture !

_________________
En général, c'est absurde de généraliser..
avatar
Chatbour
Membre confirmé

Masculin
Nombre de messages : 224
Age : 34
Location : %windir%
Date d'inscription : 23/11/2007

Feuille de personnage
choix:

Voir le profil de l'utilisateur http://chatbour.miniville.fr/ind

Revenir en haut Aller en bas

Re: créer un menu html (css) d'une façon récursive

Message par RBS_admin le Ven 27 Juin 2008 - 16:09

stage PHP...

_________________
dima m3ak ya l'etoile
avatar
RBS_admin
Mas2oul
Mas2oul

Masculin
Nombre de messages : 197
Age : 31
Location : sousse
Date d'inscription : 05/11/2007

Feuille de personnage
choix:

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: créer un menu html (css) d'une façon récursive

Message par pc_DKN le Dim 29 Juin 2008 - 19:32

bon travail, je t'encourage.

pc_DKN
Membre régulier

Nombre de messages : 59
Age : 32
Location : system32
Date d'inscription : 02/06/2008

Feuille de personnage
choix:

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: créer un menu html (css) d'une façon récursive

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum