28173 sujets

CSS et mise en forme, CSS3

[Résolu] Menu change de couleur

Bonjour bonjour !

Avant de commencer mon site web, j'ai réalisé la charte graphique sous Photoshop. Contente du résultat, je réfléchi à comment faire pour l'intégrer en html avec un css propre qui respecte les normes des standards web.

Mon souci est le suivant. J'ai un menu en bleu, avec un cadre bleu, pour l'accueil. En survolant la rubrique "références", le menu (une liste) et le cadre (une image) deviennent rouge, et de meme pour les autres rubriques. C'est à dire, qu'au survol de mes rubriques, mon menu et mon cadre changent de couleur. Je sais pas si c'est possible en css, en combinant des div dans a. Je sais qu'il serait simple de le faire en flash, mais j'aimerai le faire au mieux.
Avez vous une idée ? J'espère avoir été assez précise.

Merci d'avance Smiley lol

Alex Smiley biggrin
Modifié par C_may (14 Dec 2007 - 15:43)
Bonjour,

Le comportement que tu décris devrait idéalement être réalisé en JavaScript, bien qu'une solution en CSS est probablement possible.

C_may a écrit :
en combinant des div dans a

Attention: l'élément a est un élément en ligne, il ne peut par conséquent contenir d'éléments de type "block" tel que div
Bon, pour le geste:



[#black][b]HTML[/b][/#]


<ul>
	<li><a href="#">Élément</a></li>
	<li><a href="#">Élément</a></li>
	<li><a href="#">Élément</a></li>
</ul>




[#black][b]CSS[/b][/#]


ul {position:relative; list-style:none; width:20em; padding:0;}

li {position:absolute; z-index:1;}
li+li {left:5em;}
li+li+li {left:10em;}

li:hover {z-index:0;}

li:first-child:hover {background:fuchsia; width:100%;}
li+li:hover {background:lime; width:15em; padding-left:5em; left:0;}
li+li+li:hover {background:yellow; width:10em; padding-left:10em;}
Salut,

Je pense qu'il te faut faire appel à une fonction javascript qui en survol de ton lien change la classe (et par voie de conséquence son apparence) de ton menu.

En schématisant (beaucoup) :

Ton HTML :
<div id="menu" class="bleu">
	...
	<a href="#" onMouseOver="changeclass('menu', 'rouge');" onMouseOut="changeclass('menu', 'bleu');">references</a>
</div>


Ton CSS :
#menu.bleu{
	background-color: blue;
}
#menu.rouge{
	background-color: rouge;
}


Ton Javascript :
function changeclass(cible, style){
	if(document.getElementById){
		var objet = document.getElementById(cible);
		objet.className = style;	
	}
}


Antoine
Grillé !

Choisis une des deux options en fonction de ton code HTML que je te conseille de livrer dans tes prochains posts, ça permet d'y voir plus clair Smiley cligne


Antoine
Ok, merci les gars, je vais tenter ça ! Smiley biggrin

Je vous tiens au courant, je sens que je vais un peu galérer Smiley confus

A+
Déjà, antoine, j'ai testé, ca ne marche pas. Le fond est bien bleu, quand je passe la souris, le fond disparait, et ne devient pas rouge. Smiley ohwell
... Ah non, j'ai rien dit, c juste qu'en css, c "red" pas rouge.

A suivre...
Modifié par C_may (14 Dec 2007 - 14:37)
Ouhhouuuuuu !!!! Ca marche, avec la méthode d'Antoine !
Super, merci beaucoup !
C tout bête, mais je connais pas super bien le Javascript !

Encore merci ! Smiley lol
C_may a écrit :
Ouhhouuuuuu !!!! Ca marche, avec la méthode d'Antoine !
Super, merci beaucoup !
C tout bête, mais je connais pas super bien le Javascript !

Encore merci ! Smiley lol

Bravo Smiley smile
Tu considères que ce sujet est [Résolu] ? Smiley cligne
C_may a écrit :
Ouhhouuuuuu !!!! Ca marche, avec la méthode d'Antoine !
Super, merci beaucoup !
C tout bête, mais je connais pas super bien le Javascript !

Encore merci ! Smiley lol

J'en déduis donc que ton sujet est [Résolu] ? Smiley murf

<edit>Flûte ! Grillée !</edit>
Modifié par Cygnus (14 Dec 2007 - 15:26)
Sujet clos
Aller à