18073 sujets

Questions générales et questions de débutants

[Résolu] Menu particulier, besoin d'aide !

Pages :
Bonjour,

Je sais que je suis nouvelle et que je commence mal, parce que je commence par une question, mais l'urgence de ma situation ne me permet pas d'être moins rapide en besogne ... (promis après je serai plus dispo Smiley smile )

Bref, voici ma question/problème:
Pour un site que je dois réaliser pour ma section (à la fac, oui, je suis étudiante), j'ai proposé de faire un double menu. Comprenez qu'en fait y'aurait un menu "imagé", et ailleurs sur la page, le même menu mais plutôt textuel, qui réagirait simultanément avec le premier menu. En gros, si on pase la souris sur une zone du menu image, le menu textuel réagit, avec le lien concerné qui se met en gras, par exemple.

Mon problème est que si c'est réalisable, je n'ai aucune idée de comment.
J'ai de bonnes connaissances en HTML et CSS, mais je suppose que ça n'est pas suffisant.

Si vous avez une idée d'où je dois orienter mes recherches ou si un code à bidouiller existe déjà, je suis preneuse. Javascript, Flash ? J'aime autant éviter le flash que je ne maîtrise absolument pas (mais un jour, peut être).

Enfin quoi qu'il en soit, si c'est réalisable "simplement", je suis preneuse.

Je vous met une image pour illustrer mes propos, peut être que c'est plus parlant.

Merci d'avance pour votre aide !

upload/5440-expmenu.gif
Modifié par Nilmalith (15 Mar 2006 - 10:49)
Ha oui tiens, j'y étais allée mais apparemment pas jusqu'en bas Smiley confused

Je vais tenter d'en adapter un au problème qui m'anime, j'vous tiens au courant si je me dépatouille pas.

Merci Smiley ravi
Bonjour, me revoilà avec pas mal de cheveux en moins ...

Le site doit être en ligne mercredi et je passe des heures et des heures à lutter contre IE et Mozilla pour avoir un menu qui fonctionne.

J'ai réussi à faire ça: http://perso.wanadoo.fr/les.rats/fac/essai7.htm en bidouillant à mort pour que tout fonctionne et sous IE, et sous Mozilla, mais mon problème est qu'il faille sortir de la télécommande pour passer d'un bouton à l'autre.

Si vous avez une idée, je prend Smiley lol Merci !

On m'a parlé de javascript mais j'espérais que ça soit possible en css malgré tout.

Sinon j'ai trouvé une alternative, mais je perd mon joli effet ...
Modifié par Nilmalith (11 Mar 2006 - 22:10)
Salut,
Concernant ta première question. Oui c'est possible si les deux éléments correspondants sont dans le même lien.

Exemple basique : 
<ul id="menu">
<li>
<a href="#" id="lienA"><img src="boutonrouge.jpg" alt="Bouton rouge" />Lien A</a>	
</li>
<li>
<a href="#" id="lienB"><img src="boutonvert.jpg" alt="Bouton vert" />Lien B</a>	
</li>
</ul>
#menu {
	margin-top: 100px;
}
#menu a img {
	position: absolute;
	top: 20px;
}
#lienA img {
	left: 20px;
}
#lienB img {
	left: 80px;
}
#menu a:hover {
	font-weight:bold;
}

Tu peux tester ICI

