Bonsoir,
Effectivement, en l'état il n'est pas possible en CSS d’interagir sur le menu à partir des
<div> servant de contenu à chaque rubrique, puisque tous ces éléments sont frères. En effet pour cibler des éléments frères en CSS, les deux seules options qui s'offrent à nous, à savoir le sélecteur d'adjacence directe (
+) et le sélecteur d'adjacence indirecte (
~), ne fonctionnent pas puisque l'élément sur lequel on veut agir, le menu, est situé avant les autres frères.
Comme l'a suggéré
jb_gfx, on peut alors recourir à du JavaScript qui permet d'obtenir très facilement ce genre de comportement. Pour ma part je travaille avec la librairie
JQuery qui facilite grandement les opérations.
HTML :
<ul id="menu">
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#ressources">Ressources</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div id="portfolio"><p>Portfolio</p></div>
<div id="ressources"><p>Ressources</p></div>
<div id="contact"><p>Contact</p></div>
Une liste non ordonnée vaut mieux qu'une simple balise
<div> dépourvue de toute sémantique !
CSS :
body, ul, p {
margin: 0;
padding: 0;
}
.actif {
background-color: red;
}
On prépare les styles d'un lien actif du menu dans une classe "actif". J'applique un simple fond rouge pour l'exemple.
JavaScript :
$(function() {
// Première instruction :
$('#menu a[href="' + location.hash + '"]').addClass('actif');
// Deuxième instruction :
$('#menu a').click(function() {
$(this).addClass('actif');
$(this).parent().siblings().children().removeClass('actif');
});
});
- Première instruction :
Au chargement de la page on récupère l'ancre de l'URL (s'il y en a une), on cherche le lien du menu qui contient cette valeur dans son attribut
href et on lui applique la classe "actif".
Par exemple si l'URL est :
"http://web.graphiz.free.fr/[b]#portfolio[/b]"
On cherche le lien :
<a [b]href="#portfolio[/b]">Portfolio</a>
Et on lui applique la classe "actif" :
<a [b]class="actif"[/b] href="#portfolio">Portfolio</a>
- Deuxième instruction :
Au click sur un lien du menu, on lui ajoute la classe "actif" et on retire cette même classe à tous les autres liens du menu (si l'un d'entre eux en bénéficie déjà). Pour cela on doit un peu manipuler le DOM (l'arborescence du code HTML) à la recherche des éléments qui nous intéressent : les liens adjacents de celui qui a été clické.
Par exemple si on visualise le contenu de la rubrique "Portfolio", le menu est comme suit :
<ul id="menu">
<li><a [b]class="actif"[/b] href="#portfolio">Portfolio</a></li>
<li><a href="#ressources">Ressources</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
Maintenant, si on click sur "Ressources", le code suivant se déclenche :
$(this).parent().siblings().children().removeClass('actif');
Cette ligne barbare signifie :
- Cherche le parent (
.parent) de l'élément clické (
this)
- Cherche ses frères (
siblings)
- Cherche leurs enfants (
children)
- Ajoute-leur la classe "actif"
Ce qui donne dans notre arborescence HTML :
- Le parent de l'élément clické : une balise <li>
- Ses frères : les deux autres balises <li>
- Leurs enfants : la balise <a> que chacune englobe
En plus d'ajouter la classe "actif" au lien "Ressources", on a donc supprimé cette même classe du lien "Portfolio" :
<ul id="menu">
<li><a href="#portfolio">Portfolio</a></li>
<li><a [b]class="actif"[/b] href="#ressources">Ressources</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
Modifié par jeremy-p (21 May 2012 - 00:02)
as-focus ^^). En clair: