Rechercher : dans
Par :

[CSS] couleur pour des liens de menu

Dernière réponse le 25 mai 2009 à 19:10:08 kyky, le 13 jan 2006 à 12:36:23 
 Signaler ce message aux modérateurs

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

Configuration: Windows XP professionnel

Meilleures réponses pour « [CSS] couleur pour des liens de menu » dans :
CSS - Les couleurs VoirLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de...
Les classes de style (CSS) VoirLes classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des...
La syntaxe des style (CSS) VoirDéfinition d'un style La définition d'un style se fait à l'aide de règles en texte simple permettant de décrire l'aspect des éléments de la page. Une règle CSS est caractérisée par deux principaux éléments : Un sélecteur de balises, permettant de...

1

txiki, le 13 jan 2006 à 13:12:06
  • +1

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 !

Le bonheur est la seule chose que l'on peut donner sans l'avoir.

Répondre à txiki

2

crycry, le 13 jan 2006 à 14:10:06

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

Répondre à crycry

3

txiki, le 13 jan 2006 à 14:21:34

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.

Le bonheur est la seule chose que l'on peut donner sans l'avoir.

Répondre à txiki

4

crycry, le 14 jan 2006 à 18:11:17

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

Répondre à crycry

5

NeMMo, le 18 jan 2008 à 14:53:50

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

Répondre à NeMMo

6

NeMMo, le 18 jan 2008 à 15:21:07

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

Répondre à NeMMo

7

NeMMo, le 28 jan 2008 à 11:14:34

Personne pour me répondre??? Please, Help ME !!!! :s

Répondre à NeMMo

8

Thomazevskhi, le 18 sep 2008 à 23:58:08

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 ;)

Répondre à Thomazevskhi

9

midiweb, le 21 nov 2008 à 18:46:29

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+

Répondre à midiweb

10

xavyeii, le 3 déc 2008 à 19:07:15

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

Répondre à xavyeii

11

 max, le 25 mai 2009 à 19:10:08

Si si ça marche
il faut juste mettre :
#bouton:focus{


}
# si c'est un id

Répondre à max