- Concernant ton dernier message (et l'essai 7) : ton lien est complétement vide. Il faudrait insérer un élément (par exemple <span>) que tu dimensionnerais et positionnerais (avec, en fond, l'image que tu souhaites) au survol du lien correspondant. Tu pourrais d'ailleurs ajouter dans ce span du texte que tu ferais « disparaître » en CSS (via text-indent par exemple). Ainsi, ça ne poserait plus de problème aux navigateurs textuels ou en style désactivé.
(il faudra penser à ajouter, par exemple, a:hover {background:none;} à cause d'IE)

Si tu es pressée, je pourrais te faire un exemple
Modifié par Alan (12 Mar 2006 - 10:33)
Bonjour,

Je n'ai pas pu répondre plus tôt.
Merci pour l'exempe, il est super, mais par contre je n'arrive pas à l'appliquer à mes map (enfin, mes area) que j'ai faites sur mon image de télécommande (pour simplifier les choses vu qu'en CSS ça marchait moyennement bien avec Mozilla)

Sinon pour les span, j'ai du mal aussi à comprendre leur fonction, en fait sur l'essai7, mon problème est que quand on est sur un bouton, et que l'image s'affiche, l'image couvre le bouton et même les autres, du coup quand on veut passer à un autre bouton, il faut sortir de la télécommande pour désactiver l'image activée par le passage de la souris sur un bouton.

On m'a dit qu'on javascript je pouvais définir l'affichage de mes images dans une autre zone, comme ça elles ne couvriraient pas les boutons, mais le javascript, j'me suis pas encore penchée dessus et j'avoue que j'ai pas des masses de temps en ce moment Smiley decu

En fait, mes images couvrent les boutons parce que c'est le seul moyen que j'ai trouvé pour qu'elles n'aient pas la tramblotte sous Mozilla, quand je les éloinais de leur lien d'origine (je sais pas si je suis claire)

Disons que ça donnait ça: http://perso.wanadoo.fr/les.rats/fac/essai3.htm avant (sous firefox les puces tremblottent ...)

Voilou Smiley confused

Merci en tout cas !
Salut,

Concernant l' "essai 7", il faut placer le span de façon à ce que celui-ci ne recouvre pas les autres éléments a, sinon tu auras le problème que tu m'expliques.

Tu peux voir un exemple réalisé à partir d'une capture de ta page ICI (trop vite fait, les images sont mal placées)

C'est uniquement en CSS. Tu peux aussi faire une variante en JavaScript si tu veux que l'image reste visible (et cliquable) tant que tu n'as pas passé la souris sur un autre bouton. Tu peux tester ICI

Concernant le menu "essai trois", le problème vient du fait que c'est a:hover que tu places ailleurs.. donc au moment ou tu mets le curseur au dessus de l'élément a, il se déplace et le curseur n'est plus au dessus de celui ci, donc il revient, etc.. en boucle. Ce qui doit être placé ailleurs (dans la zone au dessus de la télécommande), ce n'est pas a:hover, mais un élément compris dans celui-ci (soit l'élément span, l'élément img, ou d'autres..).

Bon courage
Modifié par Alan (13 Mar 2006 - 22:47)
Hoooolala oui ça marche ! Smiley biggrin

Bah dis donc, moi qui croyais que je cherchais l'impossible.
Merci beaucoup je paufine le bazar (déjà superbe) demain et pis j'vous tiens au courant ici de ma réussite (ou pas, d'ailleurs :lol:)

Merci beaucoup !!
Merci beaucoup Smiley lol

Ca marche vraiment nickel, j'ai réussi à faire un joli menu, j'ai modifié pas mal de trucs graphiquement maintenant que j'ai compris comment ça marche.

Rhaaa merci merci merci, vraiment !
Nilmalith a écrit :
Merci beaucoup Smiley lol

Ca marche vraiment nickel, j'ai réussi à faire un joli menu, j'ai modifié pas mal de trucs graphiquement maintenant que j'ai compris comment ça marche.

Rhaaa merci merci merci, vraiment !


Niveau ergonomie c'est un peu limite (désolé de jouer le rabat-joie Smiley sweatdrop ) : on s'attendrait à ce que le passage sur un bouton affiche le texte correspondant, mais une fois qu'on est dans la zone il faut en ressortir avec le pointeur de la souris, puis revenir en passant d'abord sur le bouton qui nous intéresse. Pas moyen de passer d'un bouton à l'autre et de voir le texte correspondant à chaque fois.
Pour ma part, j'ai passé environ 40 secondes à 1) comprendre le fonctionnement du menu et 2) arriver à afficher chaque texte. C'est un peu lent, tout de même.
mpop a écrit :
on s'attendrait à ce que le passage sur un bouton affiche le texte correspondant, mais une fois qu'on est dans la zone il faut en ressortir avec le pointeur de la souris, puis revenir en passant d'abord sur le bouton qui nous intéresse. Pas moyen de passer d'un bouton à l'autre et de voir le texte correspondant à chaque fois.

Salut,
Je crois que tu as testé la mauvaise page, celle qui avait justement ce problème (essai 7)
Alan a écrit :

Salut,
Je crois que tu as testé la mauvaise page, celle qui avait justement ce problème (essai 7)

Mais alors, laquelle est la bonne ?
J'ai trouvé comme lien :
http://perso.wanadoo.fr/les.rats/fac/essai3.htm (les puces qui clignotent et qui font mal aux yeux)
et
http://perso.wanadoo.fr/les.rats/fac/essai7.htm (la page avec le comportement que je décris).

Il y en a d'autres ?
En cherchant à la main, on trouve aussi :
http://perso.wanadoo.fr/les.rats/fac/essai6.htm (même effet que sur la 7)
http://perso.wanadoo.fr/les.rats/fac/essai8.htm (pas d'effet particulier, sauf un lien qui traîne tout seul on sait pas trop pourquoi...)
http://perso.wanadoo.fr/les.rats/fac/essai9.htm (pas d'effet visuel)

J'ai loupé quelque chose ?
Concernant le menu de l'essai7, la version "corrigée" (par rapport au problème que tu évoques) est celle ci, mais aucune des pages que tu cites n'a été corrigée et le lien vers la version finale n'a pas été donné Smiley smile
Bref, ce ne sont que des brouillons
Modifié par Alan (15 Mar 2006 - 14:43)
Aucune des pages données précédemment n'est la bonne.

Les pages "essai" étaient destinées à montrer les problèmes rencontrés Smiley cligne
La version finale sera bientôt en ligne et accessible pour tout le monde, je vous mettrais le lien si vous voulez, mais je ne voudrais pas que ça passe pour de la pub pour le site pour lequel j'ai eu à traiter ces problèmes Smiley cligne

C'est bien volontaire des pages "essai" et pas un lien vers un site fini Smiley smile

En tout cas, merci encore Smiley smile Je peux vous l'assurer, les dernières modifications sont radicalement différentes de ce que vous avez pu voir sur "essai". Enfin, l'idée est la même, maisl e site est nettement plus fonctionnel et .. beau Smiley lol

A bientôt, le site ne devrait pas tarder à être mis en ligne, quand la commission reflexive m'aura donné le contenu textuel Smiley ravi
Voilà voilà, il était temps (petit navire) et le site a évidemment pris beaucoup de retard (pas par ma faute vous pensez bien) et si vous voulez jeter un oeil au menu réalisé grace à l'aide précieuse d'Alan, c'est par là:

http://www.collcom.univ-avignon.fr

Merci beaucoup beaucoup !
Modifié par Nilmalith (04 Apr 2006 - 09:26)
C'est excellent, je trouve le menu bien trouvé. les boutons sont assez voyants pour savoir qu'il faut cliquez dessus pour avoir quelques chose, petit plus avec la petite info Zappez (personnellemnt j'en aurais fait la marque de la télécommande Smiley smile )
Moi j'aime bien (je vote pour)

David.
Oui, mais j'aurais également mis l'effet de survol sur le menu lui-même.
Sans lire le topic, je n'aurais pas eu l'idée d'aller sur la télécommande ...
Vero a écrit :
Oui, mais j'aurais également mis l'effet de survol sur le menu lui-même.
Sans lire le topic, je n'aurais pas eu l'idée d'aller sur la télécommande ...


Il y est Smiley smile
Enfin, on peut cliquer sur le menu "texte" sans passer par la télécommande Smiley smile

Merci en tout cas Smiley lol
Modifié par Nilmalith (04 Apr 2006 - 13:58)
Je voulais parler de l'effet de survol lorsque je passe sur le menu et non sur la télécommande ..
Si nous sommes d'accord, ce survol ne fonctionne sous mon FF Linux ...
Smiley smile

<edit> le lien fonctionne, nous parlons du changement de couleur au survol
Modifié par Vero (04 Apr 2006 - 14:03)
Ah oui ça c'est normal.

D'une part parce qu'au départ je n'avais pas voulu mettre 2 menus (mais que je suis quand même gentille pour ceux qui n'aiment pas la nouveauté)

D'autre part parce que justement, l'idée est que le ludisme soit sur la télécommande et pas sur le menu texte.

Non méo, si on veut de la couleur, on joue le jeu Smiley cligne Smiley langue
Pages :
Sujet clos
Aller à