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

Voir le sujet précédent Voir le sujet suivant 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 : 33
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 : 30
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 : 31
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

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

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