Wordpress et navigation sur une seule page

Bonjour,

J'ai créé un thème enfant basé sur le thème Twenty Twelve de Wordpress, dans l'idée de faire un site sur une page. La navigation se fait grâce aux ancres que j'ai ajouté directement dans l'onglet "menu" du cms.

J'aimerais que l'item du menu change de couleur sur le menu quand on arrive sur son contenu, mais je ne sais pas comment faire.

En fouillant un peu sur firebug, j'ai vu ça : "current-menu-item" et "current_page_item". Sauf que ça ne m'avance pas trop, en fait ...


Merci !

il faut utiliser la pseudo classe :hoover

.nav-menu li:hover {
background: red;
}


ou encore

.nav-menu a:hover {
background: red;
display: block;
}

Salut,

Euh… audaxland je crois que tu n'as pas bien saisi la demande

Yumiah a écrit :
En fouillant un peu sur firebug, j'ai vu ça : "current-menu-item" et "current_page_item". Sauf que ça ne m'avance pas trop, en fait ...

Et oui, cela n'est utile que lorsque l'on change page. Ce sont des classes insérées par wordpress en testant la page en cours. Comme ici tu ne change jamais de page, ces classes seront toujours sur le même item, celui de ta page.

Du coup, le plus rapide serait d'utiliser Javascript (via jQuery ou pas).
Je te fais un exemple simplifié et pas forcément le plus optimisé du monde en utilisant jQuery (par pure fainéantise, je l'avoue) :

HTML

<ul>
<li><a href="#contenu1" class="bouton">Contenu 1</a></li>
<li><a href="#contenu1" class="bouton">Contenu 1</a></li>
</ul>
…
<div id="contenu1">
Blablabla
</div>
…
<div id="contenu2">
Bliblablo
</div>

CSS

/* Je crée ma classe qui sera utilisée pour le bouton une fois cliqué */
.bouton-actif {
     color: red;
}

JS/jQuery

$('.bouton').click(function(){
   $('.bouton').removeClass('bouton-actif'); /* On supprime toutes les classes "bouton-actif" éventuellement ajoutées précédemment */
   $(this).addClass('bouton-actif'); /* On ajoute la classe sur l'élément clické */
});

Je vais essayer ça, merci