[Résolu] Changement de style après sélection d'un bouton d'un menu

Bonjour à tous,

Je me lance sur le forum car je suis arrivé à bout de mes capacités d'autoapprentissage. Ce site est une mine d'or pour concevoir un site propre, mais là, j'ai besoin d'avoir quelques conseils.

Ma chérie et moi allons créer un site afin de témoigner de notre Tour du Monde. La décision d'utiliser les CSS s'est imposé d'elle même tant les capacités de mise à jour d'un site sont puissantes grâce à cette méthodologie.

Notre site comportera un menu horizontal sous le bandeau du haut, et également un menu vertical à gauche qui permettra de naviguer dans les sous-rubriques du menu du haut. En effet, nous ne partons pas dans l'idée d'utiliser des menus déroulants, du moins pour l'instant.

Voici mon soucis:
J'ai réalisé mes menus avec une liste (HTML) et la fonction :hover qui permet de changer le style des choix des menus au passage de la souris.
Ce que j'aimerais faire, c'est lorsque je clique sur un choix, et que j'atterris dans ma page HTML cible, conserver les propriétés de style du :hover sur mon choix sélectionné. Bien sûr, j'aurais pu utiliser la commande "visited", mais voilà, je veux que le style du choix redevienne normal lorsque l'on quite la page HTML cible (et que l'on va vers une autre).

Pour l'instant, j'ai réussi à bidouiller en interrompant ma liste à l'endroit du choix dans mon menu correspondant à la page HTML cible dans laquelle on se trouve, puis en la recommençant pour le reste du menu. A l'endroit du choix du menu, j'ai inséré dans ma liste une nouvelle classe genre "choix_actuel" avec les propriétés de style identiques au :hover, histoire de donner l'illusion. Mais entre Mozilla et Explorer (je vérifie simultanément la compatibilité de mon site avec ces navigateurs), j'ai des problèmes de positionnement et ça fait tout moche.

Je me dis qu'il doit exister un moyen de toujours conserver la même liste dans le fichier HTML et d'avoir un attribut qui permet localement, de changer le style du choix du menu sélectionné.
En outre, lorsque la page HTML cible est atteinte via le menu, je ne souhaite plus que le bouton soit actif, puisque l'on se trouve justement à la page vers lequel ce bouton renvoie normalement. Donc, je dois virer la balise <a href> et du coup, ça me bousille à nouveau mon menu ...

Bref, j'ai été très long, veuillez m'excuser, mais c'était histoire d'être clair au maximum. J'espère d'ailleurs que vous avez compris ce que je cherche à faire ...

Merci de votre aide et bonne fin de journée.
Fred.
Modifié par Fredouille (11 Aug 2005 - 12:02)

Bonjour et merci d'avoir atterri ici, grand voyageur

Sans programmation, tu peux avoir avoir 2 apparences graphiques dans un même menu en jouant avec class="menuun" et class="menudeux". edit: Pourquoi y aurait-il des décalages?
Cela exclut le recours à la fonction include du PHP vu que sur chaque page, le menu sera différent (mais on peut quand même "sortir" le code du menu dans autant de fichiers qu'il y a de pages/bouton, ce sera plus simple en cas de modif).

Il reste à modifier l'aspect du bouton sous la souris avec :hover, en lui donnant soit un 3ème aspect graphique intermédiaire, soit un des 2 définis ci-dessus.
Modifié par Felipe (09 Aug 2005 - 16:40)

Salut Felipe !

Merci pour la rapidité de ta réponse.
Si j'ai bien compris, voila ce que tu me préconises pour la page HTML cible correspondant au click sur le choix 6 du menu par exemple:

<ul id="menuun">
<li>Choix 1</li>
<li>Choix 2</li>
<li>Choix 3</li>
<li>Choix 4</li>
<li>Choix 5</li>
</ul>

<ul id="menudeux">
<li>Choix 6</li>
</ul>

<ul id="menuun">
<li>Choix 7</li>
<li>Choix 8</li>
</ul>

Avec dans la CSS, le #menudeux qui aurait les mêmes propriétés de style que le #menuun li a:hover ?

Fred.

EDIT: Désolé, j'avoue être passé (trop) rapidement sur la rubrique des "Rêgles du forum".
Modifié par Fredouille (10 Aug 2005 - 14:35)

Bonjour et bienvenue Fredouille

Visiblement, tu as oublié de lire les règles du forum, peux-tu modifier ton dernier post (le bouton "Editer" du post) et utiliser la balise "code" pour afficher ton code, ce sera plus lisible. Merci d'avance

<ul id="menuun">
<li>Choix 1</li>
<li>Choix 2</li>
<li>Choix 3</li>
<li>Choix 4</li>
<li>Choix 5</li>
<li id="menudeux">Choix 6</li>
<li id="menuun">Choix 7</li>
<li>Choix 8</li>
</ul>

serait mieux
mais je sais pas si je me trompe mais tu veut utilisé les menus avec la propriété active

il faut jouer avec les balise body avec id dans les pages que tu fait
je n'ai pas de liens sous la main mais dans le forum tu doit trouver ca avec la fonction recherch
Modifié par sane79 (10 Aug 2005 - 09:45)

Merci sane79, c'est exactement cela dont j'avais besoin.
En fait, je ne sais pas pourquoi, mais j'avais pas pensé qu'on pouvait donner un "id" à une ligne "<li>" d'un menu. Cette possibilité va également me permettre de structurer mon menu en ayant des lignes avec des couleurs différentes pour les sous-menus, etc ... Bref, merci !

Fred.

EDIT: Orthographe ...
Modifié par Fredouille (11 Aug 2005 - 12:03)