CSS différent sur le lien du menu de la page en cours d'exécution

Version imprimable

Bonsoir tout le monde,

Je débute en PHP et je pense en avoir besoin pour réussir à faire ce que je souhaite.

Je m'explique : J'aimerais modifier le CSS d'un des liens de mon menu si celui-ci est le lien de la page en cours d’exécution.

Est-ce possible grâce au PHP et comment faire ? J'en ai peut-être même pas besoin mais là comme ça, je ne vois comment récupérer la page en cours autrement..

Voici mon script <header> dans lequel je voudrais mettre le PHP :
Code:

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 <header> <?php // Le formulaire de connexion a été soumis : chargement du bon menu if (isset($_SESSION['login'])){ include "menuConnect.php"; } else{ include "menuNonConnect.php"; } ?> <div id="menu"> <nav> <ul> <li><strong><a class="menulien" id="1" href="index.php">ACCUEIL</a></strong></li> <li><strong><a class="menulien" id="2" href="catalogue1.php">CATALOGUE</a></strong></li> <li><strong><a class="menulien" id="3" href="evenement.php">EVENEMENTS</a></strong></li> <li><strong><a class="menulien" id="4" href="atelier.php">ATELIERS FLORAUX</a></strong></li> <li><strong><a class="menulien" id="5" href="abonnement.php">ABONNEMENTS</a></strong></li> </ul> </nav> </div> </header>
Pardonnez mon ignorance si jamais il n'y a pas besoin du PHP et que je poste sur le mauvais forum :oops:

ce qui se fait habituellement est de rajouter avec PHP une classe CSS par exemple "pageEnCours" pour avoir un résultat HTML de ce genre :

Code:

1
2
3
4
5
6
7
            <ul>
                <li><strong><a class="menulien" id="1" href="index.php">ACCUEIL</a></strong></li>
                <li class="pageEnCours"><strong><a class="menulien" id="2" href="catalogue1.php">CATALOGUE</a></strong></li>
                <li><strong><a class="menulien" id="3" href="evenement.php">EVENEMENTS</a></strong></li>
                <li><strong><a class="menulien" id="4" href="atelier.php">ATELIERS FLORAUX</a></strong></li>
                <li><strong><a class="menulien" id="5" href="abonnement.php">ABONNEMENTS</a></strong></li>
            </ul>

ensuite dans le code CSS, vous pouvez appliquer une règle CSS spéciale pour le sélecteur ".pageEnCours"

par contre pour générer le menu, il est plus efficace d'inclure l'entête par exemple comme cela dans la page "catalogue"

Code:

1
2
$idPageEnCours = 2;
require "entete.php";

et ensuite dans "entete.php" vous faites une boucle comme cela :

Code:

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
50
51
52
53
54
<?php
$pages = [
    [
        "id" => 1,
        "url" => "/",
        "libelle" => "Accueil",
    ],
    [
        "id" => 2,
        "url" => "catalogue1.php",
        "libelle" => "Catalogue",
    ],
    [
        "id" => 3,
        "url" => "evenement.php",
        "libelle" => "Évènements",
    ],
    [
        "id" => 4,
        "url" => "atelier.php",
        "libelle" => "Atelier Floraux",
    ],
 
];
 
 
 
?>
 
    <div id="menu">
 
        <nav>
            <ul>
 
                <?php foreach ($pages as $p) {?>
 
                    <li
                        <?php echo ($p["id"] === $idPageEnCours) ? "" : " class=\"pageEnCours\"";?>
                    >
                        <a
                            class="menulien"
                            href="<?php echo htmlspecialchars($p["url"]);?>"
                        >
                            <?php echo htmlspecialchars($p["libelle"]);?></a>
                    </li>
 
                <?php }?>
 
            </ul>
        </nav>
 
    </div>
 
<?php

18/03/2018, 01h20
Romenag

1 pièce(s) jointe(s)
Merci de ton aide Mathieu.
J'ai essayé de faire comme tu m'as dis. En fait, j'inclus mon Header déjà mais pour pas faire de bêtise j'ai créé le script entete.php et suivi ce que tu me disais.
Sauf que j'ai une erreur d’exécution PHP :
Pièce jointe 361873

