Ajouter une classe (active) après le chargement d'une page HTML

philippe.idlas@free.fr
PHP

Bonjour,

C'est une question qui a déjà été posé sur le forum par Adel avec une réponse de Djtec. J'ai essayé d'appliquer cela à mon cas mais cela ne fonctionne pas. Je poste ce sujet ici car d'après Djtec les scripts ne peuvent pas fonctionner. J'ai bien essayé d'ailleurs d'adapter des scripts présents sur de nombreux forums mais je n'ai rien réussi à faire fonctionner. Ceci pour expliquer d'où je viens.

Le problème est assez simple : quand je clique sur un lien je veux que l'onglet ait une couleur de fond et de caractère différente pour que l'utilisateur sache toujours où il se trouve. Le site sur lequel j'essaye cela est : http://pierriere-gonthier.com

Ma liste de navigation est une feuille html dans une page php. Tout cela pour faire un include et ne pas la répéter à chaque fois.

<div id="menuh">
    <ul class="menud">
        <li><a href="pointsdevente.php">Points de vente</a></li>
        <li><a href="presse.php">Presse</a></li>        
        <li><a href="domaine.php">Domaine</a></li>
        <li><a href="#">Culture</a>
        <ul>
            <li><a href="production.php">Cultiver la vigne</a></li>
            <li><a href="cultiverlaterre.php">Cultiver la terre</a></li>
            <li><a href="enrichirlaterre.php">Enrichir la terre</a></li>
            <li><a href="traiterlesvignes.php">Traiter les vignes</a></li>
            <li><a href="lesvendanges.php">Les vendanges</a></li>
        </ul>
        </li>
        <li><a href="#">Vin</a>
        <ul>
            <li><a href="elaboration.php">Élaboration du vin</a></li>
            <li><a href="vinificationenrouge.php">Vinification en rouge</a></li>
            <li><a href="vinificationenblanc.php">Vinification en blanc</a></li>
            <li><a href="vinificationenrose.php">Vinification en rosé</a></li>
            <li><a href="pineaudescharentes.php">Pineau des Charentes</a></li>
            <li><a href="mesamisvignerons.php">Mes amis vignerons</a></li>
        </ul>       
        </li>
        <li><a href="#">Commerce</a>
        <ul>
            <li><a href="vinsdepays.php">Les vins de pays</a></li>
            <li><a href="heritagealienor.php">L'Héritage d'Aliénor</a></li>
            <li><a href="grandedistribution.php">La grande distribution</a></li>
            <li><a href="cuveedelannee.php">La cuvée de l'année</a></li>                
            <li><a href="cuveejeanmarin.php">La cuvée Jean Marin</a></li>
            <li><a href="prixdepartcave.php">Les prix départ cave</a></li>
        </ul>       
        </li>
        <li><a href="acces.php">Accès</a></li>
        <li><a href="contact.php">Contact</a></li>
        <li><a href="404.shtml">Lettre d'info</a></li>
    </ul>
</div><!-- #menu horizontal -->

L'idée de djtec est donc de récupérer le nom de la page et de la comparer à la page existante. Si égalité, ajouter la class="active" qui étant paramétrer correctement dans la feuille CSS me permet d'avoir ce que je souhaite.

J'ai essayé avec le lien <a href="domaine.php"> ça ne fonctionne pas.

Quelqu'un aurait-il une idée pour me permettre de progresser ?

Cordialement.

8 réponses

philippe.idlas@free.fr
Auteur
Réponse acceptée

Bonjour,

Super ;) et merci. Cela fonctionne. Résultat sur le site Domaine Pierriere-Gonthier.

Cordialement.

djtec

Si dans ta page menu tu fais:

<?php
$pageCurrent = substr(basename($_SERVER'PHP_SELF']), 0, -4);
var_dump($pageCurrent);
?>

Tu obtiens quoi?

philippe.idlas@free.fr
Auteur

j'obtiens index sur ma page index.php, production sur ma page production.php etc...

philippe.idlas@free.fr
Auteur

Bonsoir,

