Menu déroulant plus accessible au clavier grâce à onfocus et onblur

Bonjour,

J'ai récemment adapté un menu css/javascript de type "suckerfish" http://alistapart.com/articles/dropdowns/.

J'ai deux problèmes interdépendants....

Le premier est que je veux utiliser onfocus et onblur pour garantir également l'accès au clavier, dans un fichier js lié afin de ne pas les utiliser directement dans le code html. Je sais que depuis il y a eu des versions améliorées avec accès au clavier : http://carroll.org.uk/sandbox/suckerfish/bones2.html. Mais ça m'ennuie de les utiliser parce que sous IE sans javascript, le menu marche pas... Ce qui m'amène au second problème : je veux qe tous mes sous-menus soient déployés comme ceci lorsque js est désactivé, pour être sûre qu'il y a encore la possibilité d'accès aux contenus et de navigation au clavier :



Or, le code du nouveau menu suckerfish accessible au clavier ne permet pas cet effet qd js est désactivé : il s'entête à vouloir continuer sur le modèle "déroulant".

Donc, je souhaite avoir de l'aide pour adapter le code qui suit, pour :
(1) permettre l'accès clavier grâce à onblur/onfocus, grâce à du js non intrusif
(2) prévoir un déploiement de tous les menus/sous-menus visibles lorsque js est désactivé.

Actuellement, les fragments de code css, js et html qui suivent permettent un menu déroulant uniquement au contact de la souris, et pour ie, le js doit être activé:


http://pages.usherbrooke.ca/eviau/menuprob/in.html

Merci à l'avance
Modifié par nalita33 (26 Jun 2007 - 08:04)

Un petit ajout...

Le mieux, ce n'est pas de passer par onfocus et onblur car les onmachinchose ne peuvent être multipliés sur un même élément. La gestion des événements type DOM2 (focus, blur) est préférable (mais plus complexe) pour conserver cette possibilité.

Nota : Les prochains menus d'Alsacréations reposeront là-dessus d'ailleurs.

J'ai tenté de prendre les choses en main une à la fois... à commencer par le voilement par défaut des sous-menus si js est activé.

J'ai désigné dans mon css que mes sous-menus sont déployés par défaut (sans js)...

 
#nav li ul {display: block;
	border-bottom: 0px; 
	position: absolute;
	left:0px;}

J'ai fait une class .avecjs (dans #nav li.avecjs ul) qui masque le sous-menu par défaut si js est activé.

 
#nav li.avecjs ul { width: 12em;
	position: absolute;
	padding:0px;
	left:-999em;}

Je l'attribue dynamiquement avec js, de sorte que les sous-menus soient voilés par défaut si js est activé :

// menu déroulant au contact de la souris

MenuSouris = function()
{
  if (document.all&&document.getElementById)
  {
    RacineMenu = document.getElementById("navlist");
    if (RacineMenu) {
      for (i=0; i<RacineMenu.childNodes.length; i++)
	  {
        node = RacineMenu.childNodes[i];
        if (node.nodeName=="LI")
		{
	  
	  node.className = " avecjs";
	  node.onmouseover=function() { this.className+= " over"; }
          node.onmouseout=function() { this.className=this.className.replace(" over", ""); }
       
		}
	  }
	}
  }
}


window.onload=MenuSouris;

Tout fonctionne comme des roulettes dans Internet Explorer, mais pas dans firefox... Que faire? Merci d'avance. [/i]

Merci Koala64 pour les explications...

J'ai cherché pendant trois semaines un script qui correspondait à mes attentes (en ordre de priorité, quoique tout soit important à mes yeux!) :


- L'utilisation d'éléments de listes (<ul><li>...) et des css pour le rendu d'affichage du menu (l'apparence)
- L'utilisation d'un js non intrusif, géré dans un fichier à part
- Un menu horizontal tout déployé si js est désactivé
- Un menu navigable au clavier
- Un menu qui ne scintille pas comme celui de Fairytells
- (ET si possible), un menu qui présente un délai avant l'enroulement du menu, pour ceux et celles qui maîtrisent moins leurs mouvements.

L'ensemble de mes critères visait à faciliter la mise à jour des menus (néophytes ou non) et à le rendre plus accessible.

Je suis heureuse de savoir qu'un futur menu d'Alsa répondra en tout ou en grande partie à ces attentes!! Après autant de recherche, je capitule! Je me doutais que mes attentes n'étaient pas aussi farfelues, mais bon, ma force est en (x)html/css, malheureusement pas en js. D'où mes difficultés d'implanter les comportements que j'avais en tête.

Je crois que je vais attendre patiemment l'issue de ton tutoriel... Pour information (sans pression ) , sera-il offert au cours des prochaines semaines?

a écrit :
Y'a-t-il une liste ? Je ne la connais pas ; ça m'intéresse.

En fait, j'ai dû mal m'exprimer... Il y a en effet un nombre d'éléments à corriger qui ont été répertoriés via les posts de rétroaction dans Fairytells.
Après avoir effectué des tests, j'ai compilé (ma liste perso) un certain nombre d'éléments plus "désagréables" :

- Clignottement du menu au survol de la souris dans Mozilla/FireFox versions plus anciennes
- Décalement des contours des sous-menus (espaces irréguliers)
- Code js comprenant à la fois la gestion du menu et du "canevas accessible" : difficile pour un débutant en js d'isoler le menu du reste des comportements...

Le clignottement m'appaissait le plus critique (même si réglé dans des versions plus récentes de firefox), et je n'étais pas prête à sacrifier le confort des usagers de la souris pour implanter une navigation clavier. (Problèmes de lisibilité, épilepsie, etc.). Comme je l'ai dis auparavant, je trouve le menu de fairytells très bien. Seulement,dans mon cas, il réponds moins à mes besoins...
Modifié par nalita33 (27 Jun 2007 - 16:57)