Menu déroulant sur image

Bonjour,

Je souhaiterais savoir s'il est possible de réaliser un menu déroulant (idéalement en CSS) sur une image.

J'ai réalisé un menu texte déroulant vertical en CSS grâce à un tutoriel d'Alsacreations (merci ), placé sous une frise illustrée. Plutôt qu'un clic en tête de menu, mon employeur préfèrerait que les visiteurs aient à cliquer sur un élément de la frise pour dérouler les menus respectifs.

Voici le lien vers une des pages concernées :

http://www.urbaflux.com/pages/urbaflux_esp_pub.php

Quelqu'un peut-il me renseigner à ce sujet, et si oui par quelle astuce est-ce réalisable ?

Merci beaucoup.

Peux-tu préciser le sens de ton problème : Qu'entends tu par "frise" ?

Sur le lien que tu donnes, on ne voit pas de menu déroulant, même textuel. Plus de précision ???

trigun a écrit :
Peux-tu préciser le sens de ton problème : Qu'entends tu par "frise" ?

Sur le lien que tu donnes, on ne voit pas de menu déroulant, même textuel. Plus de précision ???

La frise est l'illustration de mise en situation avec les personnages, le marché, les bornes, etc...

Il y a au dessus de cette frise 5 liens HTML vers les différents domaines d'applications des bornes. Au dessous de la frise, il y a un menu déroulant vertical réalisé en CSS. Je ne pense pas qu'il y ait de soucis d'affichage, j'avais testé sous IE, Firefox et Netscape.

Mon soucis est donc, plutôt que de cliquer sur un texte pour dérouler le menu (par exemple, "Escaflux 65/66"), de découper la frise et de cliquer sur les images pour dérouler le menu. En somme, remplacer "Escalux 65/66" par l'image.

Bonjour,

Techniquement, cela n'a rien de bien compliqué. Du point de vue accessibilité, c'est tout à fait gérable.

En revanche, pour ce qui est l'ergonomie, on s'aventure droit dans un bel exemple de "navigation énigmatique" qui détournera des visiteurs potentiels. Entre le menu qui se déroule déjà de manière inattendue et la frise dont il faudra deviner le sens totalement obscur... C'est une erreur monumentale.

La frise est-elle au moins, pour le décideur, modifiable pour mettre un peu de texte ?

Sinon, s'il faut absolument en passer par là, rassure-toi: on ne va pas laisser tomber un intégrateur de bonne volonté dans de telles circonstances
Modifié par Laurent Denis (21 Aug 2006 - 14:42)

Je ne vois pas trop le soucis, à la place de ton premier niveau de menu (lequel tu survoles pour dérouler)

<dt onmouseover="javascript:montre('smenu1');"><font color="#A3DA3A">Escaflux 65/66</font></dt>

tu mets :

<dt onmouseover="javascript:montre('smenu1');"><img src="tonimagedecoupe1.jpg" alt="Escaflux 65/66" title="description de la page lien" /></dt>

en adaptant tes style css pour les dd tu devrais arriver à quelques choses de sympathique.

Dans cette solution, tu es obligé de découper ta frise en plusieurs images.Un autre solution moins élégante je trouve serai de crée un lien vide qui a pour height et width la taille qu'il représente sur la frise (il faudrait surement un &nbsp; entre les balises <a>). Tout cela est à tester donc, mais j'espère t'avoir donner quelques pistes pour t'aider.

Et je pense que ce menu est obsoléte maintenant, notament au niveau de la sémentique html. N'oublions pas que les dl dt dd sont utilisés généralement pour des listes de définitions. Pour la création de menu, préfére leur ul li.

Exemple d'un très bon menu 100% css :
http://www.lorient.fr/


********EDIT*******

Juste une édition pour dire que je suis d'accord avec mon compatriote ci-dessus. Au niveau de la logique de navigation, ton décideur décide (il est là pour ça hein) une connerie. Dans un site en flash à la navigation (et au thème) original, une navigation graphique et déviante peu apporté un plus. Ton site a l'air plus conforme et officiel, voire informel, et la clarté et la lisibilité seront un point essentiel pour conserver le visiteur sur le site. Et te dirigeant vers cette solution, tu es mal parti. Déjà, le fait d'avoir un menu bas si peu identifiable au premier coup d'oeil est un mauvais choix (enfin il me semble). L'information vers laquelle il mène à l'air assez importante, donc l'accès à ce menu doit être naturelle etaisée. Voilà, c'est tout
Modifié par trigun (21 Aug 2006 - 14:52)

trigun a écrit :
Exemple d'un très bon menu 100% css :
http://www.lorient.fr/

