Menu déroulant horizontal, une technique simple ?

S'lut à tous ,

D'après un design créé pour mon blog avec un menu horizontal, je dois réaliser ledit menu déroulant. Pour des raisons d'accessibilité, je me suis reposé sur la technique donnée sur le blog d'Alsacreations, cependant je la trouve lourde (vous devriez voir la tronche de mon CSS, devenu horrible suite à cette méthode), inaccessible avec IE (le menu se referme dès que la souris n'est plus sur le <a>), et pas vraiment adaptée.

Vous pouvez retrouver le design actuel en cours de codage à cette adresse : http://www.foxtwo.info/fichiers/tmp/designs/foxtwo_black/

Auriez-vous dans un recoin de votre disque dur une astuce pour réaliser un beau menu déroulant simple ?


Je vous remercie d'avance.

PS : Si vous me le permettez, j'aimerais poser 2-3 questions d'accessibilité une fois mon problème résolu. Avec mon affection .

Bonjour,

Diti a écrit :
Menu déroulant, une technique simple ?

Non, pas de technique simple pour les menus déroulants.

Diti a écrit :
Pour des raisons d'accessibilité

Le menu déroulant accessible, c'est comme l'eldorado : ça n'existe pas.

Une des tentatives les plus proches est celui proposé sur Fairy Tells :
http://www.fairytells.net/index.php/2006/06/26/28-menu-deroulant-et-accessibilite-partie-1
(Mais 1. ça n'est pas parfait et 2. c'est lourd à mettre en place...)

Diti a écrit :
cependant je la trouve lourde

Ce tutoriel est un mourant en phase terminale, effectivement.

Diti a écrit :
Auriez-vous dans un recoin de votre disque dur une astuce pour réaliser un beau menu déroulant simple ?

Non... ça ne pourra pas prendre la forme d'une « astuce », d'ailleurs, ça ne peut qu'être plus compliqué. Par contre, j'ai dans mes marque-pages une astuce pour choisir de ne pas utiliser de menu déroulant : article - L'accessibilité des menus de navigation en cascade.

Voir aussi sur le forum : Accessibilité menu déroulant.


Plus globalement, on peut rappeler :
- qu'un menu déroulant non fonctionnel au clavier mais dont les titres de rubrique sont des liens vers une page de rubrique permettant d'accéder aux pages ou articles ou sous-rubriques... c'est déjà limiter la casse ;
- que bien souvent il n'est pas nécessaire d'utiliser un menu déroulant, et que la réflexion sur « comment puis-je organiser la navigation pour rendre l'information claire et facilement accessible sans système compliqué comme un menu déroulant » est généralement bénéfique pour l'ergonomie d'un site.

Merci de ta réponse .