Même en enlevant la balise <?php ouverte ligne 54, ça donne la même erreur.

Je te montre quand même comment j'ai adapté ça à mon code pour la page catalogue :
Code:

1 2 3 4 5 6 7 8 9 10 11 <body> <header> <?php include "phpConnexion.php"; /*include 'header.php';*/ $idPageEnCours = 2; require "entete.php" ; ?> </header> 
Pour la page entete.php j'ai tout bêtement copié collé ton code donc je te le remets pas.

Une idée de ce que j'ai fait de travers ? :koi:

Bonjour,

1- il manque l'accolade de fermeture ligne 47 (celle du foreach(...){ ).

N.B. Il ne suffit pas de faire des copier-coller : ce serait bien de LIRE et COMPRENDRE les bouts de codes qu'on te donne.
Et si tu ne comprends pas quelque chose, il n'y a aucune honte à demander (APRES avoir fait une recherche perso, évidemment)

2- Cela dit, on peut SIMPLIFIER le code de mathieu.
Notamment, on va "automatiser" la recherche de la page en cours avec : strpos( $_SERVER['REQUEST_URI'], $p['url']).
(il devient inutile d'indiquer $idPageEnCours = xx; sur chaque page)

menu.php :
Code:

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 <?php // on crée un array contenant : URL / libellé des pages $pages = [ [ 'url' => '/index.php', 'libelle' => 'Accueil', ], [ 'url' => '/catalogue1.php', 'libelle' => 'Catalogue', ], [ 'url' => '/evenement.php', 'libelle' => 'Évènements', ], [ 'url' => '/atelier.php', 'libelle' => 'Atelier Floraux', ], [ 'url' => '/abonnement.php', 'libelle' => 'Abonnements', ], ]; // 2- on construit le menu ?> <nav id="menu"> <ul> <?php foreach ($pages as $p) { ?> <li<?php if( strpos( $_SERVER['REQUEST_URI'], $p['url']) ){ echo ' class="active"'; } // on ajoute la classe "active" au menu en cours ?>> <a href="<?php echo htmlspecialchars($p['url']);?>"><?php echo htmlspecialchars($p['libelle']);?></a> </li> <?php } ?> </ul> </nav>
Pour info (A LIRE, donc):

$pages = [ .... ]; est équivalent à $pages = array( .... ); : on crée un array PHP
strpos()
htmlspecialchars()

D'autre part, j'en ai profiter pour SIMPLIFIER aussi le menu lui-même, en le débarrassant du superflu.
On obtient :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <nav id="menu"> <ul> <li class="active"> <a href="/index.php">Accueil</a> </li> <li> <a href="/catalogue1.php">Catalogue</a> </li> <li> <a href="/evenement.php">Évènements</a> </li> <li> <a href="/atelier.php">Atelier Floraux</a> </li> <li> <a href="/abonnement.php">Abonnements</a> </li> </ul> </nav>
On peut alors STYLER les éléments du menu en CSS comme suit :
Code:

1 2 3 4 5 #menu { ... } #menu > ul { ... } #menu > ul > li { ... } #menu > ul > li > a { ... } #menu > ul > li.active > a { ... }

18/03/2018, 10h47
Romenag

Merci beaucoup jreaux62 !

Toutes mes excuses de n'avoir pas vu qu'il manquait l'accolade mais comme je l'ai dit je débute et j'étais tout simplement incapable de comprendre ce code. À part les include, les formulaires et les sessions que j'ai brièvement abordé en cours, je n'y connais rien en PHP. Avec tes explications et les liens que a ajouté je comprends un peu mieux et ça fonctionne donc merci bien :)

J'ai un autre problème d'ailleurs par rapport à une variable de session que j'aimerais incrémenter mais je vais d'abord essayer d'y remédier puis j'ouvrirai un autre sujet si je n'y arrive pas !
Encore merci à tous les deux :)