[RESOLU] Menu fais maison > classe active

NS-shnalla · avril 2012

Salut à tous,

Pour des besoins particuliers je n'ai pas utilisé la fonction staticList mais un menu html tout basique.
Seul problème je cherche un moyen d'afficher une classe "active" l'élément actif.

N'étant pas développeur pour deux sous, je suis un peu coincé. Est-ce que certains parmi vous on déjà trouvé une astuce pour palier à ce problème ?

Merci d'avance !

Francis · avril 2012

Bonjour,
Il suffit de donner une classe particulière à la balise body de chaque page, et une classe pour chaque ligne du menu.

Par exemple <body class="static1"> pour la page 1 et <li class="static1"> pour la ligne du menu associée à cette page 1.

Concrètement, on peut écrire quelque chose comme ceci dans le header :

<?php
 // Préparation de l'attribut class pour la balise body
  $page = $plxShow->mode();
  switch ($page)
  {
    case "article":
      $page .= $plxShow->artId();
      break;
    case "static":
      $page .= $plxShow->staticId();
      break;
  }
?>
     
<body id="top" class="<?php echo $page; ?>">
<!-- classe de body = mode de la page (article, static, ...) + n° de la page  
     => pour repérer le menu courant dans la feuille de style -->


<ul class="menu">
  <li class="static1"><a href="static1/accueil">Accueil</a></li>
  <li class="static2"><a href="static2/presentation">Présentation</a></li>
  <li class="static3"><a href="static3/contact">Contact</a></li>
</ul>

Suivant le cas, la variable $page contient "article1", "article2", ou "static1", "static2", ...

Dans la feuille de style, il suffit d'écrire une règle de ce type :

body.static1 li.static1 a, 
body.static2 li.static2 a, 
body.static3 li.static3 a 
{ 
   color: red; 
}

J'utilise cette solution dans tous mes sites.

danielsan · avril 2012

Salut,

autre approche plus bourrine, si tu souhaites avoir la class active/no-active pour ton lien:

si c'est pour des statics, le principe est de récupérer l'identifiant de la static active et le comparer avec celui du menu:

<?php
$idStat = $plxShow->staticId(); // récupération de l'identifiant de la page static

// 1er lien
if($idStat=="001"){
$status = "active";
} else {
$status = "no-active";
}
?>
<a href="static001.html" class="<?php echo $status; ?>">Static001</a>



// 2ème lien
if($idStat=="002"){
$status = "active";
} else {
$status = "no-active";
}

?>
<a href="static002.html" class="<?php echo $status; ?>">Static002</a>

etc ...

et le CSS:
a.active{color:red}

c'est bien bourrin ...

NS-shnalla · avril 2012

Merci pour vos réponses ! La méthode bourrin correspond à ce que j'avais en tete...

danielsan · avril 2012

l'avantage des méthodes bourrines lorsqu'on découvre un langage est qu'on le comprend plus facilement !

NS-shnalla · avril 2012

@danielsan : si je veux avoir par exemple pour second lien deux pages statiques (j'ai un sous menu pour le hem lien), quelle est la syntaxe ?

NS-shnalla · avril 2012

Je m'auto-répond , la solution était avec la syntaxe

if(($idStat=="006")||($idStat=="007")){
					$status = "active";
					} else {
					$status = "no-active";
}

Merci encore à danielsan et francis

[RESOLU] Menu fais maison > classe active

Réponses