Ta solution fonctionne. Mais, il y a un mais. La class="active" est ajouté au niveau du lien cliqué. Je voudrais que ce soit le parent qui voit sa class="active" créé. Comment est-ce possible ?

Exemple : quand je clique sur cultiver la vigne (lien vers production.php), sous culture, je veux que ce soit le lien <a href="#">Culture</a> qui voit sa class="active" créée.

Avec le système actuel c'est le lien <a href="production.php">Cultiver la vigne</a> qui est changé et qui devient <a href="production.php" class="active">Cultiver la vigne</a>.

Est-ce possible d'ajouter la class sur le lien parent pour tous les liens d'un sous-menu ?

Cordialement,

PS : en allant sur mon site tu comprendras plus aisément
Texte du lien

djtec

Le seul truc que je vois suivant ta structure serait de faire ceci:

<div id="menuh">

    <ul class="menud">
        <li <?php echo ($pageCurrent == 'pointsdevente') ? 'class="active"' : ''; ?>><a href="pointsdevente.php">Points de vente</a></li>
        <li <?php echo ($pageCurrent == 'presse') ? 'class="active"' : ''; ?>><a href="presse.php">Presse</a></li>        
        <li <?php echo ($pageCurrent == 'domaine') ? 'class="active"' : ''; ?>><a href="domaine.php">Domaine</a></li>
        <li><a href="#" <?php echo ($pageCurrent == 'production' || $pageCurrent == 'cultiverlaterre' || $pageCurrent == 'enrichirlaterre' || $pageCurrent == 'traiterlesvignes' || $pageCurrent == 'lesvendanges') ? 'class="active"' : ''; ?>>Culture</a>
        <ul>
            <li><a href="production.php">Cultiver la vigne</a></li>
            <li><a href="cultiverlaterre.php">Cultiver la terre</a></li>
            <li><a href="enrichirlaterre.php">Enrichir la terre</a></li>
            <li><a href="traiterlesvignes.php">Traiter les vignes</a></li>
            <li><a href="lesvendanges.php">Les vendanges</a></li>
        </ul>
        </li>
        <li><a href="#" <?php echo ($pageCurrent == 'elaboration' || $pageCurrent == 'vinificationenrouge' || $pageCurrent == 'vinificationenblanc' || $pageCurrent == 'vinificationenrose' || $pageCurrent == 'pineaudescharentes' || $pageCurrent == 'mesamisvignerons') ? 'class="active"' : ''; ?>>Vin</a>
        <ul>
            <li><a href="elaboration.php">Élaboration du vin</a></li>
            <li><a href="vinificationenrouge.php">Vinification en rouge</a></li>
            <li><a href="vinificationenblanc.php">Vinification en blanc</a></li>
            <li><a href="vinificationenrose.php">Vinification en rosé</a></li>
            <li><a href="pineaudescharentes.php">Pineau des Charentes</a></li>
            <li><a href="mesamisvignerons.php">Mes amis vignerons</a></li>
        </ul>     
        </li>
        <li><a href="#" <?php echo ($pageCurrent == 'vinsdepays' || $pageCurrent == 'heritagealienor' || $pageCurrent == 'grandedistribution' || $pageCurrent == 'cuveedelannee' || $pageCurrent == 'cuveejeanmarin' || $pageCurrent == 'prixdepartcave') ? 'class="active"' : ''; ?>>Commerce</a>
        <ul>
            <li><a href="vinsdepays.php">Les vins de pays</a></li>

            <li><a href="heritagealienor.php">L'Héritage d'Aliénor</a></li>
            <li><a href="grandedistribution.php">La grande distribution</a></li>
            <li><a href="cuveedelannee.php">La cuvée de l'année</a></li>                
            <li><a href="cuveejeanmarin.php">La cuvée Jean Marin</a></li>
            <li><a href="prixdepartcave.php">Les prix départ cave</a></li>

        </ul>     
        </li>
        <li <?php echo ($pageCurrent == 'acces') ? 'class="active"' : ''; ?>><a href="acces.php">Accès</a></li>

        <li <?php echo ($pageCurrent == 'contact') ? 'class="active"' : ''; ?>><a href="contact.php">Contact</a></li>
        <li><a href="404.shtml">Lettre d'info</a></li>

    </ul>