Ahem. Pas vraiment. La navigabilité au clavier n'est pas prise en compte du tout. La désactivation des couleurs dans FF et IE5.x non plus.

Once again, pour une problématique correcte du menu d'accessibilité (je n'ai pas dit une solution, quoique cela s'en rapproche beaucoup), voir http://www.fairytells.net/index.php/2006/06/26/28-menu-deroulant-et-accessibilite-partie-1
Modifié par Laurent Denis (21 Aug 2006 - 14:56)

Tout à fait d'accord, ce menu n'est pas un modèle d'accessibilité (et je ne pense pas l'avoir vendu tel quel ^^) mais j'aime beaucoup ça (<= EDIT : waw la faute !!) sa non utilisation du javascript.

Et puis, je pense que le dernier soucis de son décideur soit l'accessibilité web.
Modifié par trigun (21 Aug 2006 - 15:12)

Laurent Denis a écrit :
Bonjour,

Techniquement, cela n'a rien de bien compliqué. Du point de vue accessibilité, c'est tout à fait gérable.

En revanche, pour ce qui est l'ergonomie, on s'aventure droit dans un bel exemple de "navigation énigmatique" qui détournera des visiteurs potentiels. Entre le menu qui se déroule déjà de manière inattendue et la frise dont il faudra deviner le sens totalement obscur... C'est une erreur monumentale.

La frise est-elle au moins, pour le décideur, modifiable pour mettre un peu de texte ?



Sinon, s'il faut absolument en passer par là, rassure-toi: on ne va pas laisser tomber un intégrateur de bonne volonté dans de telles circonstances

Laurent Denis > j'avais carte blanche pour refondre le site Web de l'entreprise, j'ai préféré garder la frise en illustration et gérer la navigation par un menu texte en CSS en dessous.

Le souhait du gérant est d'utiliser la frise découpée pour naviguer, selon lui solution plus évidente pour les utilisateurs.

Je ne suis pas certain que les visiteurs songent davantage à survoler la frise, plus qu'un lien texte (même en ajoutant du texte dans l'image), pour dérouler le menu. Qu'en penses tu ?

Je suis un newbie en CSS et PHP, rien que le menu déroulant à paramétrer m'a obligé à forcer ma nature de dessineux. Cela dit, lorsque l'on arrive à ses fins, on apprend à apprécier le code

trigun a écrit :
Tout à fait d'accord, ce menu n'est pas un modèle d'accessibilité (et je ne pense pas l'avoir vendu tel quel ^^) mais j'aime beaucoup ça non utilisation du javascript.

Et puis, je pense que le dernier soucis de son décideur soit l'accessibilité web.

Oui, la non utilisation du Javascript est un critère que je me suis fixé. Je compte faire de même pour remplacer les rollovers de la page index.

Merci pour le petit bout de code, je vais essayer ça. Cette solution me plaît davantage que le lien vide, il me semble que c'est déconseillé...

patamodeleur a écrit :

Le souhait du gérant est d'utiliser la frise découpée pour naviguer, selon lui solution plus évidente pour les utilisateurs.

La plus évidente pour lui, plutôt, car elle lui est familière (il n'en serait pas l'auteur ? Ce sont des choses qui arrivent souvent ).

La frise (ou plutôt les frises) n'ont absolument rien d'intuitif d'un point de vue extérieur. Leur qualité signalétique est très faible. leur graphisme n'attire pas vraiment l'oeil (ça fait un peu remplissage, pour tout dire) et rien n'incite à y promener sa souris.

patamodeleur a écrit :

Je ne suis pas certain que les visiteurs songent davantage à survoler la frise, plus qu'un lien texte (même en ajoutant du texte dans l'image), pour dérouler le menu. Qu'en penses tu ?

Disons que ce serait un moindre mal, si la frise pouvait être plus explicite grâce à du texte. Mais un menu textuel restera le plus ergonomique et le plus visité. Partir sur le principe qu'il faut que les visiteurs "songent" à survoler quelque-chose est déjà une très mauvaise base. Il y a des codes visuels tacites sur le Web, qui font qu'un visiteur ne se pose pas de question et clique instinctivement sur un menu explicite...

patamodeleur a écrit :

Je suis un newbie en CSS et PHP, rien que le menu déroulant à paramétrer m'a obligé à forcer ma nature de dessineux. Cela dit, lorsque l'on arrive à ses fins, on apprend à apprécier le code

lol
Tu t'en tires plutôt bien, à part ces sous-menus qui se déroulent sous la frise

Laurent Denis a écrit :


