Changement couleur menu lors sélection HTML
guit5412
-
Freedomsoul Messages postés 509 Date d'inscription Statut Membre Dernière intervention -
Freedomsoul Messages postés 509 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous,
J'aimerais savoir comment changer de couleur une rubrique d'un menu lorsque celle ci est sélectionnée. Par exemple, lorsque l'on est sur la page d'accueil, la couleur de la rubrique "Accueil" devient rouge, et lorsque l'on clique par exemple sur "Nous contacter", "Accueil" reprend sa couleur initiale et "Nous contacter" devient rouge.
Merci beaucoup pour votre aide !!
J'aimerais savoir comment changer de couleur une rubrique d'un menu lorsque celle ci est sélectionnée. Par exemple, lorsque l'on est sur la page d'accueil, la couleur de la rubrique "Accueil" devient rouge, et lorsque l'on clique par exemple sur "Nous contacter", "Accueil" reprend sa couleur initiale et "Nous contacter" devient rouge.
Merci beaucoup pour votre aide !!
A voir également:
- Changement couleur menu lors sélection HTML
- Changement dns - Guide
- Menu déroulant excel - Guide
- Editeur html - Télécharger - HTML
- Excel cellule couleur si condition texte - Guide
- Boite a couleur - Télécharger - Divers Photo & Graphisme
4 réponses
Ah, d'accord, merci beaucoup !! Donc dans le code, là où il y a écrit ex :
<a href="www.google.fr">Google</a>, je mets :
<a href="www.google.fr" class="coloration_menu">Google</a> ? Mais lorsque j'arriverai sur le site, "Accueil" n'aura pas la couleur que je veux, si ?
Edit : j'ai essayé, mais cela ne marche pas...
J'ai créé la classe (dans le panneau de navigation) :
nav .coloration_menu a {
color: #ed2024;
}
et ensuite dans le code de ma première page (index.html), j'ai mis ça :
<li><a href="index.html" class="coloration_menu">Accueil</a></li>
mais ça ne change pas de couleur...
<a href="www.google.fr">Google</a>, je mets :
<a href="www.google.fr" class="coloration_menu">Google</a> ? Mais lorsque j'arriverai sur le site, "Accueil" n'aura pas la couleur que je veux, si ?
Edit : j'ai essayé, mais cela ne marche pas...
J'ai créé la classe (dans le panneau de navigation) :
nav .coloration_menu a {
color: #ed2024;
}
et ensuite dans le code de ma première page (index.html), j'ai mis ça :
<li><a href="index.html" class="coloration_menu">Accueil</a></li>
mais ça ne change pas de couleur...
en css tu peut faire des
A:visited {color: xxx;}
A:active {color: xxx;}
A:hover {color: xxx;}
mais ca ne marchera qu'une seule fois pour le visited par exemple.
http://www.echoecho.com/csslinks.htm#
Dans ton cas il vaut mieux passer par du javascript qui recolorise le texte à la volé.
A:visited {color: xxx;}
A:active {color: xxx;}
A:hover {color: xxx;}
mais ca ne marchera qu'une seule fois pour le visited par exemple.
http://www.echoecho.com/csslinks.htm#
Dans ton cas il vaut mieux passer par du javascript qui recolorise le texte à la volé.
le principe est là guit,
fichier page1.html
<a href="/page1.html" class="menu_select">Page1</a>
<a href="/page2.html" class="menu">Page2</a>
<a href="/page3.html" class="menu">Page3</a>
fichier page2.html
<a href="/page1.html" class="menu">Page1</a>
<a href="/page2.html" class="menu_select">Page2</a>
<a href="/page3.html" class="menu">Page3</a>
fichier page3.html
<a href="/page1.html" class="menu">Page1</a>
<a href="/page2.html" class="menu">Page2</a>
<a href="/page3.html" class="menu_select">Page3</a>
à ça dans toutes les pages
<script>
.menu
{
color: red;
font: bold;
}
.menu_select
{
color: blue;
font: bold;
text-decoration: underline;
}
</script>
fichier page1.html
<a href="/page1.html" class="menu_select">Page1</a>
<a href="/page2.html" class="menu">Page2</a>
<a href="/page3.html" class="menu">Page3</a>
fichier page2.html
<a href="/page1.html" class="menu">Page1</a>
<a href="/page2.html" class="menu_select">Page2</a>
<a href="/page3.html" class="menu">Page3</a>
fichier page3.html
<a href="/page1.html" class="menu">Page1</a>
<a href="/page2.html" class="menu">Page2</a>
<a href="/page3.html" class="menu_select">Page3</a>
à ça dans toutes les pages
<script>
.menu
{
color: red;
font: bold;
}
.menu_select
{
color: blue;
font: bold;
text-decoration: underline;
}
</script>