</div><!-- #menu horizontal -->

Pour les parents cela devrait fonctionner après si tu le veux aussi sur les enfants du sais comment faire.

philippe.idlas@free.fr
Auteur

Bonjour,

Merci. Je teste et je reviens te dire ce qu'il en est.

Cordialement.

djtec

Tu peux faire aussi comme ceci:

<?php
$pageCurrent = substr(basename($_SERVER'PHP_SELF']), 0, -4);
$arrayCulture = array('production', 'cultiverlaterre', 'enrichirlaterre', 'traiterlesvignes', 'lesvendanges');
$arrayVin = array('elaboration', 'vinificationenrouge', 'vinificationenblanc', 'vinificationenrose' ,'pineaudescharentes', 'mesamisvignerons');
$arrayCommerce = array('vinsdepays', 'heritagealienor', 'grandedistribution', 'cuveedelannee', 'cuveejeanmarin', 'prixdepartcave');
?>
<div id="menuh">

    <ul class="menud">
        <li <?php echo ($pageCurrent == 'pointsdevente') ? 'class="active"' : ''; ?>><a href="pointsdevente.php">Points de vente</a></li>
        <li <?php echo ($pageCurrent == 'presse') ? 'class="active"' : ''; ?>><a href="presse.php">Presse</a></li>        
        <li <?php echo ($pageCurrent == 'domaine') ? 'class="active"' : ''; ?>><a href="domaine.php">Domaine</a></li>
        <li><a href="#" <?php echo (in_array($pageCurrent, $arrayCulture)) ? 'class="active"' : ''; ?>>Culture</a>
        <ul>
            <li><a href="production.php">Cultiver la vigne</a></li>
            <li><a href="cultiverlaterre.php">Cultiver la terre</a></li>
            <li><a href="enrichirlaterre.php">Enrichir la terre</a></li>
            <li><a href="traiterlesvignes.php">Traiter les vignes</a></li>
            <li><a href="lesvendanges.php">Les vendanges</a></li>
        </ul>
        </li>
        <li><a href="#" <?php echo (in_array($pageCurrent, $arrayVin)) ? 'class="active"' : ''; ?>>Vin</a>
        <ul>
            <li><a href="elaboration.php">Élaboration du vin</a></li>
            <li><a href="vinificationenrouge.php">Vinification en rouge</a></li>
            <li><a href="vinificationenblanc.php">Vinification en blanc</a></li>
            <li><a href="vinificationenrose.php">Vinification en rosé</a></li>
            <li><a href="pineaudescharentes.php">Pineau des Charentes</a></li>
            <li><a href="mesamisvignerons.php">Mes amis vignerons</a></li>
        </ul>     
        </li>
        <li><a href="#" <?php echo (in_array($pageCurrent, $arrayCommerce)) ? 'class="active"' : ''; ?>>Commerce</a>
        <ul>
            <li><a href="vinsdepays.php">Les vins de pays</a></li>

            <li><a href="heritagealienor.php">L'Héritage d'Aliénor</a></li>
            <li><a href="grandedistribution.php">La grande distribution</a></li>
            <li><a href="cuveedelannee.php">La cuvée de l'année</a></li>                
            <li><a href="cuveejeanmarin.php">La cuvée Jean Marin</a></li>
            <li><a href="prixdepartcave.php">Les prix départ cave</a></li>

        </ul>     
        </li>
        <li <?php echo ($pageCurrent == 'acces') ? 'class="active"' : ''; ?>><a href="acces.php">Accès</a></li>

        <li <?php echo ($pageCurrent == 'contact') ? 'class="active"' : ''; ?>><a href="contact.php">Contact</a></li>
        <li><a href="404.shtml">Lettre d'info</a></li>

    </ul>

</div><!-- #menu horizontal -->

Comme ça c'est plus lisible je trouve.

philippe.idlas@free.fr
Auteur

Bonjour,

Un grand merci encore. La première méthode fonctionne très bien. Je teste celle-là et je l'installe. ;)