28221 sujets

CSS et mise en forme, CSS3

Menu css avec image

bonjour,

je vais essayer d expliquer mon probleme clairement:

j'ai créé un menu horizontal simple juste 4 boutons avec un fond, j'aurais aimer que :
- quand on clique sur un des boutons un fond different s'affiche
- et que lorsqu'on clique de nouveau ( sur un autre bouton ) le premier reprenne ca forme initiale et le deuxieme prenne la forme avec le nouveau fond.

pour ca j'ai créé 2 etats pour les boutons dans ma css :


div#menu{color: #fff; POSITION: absolute;}
.nivo1 {float: left; color: #fff;}
.nivo1a{float: left; color: #fff;}
.lvl1a {background: url(images/bg_menu_1.gif)
.lvl1:hover {background: #666}
.lvl1a:hover {color: #ff0}


et le code html :


<div id="menu">
     <a href="lien.htm" class="lvl1">lien 1</a>
     <a href="lien.htm" class="lvl1">lien 2</a>
     <a href="lien.htm" class="lvl1">lien 3</a>
     <a href="lien.htm" class="lvl1">lien 4</a>
</div>


en faite je voulais savoir si il y a une astuce ou un javascript pour passer de class="lvl1" à class="lvl1a" quand on a cliqué sur un bouton et inverser ainsi les etats en fonction du bouton cliqué.

j'espere avoir ete asser clair
merci de votre aide
Modifié par okuteur (22 Mar 2005 - 23:10)
Salut !
Pas besoin de javascript Smiley cligne
Utilise simplement la pseudo classe :active sur tes liens et tu obtiendra l'effet souhaité Smiley lol

Attention à déclarer :active AVANT :hover

Ca s'utilise de la même façon que :hover
Modifié par Olivier (22 Mar 2005 - 23:11)
bonsoir Olivier

je viens d'essayer ta solution :


.lvl1:active {BACKGROUND: url(mages/bg_topnav_1.gif)}


juste avant mon hover mais ca ne marche pas il m'invalide meme l'effet du hover ( plus de hightlight ).

si tu as une autre idée je suis preneur
salut,

ha ok pour le deplacé j'avais pas vu.

il y a un exemple de ce que je voudrais arriver a faire sur le site :
http://www.nero.com/fr/index.html

le menu en ligne ( produits support acheter ... ), je me suis inspirer de leur site pour voir comment faire.
Modifié par okuteur (23 Mar 2005 - 20:05)
Ni javascript ni HTML là dedans, ni classes non plus.

1- Ton id "menu" est suffisant pour accéder aux liens, il suffit d'utiliser
#menu a

et tu pourras styler tous tes liens (pour mettre en place le hover par exemple, via #menu a:hover)
2- :active se place après :hover (il doit prendre la précédence, puisqu'on a en même temps "active" et "hover" et qu'on veut qu'active prenne le dessus :o)
:active sert simplement à donner un lien précis à un bouton "enfoncé" (quand on est en train de cliquer dessus par exemple), :hover accédant simplement au survol
3- Dans chaque page, tu ajouteras à l'un des liens un id précis (par exemple id="currentPage") et tu définiras des styles spécifiques pour celui-ci.
Le lien portant l'ID étant naturellement celui qui correspond à la page actuellement visitée (le site de Nero utilise - à tord - des classes, mais le principe est le même, l'id/la classe n'est pas modifié dynamiquement, il n'est pas attribué au même élément du menu en fonction de la page)
merci Masklinn,

si j'ai bien compris sur le site de nero il ont "triché" en changant la classe du bouton sur chaque page appeler.

un grand merci je vais essayer desuite Smiley smile
okuteur a écrit :
merci Masklinn,

si j'ai bien compris sur le site de nero il ont "triché" en changant la classe du bouton sur chaque page appeler.

un grand merci je vais essayer desuite Smiley smile

En gros oui, et (je le répète) ils se sont d'ailleurs planté au passage, il faut par défaut ne donner ni classes ni ids aux liens (on donne un id au menu, ce qui permet de styler tous les liens d'un coup) et placer l'id spécial sur le lien spécial (il y a un certain nombre d'articles qui parlent de ce genre de chose, la clarification de la position du visiteur au sein du site tout ça, mais je serais bien en peine de t'en retrouver un au pied levé Smiley biggol )
Masklinn a écrit :

En gros oui, et (je le répète) ils se sont d'ailleurs planté au passage, il faut par défaut ne donner ni classes ni ids aux liens (on donne un id au menu, ce qui permet de styler tous les liens d'un coup) et placer l'id spécial sur le lien spécial (il y a un certain nombre d'articles qui parlent de ce genre de chose, la clarification de la position du visiteur au sein du site tout ça, mais je serais bien en peine de t'en retrouver un au pied levé Smiley biggol )

Dans la faq Smiley cligne ?
Comment marquer la page en cours comme active dans le menu ?
Sujet clos
Aller à