La plus évidente pour lui, plutôt, car elle lui est familière (il n'en serait pas l'auteur ? Ce sont des choses qui arrivent souvent ).

Les différentes frises sont de ma patte, elles ont pour vocation de situer les produits dans leur contexte (places de marché, campings, ports, etc...)

Laurent Denis a écrit :

La frise (ou plutôt les frises) n'ont absolument rien d'intuitif d'un point de vue extérieur. Leur qualité signalétique est très faible. leur graphisme n'attire pas vraiment l'oeil (ça fait un peu remplissage, pour tout dire) et rien n'incite à y promener sa souris.

Disons que ce serait un moindre mal, si la frise pouvait être plus explicite grâce à du texte. Mais un menu textuel restera le plus ergonomique et le plus visité. Partir sur le principe qu'il faut que les visiteurs "songent" à survoler quelque-chose est déjà une très mauvaise base. Il y a des codes visuels tacites sur le Web, qui font qu'un visiteur ne se pose pas de question et clique instinctivement sur un menu explicite...

lol
Tu t'en tires plutôt bien, à part ces sous-menus qui se déroulent sous la frise )

Si le menu est la meilleure solution pour la navigation, que préconises-tu par rapport au menu déroulant existant ?

Merci encore.

Je me permets d'intervenir, même si Laurent Denis semble bien plus expert que moi.

Au début, je n'avais pas cliqué sur les sous menus. La façon dont s'affiche le contenu m'a .. surpris.

je vais avancé deux points qui me semble important de changer.

Déjà, suivant la page et le thème, le frise n'est plus placé de la même manière par rapport au menu au dessus, mais également au ménu déroulant qui la suit. Il faudrait que tu trouve une unité de présentation, de taille et d'espacement.

Au début; je t'ai dit que je ne trouvais pas intuitif l'accès à ton menu déroulant. Il se perd en pied de page. Cela est vrai quand il n'y a rien en dessous.Au moment où on ouvre un sous lien, et que le contenu s'affiche en dessous, ce sous menu prend tout son sens ^^.

Mais arrive le second défaut, ton menu déroulant, par sa petite taille, se perd complétement par rapport à l'immensité du reste. On ne le voit plus comme un menu, mais comme un élément de ton titre image. (très joli graphiquement d'ailleurs). L'exemple le plus flagrant étant sur cette page :

http://www.urbaflux.com/pages/urbaflux_camping_cars.php?page=urbaflux_campiflux

Pour régler ce problème de disproportion, tu devrais adapter ton menu au reste de ton graphisme, c'est à dire gros et imposant (ce n'est pas un défaut hein, moi j'aime bien le style).

Pour résumer ma pensée :
- J'homogénéiserais les marges et les tailles des frises (qu'elles aient toutes les mêmes dimensions et marges)
- J'augmenterais considérablement la hauteur de les cellules de niveau 1de ton menu déroulant.
- et je mettrai toujours quelque chose sous ton menu déroulant. Une page de présentation par exemple, ou d'intro. (pas comme ça quoi : http://www.urbaflux.com/pages/urbaflux_esp_pub.php )

Bonne chance, en espérant ne pas avoir été trop confus dans mes explications.

Trigun> Tes remarques sont très judicieuses, un avis extérieur est précieux lorsqu'on est plus graphiste que programmeur et sans autres compétences en interne.

Si je n'avais pas opté pour une police plus grande, c'est simplement parce que ma feuille de style est commune à tous les menus (largeur de colonne, taille de police, couleur, etc...). Une police plus grande fait basculer les titres les plus longs sur deux lignes.
Je peux y remédier en dupliquer la feuille de style, en la renommant et en lui donnant un autre pramètre de largeur de colonne, pour que le titre tienne sur une ligne.

Quant aux frises, c'est vrai que les lignes d'horizon ne sont pas situées à la même hauteur.

Merci à toi

Pour info, voici la page modifiée (difficile de constater la différence si l'on n'a pas vu la première mouture ) :

http://www.urbaflux.com/pages/urbaflux_esp_pub.php

Merci à tous pour votre aide, Laurent et Trigun pour ne pas les nommer.

trigun a écrit :
Tout à fait d'accord, ce menu n'est pas un modèle d'accessibilité (et je ne pense pas l'avoir vendu tel quel ^^) mais j'aime beaucoup ça (<= EDIT : waw la faute !!) sa non utilisation du javascript.

Hmmm, désolé de remonter ce topic mais .... essaye de desactiver le javascript sur ton navigateur, et regarde si le menu marche encore ...

Attends je te donne la réponse : NON

:hover sur IE = Javascript, quoi qu'il arrive.