Sous menu dynamique - Forum Alsacréations : CSS et Standards Web

Auteur
Devil	# 25 Apr 2008 - 17:11:13
23 Posts	bonjour a tous, j'ai une petite question : comment faire un sous menu dynamique? exemple : voici le sous menu de départ (fond gris) quand je click sur le bouton dojo. [img=http://img255.imageshack.us/img255/1773/36083503hq0.th.jpg] je voudrai que quand je click sur bujinkan, il change pour devenir celui ci. [img=http://img255.imageshack.us/img255/8122/62603249bx4.th.jpg] je voudrai a tout prix éviter le javascript et je pense qu'il y a une solution en CSS merci beaucoup
23 Posts
koala64	# 26 Apr 2008 - 13:19:52
Modérateur 3841 Posts	Salut, Je ne suis pas sûr de bien cerner ta demande mais la pseudo-classe "click" n'existe pas. Il va donc t'être difficile de faire uniquement cela en CSS. Si tu changes de page, tu peux par exemple appliquer une classe sur l'onglet courant et modifier le positionnement du background de ton onglet suivant que la classe est appliquée ou non. Il faut ici regrouper les deux images de chaque onglet en une et jouer avec la propriété background-position. Si par contre, tu ne changes pas de page, il faut passer par Javascript pour appliquer / supprimer cette classe en fonction de l'onglet cliqué. Ca, c'est pour le cas où tes images sont bien des images de décoration. Pour le cas où tes images relèvent du contenu : - avec changement de page -> Il faut modifier la source de l'image au sein de chaque page pour rendre un des onglets actif. - sans changement de page -> idem mais via JS
Modérateur 3841 Posts
Devil	# 26 Apr 2008 - 17:37:06
23 Posts	merci mais le click n'est pas une classe c'est l'action ^^ et je change pas de page sinon ca serait très simple, je travaille avec des include de mon entête... mais bon a mon avis pas trop le choix je vais devoir javascripter merci de ton aide
23 Posts
Devil	# 27 Apr 2008 - 10:51:43
23 Posts	si je dois utiliser le JS, quelqu'un aurait il une idée de la marche a suivre dans ce cas? merci
23 Posts
koala64	# 28 Apr 2008 - 07:56:49
Modérateur 3841 Posts	Salut, mais le click n'est pas une classe c'est l'action ^^ Tout à fait. Je ne faisais pas référence à une classe mais aux pseudo-classes CSS du type hover, focus, active,... Au vu de tes onglets, il faut que les images soient directement dans le (x)html, ce qui nous donne quelquechose du type : <ul id="menu"> <li><a href="#" title="riri"><img src="riri.png" width="100" height="30" alt="riri" /></a></li> <li><a href="#" title="fifi"><img src="fifi.png" width="100" height="30" alt="fifi" /></a></li> <li><a href="#" title="loulou"><img src="loulou.png" width="100" height="30" alt="loulou" /></a></li> </ul> et pour que celles-ci réagissent au clic, il faut créer un fichier JS que tu lies à ta page et dans lequel : - tu lances une fonction "selectItems", par exemple, au chargement de la page - dans le corps de cette fonction, il faut sélectionner les liens de ton menu à l'aide des méthodes getElementById et getElementsByTagName puis, pour chacun d'entre eux, leur affecter un gestionnaire d'événement (une nouvelle fonction... "chgSrc", par exemple) au clic - dans le corps de "chgSrc", modifier la source de l'image qui se trouve dans le lien cliqué (selon qu'elle ait déjà été cliquée ou non) et annuler l'action normale du lien ainsi que la propagation de l'événement. Si malgré ces indications, tu ne vois pas par où commencer, cette initiation au JS te sera bien utile. Par la suite, essaie puis montre nous ton code afin que nous puissions t'aider à le corriger. Bon courage. Modifié par koala64 (28 Apr 2008 - 11:30)
Modérateur 3841 Posts
Devil	# 28 Apr 2008 - 18:19:20
23 Posts	merci beaucoup je vais voir ta solution des que j'ai un peu de temps sinon j'ai trouvé un truc aussi c'est de faire mon sous menu dans un div (un différent pour chaque sous menu) et de faire une fonction javascript qui affiche ou non le sous menu... a voir merci encore
23 Posts
Prévenir un modérateur

Les références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org

Nos partenaires : Editions Eyrolles - Location vacances France - Location vacances Europe

Nikozen : Hébergement - Réalisation : Alsacreations.fr