Mais si on suit ce que disent les quelques sujets que j'ai eu l'occasion de lire à ce propos, cela est lourd et déconseillé, d'accord. Mais que prévoir pour palier au codage de ce design ? Où mettre le menu, en somme ?
(http://www.foxtwo.info/fichiers/tmp/designs/foxtwo.jpg)

Ma seconde question concerne à la fois le « menu fixe » placé en bas à droite de la page (#menubasdroite) et le titre de mon futur blog (#fox-two).

&#9899; Le menu est en fait une liste non ordonnée avec un intitulé vide. Qu'en est-il de l'accessibilité et de l'aspect sémantique d'un tel machin ?
&#9899; Ma question sur le titre de mon blog concerne également l'intitulé des liens du « menu fixe » : dois-je en mettre ? Comment remplacer efficacement l'image (j'ai mis le texte Fox Two en 1px ou moins pour cela...) ?


Merci .
Modifié par Diti (31 May 2007 - 21:49)

bonjour

je me permet de te repondre car tu as eu une critique favorable sur un menu deroulant basé sur le javascript et le dom .

L'idée (du menu horizontal) est de le faire en partant des regles css et en faisant usage du :hover. IE7 comprend cette regle aussi.
Pour le passage d'un lien a l'autre avec la touche tab , rendre le lien visible est assez deroutant dans cette configuration , il apparait bien , mais seul et au milieu de nulle part , pas forcement bien reperable.

Reste IE6 et inferieur auquel on peut ajouté cette gestion par l'attribution d'une class supplementaire ou non au passage de la souris a l'aide d'un javascript(dom) qui se charge alors de reecrire html et css . On sert ce js au travers des commentaires conditionnels.

voici donc l'essai de menu horizontal deroulant :
http://gcyrillus.free.fr/essai/menu_deroulant.html

experimental pour la navigation en tabulation.

gc

hop ! bookmarké

pas mal ce que tu viens de faire gcyrillus. J'aime bien l'idée.

C'est vrai que c'est un peu déroutant au niveau de la navigation clavier mais un menu css qui la prenait compte, c'est vraiment rare.

L'avantage de ta méthode est de pas mal simplifier le code JS à ajouter / en développant l'idée, on peut envisager une alternative.
Quoiqu'il en soit, pour le moment, il manque encore des choses et tout ne sera jamais résolvable par le seul biais de css car ...

bug (superposition des écritures) à la désactivation des images sous Fx ou IE5 dû au positionnement absolu des listes, ce qui là, ne peut se régler via CSS... enfin si mais en détériorant le XHTML... A moins bien sûr d'oublier le positionnement absolu...
Je pense que le mieux est encore de passer par JS comme sur Fairytells vu que c'est bien un bug et non une généralité. Ce serait peut-être envisageable avec un :before ou :after mais vu la prise en charge... bof bof (pas sûr que ce soit possible en plus)

Pas de temporisation... risque de fermeture inopinée lors de mouvement brusques d'où difficulté de prise en main.

Par ailleurs, sous IE6, la navigation clavier est encore défaillante.

Le couperet : Un menu déroulant ne facilite pas la mémorisation de l'arborescence. -> valable pour tout menu déroulant en js, css, kiwi, etc...

Je n'ai pas d'autres navigateurs sous la main mais c'est sympa de montrer cet essai. Merci.

merci de la critique qui me flatte beaucoup ... et qui me dit que je suit bien les conseils prodigés ici .

je vient de tester dans opera et pas de navigation sur les liens avec la touche "tab" d'ailleurs cela semble generale .

Pour le bug de IE et ff sur le comportement tab et hover , une erreur de ma part dans le css , je ciblais un ul:hover au lieu du li:hover de reference (mon etourderie me joue encore un tour).

essai mis a jour , ça bug un peu moins

gc

Resalut,

Après quelques recherches de design, j'ai trouvé une technique qui me plaît bien, à savoir mettre le menu en bas : http://www.styleshout.com/templates/preview/EliteCircle1-0/index.html

Cependant j'ai toujours une question sans réponse. J'ai deux codes « bizarres » mais dont je n'ai pas trouvé d'alternatives :

#fox-two {
	background: url(img/fox-two.png); width: 361px; height: 75px;
	position: absolute; top: 56px; left: 12%;
	font: 0.05px serif; /* Ce texte —que j'aimerais voir remplacé par une image— sera cliquable, redant alors la navigation avec TAB problématique... */
}

Rendu (le texte est sélectionné en orange) :
http://img.nam0.com/images/big/1180875209.jpeg

<li><a id="go-home" href="http://www.foxtwo.info/" title="Accueil"> </a></li>
<li><a id="go-texte" href="#texte" title="Retourner au début du texte"> </a></li>

<li><a id="go-basdepage" href="#basdepage" title="Voir le bas de page (pourquoi pas)"> </a></li>
<li><a id="atom" href="http://www.foxtwo.info/journal/atom.php" title="Flux Atom"> </a></li>
<li><a id="contact" href="mailto:postmaster@foxtwo.info" title="Contact"> </a></li>
<!-- Ici, on a des intitulés de lien invisibles en cas de désactivation des images, générées par CSS et désactivées sous IE avec un commentaire condtitionnel. -->

Rendu :
http://img.nam0.com/images/big/1180875383.jpeg

SI vous pouviez m'aider à rendre ce code accessible, je vous en serait reconnaissant.

Merci

Accessibilité: utiliser des images HTML, dotées d'attributs alt, et supprimer ces fichus liens vides et textes masqués supposés remplacer les machins quand le truc n'est pas bidulé, qui sont une utilisation impropre et non accessible de CSS.
Modifié par Laurent Denis (03 Jun 2007 - 14:42)