Discussion :

[Athos77]

Bonsoir,

j'ai essayé dans tous les sens mais pas moyen. Voilà :

- mes pages sont gérées par un CSS, et un menu sous forme de liste <ul><li> permet de naviguer dans les pages html

- je souhaite que lorsqu'on se trouve sur la page "index.htm", la couleur du background du lien du menu ("index" donc dans cet exemple) reste fixe, et ainsi de suite suivant la page de navigation

- mes class sont intitulées par couleur :
"index.htm" => class="menuBleu"
"parcours.htm" => class="menuViolet"
...

Comment garder actif le background-color du lien de la page sur laquelle on se trouve ??

J'ai bien essayé un li .focus entre autres, mais rien ne fonctionne.

Merci d'avance,

[aL1ba]

Pourquoi ne pas enlever le code de couleur de ton menu de ton fichier maitre CSS et créer de tout petits fichiers CSS traitant uniquement de la couleur des menus spécifiquement pour chaque page, et d'inclure chacun de ces fichiers avec leur pages respectives.....???

[Athos77]

bonjour,

j'y ai bien pensé, mais c'est quand même dommage de décliner 6 feuilles de style pour les 6 pages html de mon site...

[omageus]

Bonjour,

Les pseudo elements (focus, active...) ne régissent pas ce genre de comportement.

En fonction de ta construction :
- détecter la page courante en php et en fonction de ça attribuer une class au lien du menu correspondant (lien vers cette page). Cela si ton menu est importé (include php).
- Si ton menu est déclaré dans chaque page, il faut attribuer une class au lien correspondant, et cela sur chacune des pages de ton site.
- Dans les deux cas, en attribuant un style via javascript (ce qui implique toujours de détecter la page courante et de lui faire correspondre un lien)

[Athos77]

Bonjour omageus et merci !

Mais justement je cherche à savoir comment faire ; le code javascript à indiquer ou les balises CSS, ou les deux...

[omageus]

Comment est géré ton menu?

Tu le créé sur chaque page ou bien c'est un include?

[Athos77]

oui il est présent sur chaque page, dans un <div> :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<div id="menu">
<h1><a href="index.htm" title="retourner sur la page d'accueil">index</a></h1><br>
  <ul>
 
		<li><a href="parcours.htm" class="menuBleu" title="Aller à">PARCOURS</a></li>
  		<li><a href="formation.htm" class="menuViolet" title="Aller à">FORMATION</a></li>
		<li><a href="liens.htm" class="menuRose" title="Aller à">LIENS</a></li>
...
  </ul>
</div>

et voici un extrait du CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
#menu li {font-size:1.1em;}
#menu li a {color:#FFFFFF; font-weight:normal; display: block; padding-left:5px;}
#bleu #menu a.menuBleu, #menu a.menuBleu:hover {background-color:#0066ff;}
...

[Athos77]

Bonjour,

pour ceux que ça intéresserait j'ai enfin trouvé une solution en CSS :

- dans le CSS, ajouter au #menu une class "active" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
#menu li#rubriqueAactive a:link + a:visited (de la couleur souhaitée)
#menu li#rubriqueBactive a:link + a:visited (idem pour rubrique B)

- dans le corps HTML, ajouter à l'id des rubriques du menu la class "active"
exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<li id="rubriqueAactive"><a href="A.htm">rubrique A</a></li>

et ainsi de suite...

je mets donc "Résolu"