[CSS] couleur pour des liens de menu

Fermé
kyky - 13 janv. 2006 à 12:36
 yahcine86 - 25 mai 2012 à 17:35
Bonjour,

Je suis en train de mettre en place un menu situé sur la gauche de ma page. Par défaut, le texte du menu est en blanc et devient noir quand la souris passe dessus. J'aimerai que lorsqu'on clic sur un des menus, il se colorie en orange. Jusque là tout va bien. Mais j'aimerai aussi que lorsque je clic sur un autre menu, celui se colorie en orange tandis que les autres reprennent leur apparence initiale (soit en blanc et en noir quand on passe dessus). C'est là que je bloque. Quelqu'un aurait-il une idée?
Merci d'avance

kyky

11 réponses

txiki
Messages postés
3928
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
6 avril 2022
506
13 janv. 2006 à 13:12
Salut kyky,
Tu devrais faire une feuille de style (enregistrer l'exemple ci-dessous en .css). Ainsi tous les liens de ton menu auront cette apparence.
NOTE: tu peux supprimer le mot menu comme ça TOUS les liens de ton site seront comme ça.

.menu a { /* Les liens qui ne sont pas sous le curseur. */
	color: #FFFFFF; //ta couleur
	text-decoration:none; // pas de soulignement
	font-family:Arial,Verdana; // la font du texte
}
.menu a:hoover { /* Les liens lorsque le curseur est dessus. */
	color: #FFFFFF; //ta couleur
	text-decoration:none; // pas de soulignement
	font-family:Arial,Verdana; // la font du texte
}
.menu a:visited { /* Les liens visités. */
	color: #FFFFFF; //ta couleur
	text-decoration:none; // pas de soulignement
	font-family:Arial,Verdana; // la font du texte
}
Ca s'appelle une classe.
Bon courage !
11
Attention, c'est "hover" pas "hoover".
0
crycry
Messages postés
2
Date d'inscription
vendredi 13 janvier 2006
Statut
Membre
Dernière intervention
14 janvier 2006
1
13 janv. 2006 à 14:10
Merci pour cette réponse, mais c'est ce que je fait déjà. Voici ci-dessous mes classe css:

.subMenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 16px;
color: #FFFFFF;
}


