Gérer l'élément courant d'un menu horizontal avec PHP et CSS

Aujourd'hui il est légion sur le web de rencontré des sites web avec un menu horizontal qui maintient l'état du menu selon la page en cours. Dur à expliquer? En effet voici plutôt une image qui vous montre bien ce que nous désirons faire aujourd'hui.

Nous avons donc affiché ici l'exemple du site Digg.com qui comme on peut le constater affiche l'état de la page en cours. Donc on voit clairement que l'élément « Videos » du menu est resté en blanc. C'est donc dire que l'on se trouve présentement sur la page des vidéos. Si nous avions été sur la page « Images », l'élément « Videos » redeviendrait vert tandis que l'élément « Images » serait quant à lui blanc afin d'identifier la page en cours. C'est donc ce que nous allons faire en PHP et CSS dans ce tutoriel.

Bien qu'il existe plus d'une manière de faire cela, nous allons présenter ici qu'une seule manière. À vous de l'adapter selon vos besoins.

Le code PHP du menu

Le menu est donc construit à l'aide d'une liste. Les éléments de la liste sont donc générés avec PHP. La page en cours est donc identifiée par l'élément du menu ayant comme attribut la classe « current ».

// Création d'un vecteur de lien contenant les liens hypertextes de mon menu
$items = array(
    array("link"=>"accueil.html", "label"=>"Accueil"),
    array("link"=>"astuces.html", "label"=>"Astuces"),
    array("link"=>"contact.html", "label"=>"Contact"),
    array("link"=>"faq.html", "label"=>"FAQ"));

$menu = '';

// Boucle de création de la liste <ul><li>
foreach ($items as $val) {
    $menu .= '<li><a href="'.$val['link'].'"';
    // Vérification si la page X est la page en cours
    // Si oui ajouter la classe « current » à l'élément de la liste
    if ($_SERVER['SCRIPT_NAME'] == $val['link'])
        $menu .= ' class="current"';
    $menu .= '>'.$val['label'].'</a></li>';
}

echo $menu;

La partie CSS

Nous avons vu sur PcKULT.NET comment créer de superbe barre de navigation horizontale. Nous n'allons donc pas nous attarder sur la partie CSS plus qu'il n'en faut, mais nous allons quand même vous fournir un exemple de style pour cet exemple.

ul {
    list-style-type:none;
    padding:3px 0 20px 0;
    border-top:2px solid #E0E0E0;
    margin:10px 0;
}

ul li {
    float:left;
    margin:0 2px;
}

ul li a {
    display:block;
    padding:2px 10px;
    background-color:#E0E0E0;
    color:#2E3C1F;
    text-decoration:none;
}

/* Style de l'élément courant... */
ul li a.current {
    background-color:#40611F;
    color:#FFFFFF;
}

ul li a:hover {
    background-color:#3C72B0;
    color:#FFFFFF;
}

Donc n'en tient qu'à vous de mettre en forme ce menu! La façon de faire reste la même.

Ajouter cette page à votre Digg-Like préféré