Détection page active pour mise à jour menu CSS

[Super Nico]

Bonjour,

 

J'expose mon problème : je suis en train de mettre à jour le design de mon site, et cela passe notamment par l'emploi d'un menu horizontal à base de CSS (onglets).

C'est chouette...

 

Seul hic, je souhaiterai arriver à mettre en valeur l'onglet qui correspond à la page affichée (class=actif")

Pour cela, j'ai une méthode (nulle) qui consiste à avoir autant de menu que de pages et à les inclure.

Je souhaiterai arriver à une solution intelligente, qui passerait par la détection de la page active et qui confererai à cet onglet la classe "actif".

 

 

Un peu de code pour comprendre :

 

 

Menu

<div id="menunl">
<ul id="ongletsnl">
<li class="active"><a href="Accueil.php"> Accueil </a></li>
<li><a href="../divers/phpBB2" target="blank"> Blog </a></li>
<li><a href="../divers/gallery" target="blank"> Photos </a></li>
</ul>
</div>

 

feuille CSS

#ongletsnl li.active
{
border-bottom: 1px solid #fff;
background-color: #fff;
}

 

Ca change en fait la couleur du fond.

 

Je pense qu'il faut utiliser la propriété $_SERVER['PHP_SELF'] mais je ne sais pas trop comment m'y prendre...

 

Merci

 

Nico

[mushylex]

Vide

Modifié le 21 mai 2022 par mushylex
Vide

[Super Nico]

MErci,

euh, le PHP, je ne maitrise pas vraiment, je récupère des bouts de scripts à droite à gauche, je fais à ma sauce ensuite.

je vais essayer avec ton bout de code, je crois que j'ai pigé l'idée !

 

nico

[mushylex]

Vide

Modifié le 21 mai 2022 par mushylex
Vide

[Dylav]

Bonsoir SuperNico et Mushylex,

 

Avant de vous embarquer dans des solutions compliquées, j'avais bien pensé vous suggérer d'exploiter la notion de pseudo-formats (ou pseudo-classes) associés aux liens (voir par exemple sur SelfHtml). On pouvait ainsi attribuer un style différent à chaque pseudo-classe, le lien étant l'onglet lui-même (habillage à élaborer dans la feuille de style). Cela avait le mérite de la simplicité, mais je n'ai pas réussi à le faire fonctionner (ou plutôt l'utiliser) correctement...

[mushylex]

Vide

Modifié le 21 mai 2022 par mushylex
Vide