A.subMenu:hover { color: #000000;}

A.subMenu:visited {color:#F3BE00;}

A.subMenu:hover { color: #000000;}

Le problème est que mes liens récemment visités restent orange alors que je veux qu'ils redeviennent blanc dès que je clic sur un autre menu. De cette façon, l'utilisateur sait toujours dans quel menu il est actuellement. Une idée ???
Merci encore

crycry
2
txiki
Messages postés
3928
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
6 avril 2022
506
13 janv. 2006 à 14:21
Pourquoi A.subMenu:hover { color: #000000;} est en double ???
Dans ton cas, tu devrais mettre, en plus:
A.subMenu:active { color: #000000;} /* ta couleur pour le lien actif c'est à dire celui qui est en trin d'etre visité */

N'hésite pas à mettre des commentaires dans tes CSS entre /* et */.
ça permet de mieux voir plus tard ton code.
0
crycry
Messages postés
2
Date d'inscription
vendredi 13 janvier 2006
Statut
Membre
Dernière intervention
14 janvier 2006
1
14 janv. 2006 à 18:11
Si A.subMenu:hover { color: #000000;} est en double, c'est parceque le fichier CSS est lu de façon séquentiel. ça permet que mes liens redeviennent noir quand la souris passe dessus après l'avoir récemment sélectionné, sinon il reste orange tout le temps.
Sinon, le A.subMenu:active ne résout pas mon problème: après avoir sélectionné un menu, puis un autre, le premier reste en orange alors que je veux qu'il redevienne blanc. L'utilisateur sait ainsi dans quel menu il navigue actuellement. A priori, il n'y a pas de solution avec un fichier css. Par contre, j'ai peut-être trouvé une solution en insérant du JSP dans ma page. Je teste...
Merci et à plus

crycry
0
Salut a tous. Moi aussi, jaimerais bien faire la même chose que toi. Si quelqu'un sait. il serai t bien gentil de me donner un coup de main. merki. ;p
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
j'ai trouver ce bout de code :

function changeColor(myElement){
var links = document.getElementsByTagName('a');//On créé un tableau comprenant tous les liens de la page.
for(var i=0;i<links.length;i++)
links[i].style.color = '#002B9E'; //On donne la couleur 002B9E à tous les liens de la page.

myElement.style.color ='#FF0000'; //On donne la couleur FF0000 au lien venant d'être cliqué.
}

et voici lapel dans un onclick :

onClick="changeColor(this);"

mais je n'arrive pa a l'intégrer a mon code de menu :


if ($pt->child==null) // Pour rajouter la flêche si besoin
{
echo "document.write(\"<tr><td id='",$pt->id,"_td' valign='middle' class='item' onmouseover=this.className='item_hover1';";
$this->hide_partiel($pt->dad,$pt->dad->child);
echo " onmouseout=this.className='item' onclick=this.className='item_hover2'><a href='",$pt->lien,"' class='item'>";
if ($pt->image!="")
{
echo "<img border=0 src='",$pt->image,"'> ";
}
echo $pt->name,"</a></td></tr>\")\n";
}

Esque quelqu'un a une solution ???

Merci d'avance
0
Personne pour me répondre??? Please, Help ME !!!! :s
0
Thomazevskhi
18 sept. 2008 à 23:58
Je ne peux pas t'aider à l'intégrer, mais par contre je peux te dire que c'est à mon avis pas une très bonne chose de faire du style avec du PHP, le css est beaucoup mieux pour ça. Mais ça ne répond pas vraiment à ta question, juste un conseil de faire un vrai style en css et tu n'auras pas de problème ;)
0
salut, je suis dans le même cas et ne trouve pas la solution en css
Je voudrais que le lien sur lequel je clique reste sélectionné pendant que je lis la page relative à ce lien. Une idée?
Par ex. Je clique sur "Produits" et mon client lit les infos sur produits. Le lien "Produits" reste "allumé" ainsi le client sait dans quelle partie du menu il se situe au moment de la lecture.
A+
0
xavyeii
Messages postés
29
Date d'inscription
mercredi 23 avril 2008
Statut
Membre
Dernière intervention
19 octobre 2012

3 déc. 2008 à 19:07
Bonjour à tous,

Je me permet de déterrer le post de crycry du 14 janvier 2006 pour poser mon problème qui est sensiblement le même !

Voici mon code:

a {color: #6699CC; text-decoration:none;}
a:focus,
a:hover,
a:active {color:#0000FF; text-decoration:none;}


Avec ce code les menus visités ne changent pas de couleurs. Normal vous me direz il n'y a pas ":visited"

Le voici inclus dedans:

a {color: #6699CC; text-decoration:none;}
a:visited {color:#EFA879; text-decoration:none;}
a:focus,
a:hover,
a:active {color:#0000FF; text-decoration:none;}


Avec ce code là, les menus visités changent de couleurs mais ne reviennent pas à la couleur d'origine lorsqu'on change de menu.

Comment faire pour que la couleur d'origine revienne sur les menus lorsqu'on change de menu ?

Est-ce que quelqu'un aurait une solution ?


Merci d'avance,
Xavier
0
si si ça marche
il faut juste mettre :
#bouton:focus{


}
# si c'est un id
0
sa arche pas
0
sa marche pas !!
0
ça marche pas
0
bibilolo34
Messages postés
1
Date d'inscription
lundi 24 octobre 2011
Statut
Membre
Dernière intervention
24 octobre 2011

24 oct. 2011 à 13:45
Un tutoriel très complet.
0