Menu de navigation et ancre active sur page unique

Bonjour !

Je suis en train de faire un site "vitrine" qui ne contient qu'une seule page.
Les zones de présentation, service et contact sont des balises avec des ancres.
Le menu de navigation est fixe et cliquer dessus mène aux ancres correspondantes sur la page.

Bon jusque là c'est plutôt classique, par contre je n'arrive pas du tout à trouver la manière de mettre en surbrillance l'élément du menu lorsqu'on est sur l'ancre correspondante ! (Par exemple les titres du menu sont blancs, et cliquer sur "contact" le mettrait en noir, et redeviendrait blanc en cliquant sur l'un des autres titres du menu, l'idée étant que le visiteur sache à quel endroit de la page il se trouve).

J'ai trouvé des méthodes lorsque le site comporte plusieurs pages, mais comme en l’occurrence je n'en ai qu'une seule, rien ne s'applique aux ancres...

Comme je débute, je n'arrive même pas à voir comment régler ce problème : a priori le CSS ne le permet pas, c'est du Javascript ou du Php?

Si vous aviez des pistes à me conseiller ! Merci d'avance

Je ne pense pas que ça existe en php (il me semble que l'ancre n'est pas transmise au serveur), mais j'ai ça en javascript :

// on récupère l'ancre dans l'URL
	var anchor = window.location.hash;
	anchor = anchor.substring(1,anchor.length); // enlève le #

A partir de là, en testant anchor, tu devrais pouvoir adapter le css du bon morceau de menu ^^ (tu trouveras sans doute ce qu'il te faut dans le cours css via javascript d'openclassrooms)
Modifié par Lothindil (13 Dec 2013 - 12:57)

Merci beaucoup Lothindil, j'appréhendais le moment où je devrais me mettre au Javascript, mais je crois que je n'ai plus le choix !

Je vais étudier ton lien et je te tiendrai au courant (même si il va me falloir "un peu" de temps pour digérer le JS...)

En attendant si il existe d'autres pistes je suis bien évidemment preneur !

Je me permets d'ajouter 2 exemples de sites web qui utilisent le mécanisme que je recherche :

http://scytale.pt/
(une barre orange apparaît en dessous du titre de navigation cliqué)

http://shibui.me/web/scroll/index.html
(Les onglets de navigation sont dépliés quand on est dans leur zone respective)

Bonjour,

Sans nul doute un début de solution ici : jQuery-One-Page-Nav

Dans cet exemple, le menu est vertical, mais il n'est pas très compliqué de le styler en horizontal .

Cordialement,

LDDSoft

On ne se connait pas, mais sache que je t'aime

D'après les exemples téléchargés, c'est exactement ce que je cherchais, jusqu'au menu que je souhaitais vertical

Encore merci !