La recette pour un menu déroulant accessible - partie 1 écouter le billet : La recette pour un menu déroulant accessible - partie 1 - mp3 - nouvelle fenêtre

lundi 26 juin 2006 à 01:06 :: Accessibilité :: #28 :: rss

Chose promise, chose dûe, le résultat du sondage est sans appel, je vais donc m' y atteler.

Vous me permettrez cependant de découper la recette en morçeau et cela pour plusieurs raisons :

  • C'est une recette plutôt longue à cuisiner. A côté, la panse de brebis farcie c'est pour les rigolos.
  • Même si je suis fin cuisinier, un des ingrédients principaux de ce plat (Javascript) n'est pas ma spécialité, il me faut donc pour certains points le temps de tester afin de vous servir un plat que vous ne risquerez pas de régurgiter.
  • Cela vous permettra de digérer un peu entre les morçeaux et de me faire des remarques, des compliments ou de m'aider à rendre tout cela encore meilleur.

Avant tout chose, je tiens également à signaler que le travail que je vous livrerai ici correspond à une version améliorée d'un script en licence creative commons Attribution-ShareAlike réalisé à la base par Harmen Christophe de la société Eolas avec qui j'ai longuement échangé par mail afin d'aboutir à une version qui nous semble satisfaisante. Qu'il soit grandement remercié pour son aide et pour les explications qu'il a pu me fournir sur ses fonctions.

Des ingrédients de bases de qualité

Pour faire un bon menu déroulant il vous faut :

  • Le support de plusieurs niveaux de menus sans pour autant devoir remplir le menu de liens dont vous n'aurez pas besoin.
  • Un fonctionnement dans les navigateurs modernes et sur Internet Explorer 5 et plus.
  • La possibilité d'utiliser le clavier pour naviguer dans le menu (en tabulant du début vers la fin mais également de la fin vers le début) et également la possibilité de passer d'un élément de menu à l'autre sans avoir à parcourir tous les sous éléments intermédiaires.
  • Un menu dimensionné de façon relative pour éviter des problèmes de superposition.
  • Un laps de temps pour vos utilisateurs lorsqu'ils quittent un élément de menu avant de le faire disparaitre. Cela peut permettre aux personnes souffrant de tremblements d'utiliser plus facilement le menu.
  • Une possibilité de désactiver le système de menu déroulant pour toutes personnes qui auraient des difficultés à l'utiliser.
  • Aucune perte d'informations lorsque javascript est désactivé.
  • Aucune perte de lisibilité des menus lorsque les couleurs sont désactivées (voir le billet de Mathieu Faure à ce propos).

Du matériels performants

Une fois que vous avez les ingrédients, il vous faut de bons outils pour réussir votre recette :

Pour les pressés, allez donc voir le résultat final de cette partie 1, pour les autres voyons voir ce que donne le menu brut dans le gabarit

A ce stade, rien de particulier mais notons tout de même que :

  • Les sous menus (une publication et un logiciel) de l'item commander n'ont pas de lien html sur leur intitulé principale.
  • Le menu comporte bien plusieurs niveaux de sous menus (2).

Ajoutons lui tout de même un minimum de style par défaut pour qu'il soit cohérent avec le design de notre futur menu déroulant.

Voir ce que donne le menu stylé dans le gabarit

  • Cette présentation est donc ce que vous aurez lorsque javascript sera désactivé.
  • Le menu est bien défini en unité relative.

Masquer ces menus que je ne saurai voir

A présent nous allons, lorsque Javascript est activé, faire disparaitre les sous menus et mettre en place notre désactivateur de menu déroulant.

Nous allons ajouter, via javascript, une classe CSS "withjavascript" sur notre division menu par un appel de fonction (initMenus) en fin de document html. Avec ce système, il suffit donc de prévoir une déclaration dans notre feuille de style pour repositionner en absolu les sous menus en dehors de l'écran lorsque cette classe "withjavascript" est présente. Le désactivateur quant à lui, supprime ou ajoute la classe "withjavascript" en fonction de sa présence ou non.

(Merci Harmen pour les fonctions et Pawel Knapik pour domEL)

il ne me reste plus qu'a modifier ma css pour que les sous menu se masquent lorsque la class withjavascript est présente, pour cela je rajoute simplement

.withjavascript ul ul{
	position:absolute;
	top:-300em;
	width:0px;
	height:0px;
	overflow:hidden;
}

Voir le système de désactivation à l'oeuvre

et mon déroulant il est où?

Nous allons maintenant, mettre en place l'apparition et le masquage des sous menus ainsi que notre système de temporisation sur le masquage des menus.

Avant toute chose, nous allons placer une class submenu sur nos éléments de listes (li) contenant des sous menus. Cela se fait très simplement en modifiant légèrement notre fonction d'initialisation du menu.

function initMenus() {
   ...
   var leMenu=nMenu.getElementsByTagName('ul');
   for(var i=1;i<leMenu.length;i++){
   var liparent;
   liparent=leMenu[i].parentNode;
   addClassName(liparent,"submenu");
   }
   loadMenus();
}

Voici maintenant quelques explications fournit Harmen sur les fonctions javascript du menu.

L'objectif initial était de proposer un script qui soit indépendant du mode d'exploration du document. C'est à dire, qu'il prenne naturellement en charge la souris et le clavier. Mais sans limiter la navigation au clavier (ou assimilé) à une navigation de lien en lien.

Pour être plus clair que le client web (si il implémente le DOM comme il se doit) puisse explorer le menu comme il le souhaite. Par exemple, Opera propose une navigation au clavier de titre en titre avec la touche S (et W pour le sens inverse) et une autre navigation de bloc de texte en bloc de texte avec la touche D (et E pour le sens inverse). Il n'était donc pas envisageable d'implémenter un gestionnaire d'évènement à chacun des noeuds du menu.

Par contre, le DOM2-Events propose un système qui s'appelle la "capture d'évènement". Cela consiste à intercepter un évènement qui est destiné à un autre noeud placé en dessous dans l'arborescence. Il suffit - pour les clients qui implémentent le DOM 2-Event - de placer un seul gestionnaire sur la division menu pour intercepter tous les évènements du même type qui se déclenchent sur les noeuds enfants.

Plus précisement, la fonction "loadMenus" - utilise deux gestionnaires (eventLstMontrerMenu & eventLstCacherMenus) sur #menu pour prendre en charge six types d'évènements différents (3 types par gestionnaire) :

var nMenu = document.getElementById("menu");
if (nMenu.addEventListener) {
   nMenu.addEventListener("mouseover",eventLstMontrerMenu,true);
   nMenu.addEventListener("focus",eventLstMontrerMenu,true);
   nMenu.addEventListener("DOMFocusIn",eventLstMontrerMenu,true);
   nMenu.addEventListener("mouseout",eventLstCacherMenus,true);
   nMenu.addEventListener("blur",eventLstCacherMenus,true);
   nMenu.addEventListener("DOMFocusOut",eventLstCacherMenus,true);
} else {...}
 

c'est le troisième paramètre de addEventListener qui permet de dire si le gestionnaire doit être capturant (=>true dans notre cas) ou pas (=>false);

Sur les types d'évenements mouseover et mouseout, il n'y a rien a redire. Par contre - et selon les spécifications - les types "focus" et "blur" doivent normalement être réservés aux contrôles de formulaire. Les types "DOMFocusIn" et "DOMFocusOut" sont donc leur équivalent sur l'ensemble des noeuds.

Pour les clients qui ne supportent pas le DOM-events, un gestionnaire de manière plus classique a été mis en place sur chacun des sous menus (élément ayant la classe submenu) et sur chacun des liens qui compose ce sous menu.

   var nA;
   var lessubmenu = getElementsByClassName('submenu', '*', nMenu);
   for (var i=0; i<lessubmenu.length; i++) {
      addEventLst(lessubmenu[i],"mouseover",eventLstMontrerMenu);
      addEventLst(lessubmenu[i],"mouseout",eventLstCacherMenus);
      for (var j=0; nA = lessubmenu[i].getElementsByTagName("a")[j]; j++) {
         addEventLst(nA,"focus",eventLstMontrerMenu);
         addEventLst(nA,"blur",eventLstCacherMenus);
         }
      }

Cette relative indépendance par rapport à la structure du doc permet de ne pas rajouter systématiquement des liens sur les libellés des sections de menus (si l'on ne souhaite pas créer de page intermédiaire reprenant juste les sous-rubriques sans autres contenu).

Pour faciliter la navigation, on peut envisager de placer de véritables titres (h1-h6) ou tout autre élément que l'auteur souhaiterait.

Les gestionnaires eventLstMontrerMenu et eventLstCacherMenus récupèrent le noeud cible de l'évènement pour chacun des cas (la cible n'est pas forcement le noeud sur lequel a été enregistré le gestionnaire).

eventLstMontrerMenu ajoute une class css, à l'ensemble de la branche de menu correspondante à l'élément survolé ou focusé pour pouvoir le rendre visible et stylisable. Si l'élément a déjà la class sousmenu il ajoute la class encours sinon il ajoute la class focus.

Prise en charge du DOM-events :

if (evt && evt.target) {
   oNode = evt.target;

Prise en charge de l'implémentation à la MSIE :

} else if (window.event) {
   oNode = window.event.srcElement;

Enfin, le cas basic d'une gestion des évènements à la DOM-0 (la cible est = au noeud ou est enregistré le gestionnaire):

} else {
        oNode = this;
while (oNode.id!="menu") {
   if (hasClassName(oNode,"submenu")) {
      addClassName(oNode,"encourt");
   } else{
      addClassName(oNode,"focus");
   }
   oNode = oNode.parentNode;
}

Dans "eventLstCacherMenus" je récupère un relatedTarget (ou un toElement pour les implémentations à la MSIE) qui correspond au noeud relatif. Par exemple, sur un "mouseout" la cible (target) correspond au noeud qui produit le mouseout alors que le relatedTarget correspond au noeud sur lequel la souris rentre (qui va produire un mouseover).

Le script utilise alors cette information pour savoir si le noeud relatif fait parti de la section du menu ou pas. Le tout pour savoir comment fermer les menus (avec un timer ou pas) et supprimer les class ajoutées par la fonction d'affichage des menus.

function cacherMenus(oNode) {
   var nMenu = document.getElementById("menu");
   if (menu_timerID!=null) {
      clearInterval(menu_timerID);
      menu_timerID = null;
   }
   oNode = oNode?oNode:document.getElementById("menu");
   var lessubmenu = getElementsByClassName('submenu','*', nMenu);
   var lessubfocus = getElementsByClassName('focus','*', nMenu);
   for (var i=0; lessubmenu[i]; i++) {
      deleteClassName(lessubmenu[i],"encourt");
   }
   for (var j=0; lessubfocus[j]; j++) {
      deleteClassName(lessubfocus[j],"focus");
   }
}

Grâce à ces scripts, il ne reste plus qu'à adapter notre feuille de style pour gérer l'affichage et le masquage des menus

 
/* style des liens */
 
#menu li a, #menu li span {
	display:block;
	margin:0px 0px 0px 0px;
        padding:0.2em;
	text-decoration:none;
	color:#000;	
	background-color:#EEE;
}
 
#menu li a:hover, 
#menu li a:focus, 
#menu li span:hover, 
#menu li span:focus, 
#menu li.encourt a {
	color:#FFF;	
	background-color:#000;
}
 
 
#menu li li a, 
#menu li li span, 
#menu li.encourt li a{
	background-color:#FFF;
	color:#23388A;
	margin:0px 0px 1px 0px;	
}
 
#menu li li a:hover, 
#menu li li span:hover, 
#menu li li.encourt span, 
#menu li li.encourt a, 
#menu li li.focus a{
	background-color:#23388A;
	color:#FFF;
}
 
#menu li li li a, 
#menu li li li span, 
#menu li li.encourt li a{
	background-color:#FFF;
	color:#336699;	
}
 
#menu li li li a:hover, 
#menu li li li span:hover, 
#menu li li li a:hover, 
#menu li li.encourt li.focus a{
	background-color:#336699;
	color:#FFF;
}
 
/* Niveau 1, 2 et 3 masque */
 
.withjavascript .submenu ul,
.withjavascript .encourt .submenu ul,
.withjavascript .encourt .encourt .submenu ul{
	position:absolute;
	top:-300em;
	width:0px;
	height:0px;
	margin:0px;
}
 
/* Niveau 1, 2 et 3 affiche */
 
.withjavascript li.encourt{
	position:relative;
}
 
.withjavascript .encourt ul,
.withjavascript .encourt .encourt ul,
.withjavascript .encourt .encourt .encourt ul{
	top:1.5em;
	width: 12em;
	height:auto;
	z-index:50;
}
 
#header .withjavascript .encourt .encourt ul, 
#header .withjavascript .encourt .encourt .encourt ul{
	left: 12.5em;
	width: 14em;
	top:0em;
	padding-right:0.2em;	
}
 

Voir le système de menu déroulant à l'oeuvre

Nous avons désormais un menu qui contient quasiment tout nos ingredients. Reste à gérer les désactivations des couleurs et la possibilité de passer d' un élément de premier niveau à l'autre lors d'une navigation au clavier.

Gestion de la transparence si je désactive les couleurs

Pour corriger cela, concidérons que lorsque les navigateurs désactivent les couleurs, ils ne désactivent pas les images présentes dans le code source. Nous allons donc placer via javascript une image dans chaque élément de menu. Image qui, grâce au css sera positionnée en dessous de l'élément à activer. Enfin, avant de déclencher la fonction d'initialisation du menu nous allons rajouter un test pour voir si les images sont supportées par le navigateur. S'il ne les supporte pas, la version déroulée du menu sera donc affichée.

   var leMenu=nMenu.getElementsByTagName('ul');
   for(var i=1;i<leMenu.length;i++){
      var cLi;
      cLi=leMenu[i].getElementsByTagName("li");
      for (var j=0; cLi[j]; j++) {
         var refcLi = cLi[j].firstChild;
         nBackground = document.createElement("img");
         nBackground.src = "images/testImgActives.gif";
         nBackground.className = "itemBackground";
         nBackground.alt="";
         cLi[j].insertBefore(nBackground,refcLi);
      }
   }

On ajoute notre image de fond dans les éléments de listes (li) pour éviter la superposition dans la fonction loadMenus.

   var leMenu=nMenu.getElementsByTagName('ul');
   for(var i=1;i<leMenu.length;i++){
      var cLi;
      cLi=leMenu[i].getElementsByTagName("li");
      for (var j=0; cLi[j]; j++) {
         cLi[j].removeChild(cLi[j].firstChild);
      }    
   }

On supprime l'image lorsque le menu est désactivé grâce à la fonction unloadMenus.

    var imgLoaded = new Image();
    var tmp = new Date();
    var suffix = tmp.getTime();
    imgLoaded.src = "images/testImgActives.gif?"+suffix;
    imgLoaded.onload = initMenus;

Dans notre page, nous effectuons notre test de support des images. Si les images sont supportées, nous lançons la fonction d'initialisation du menu.

Enfin, nous stylisons les images pour qu'elles viennent en fond de chaque élément de menu.

.itemBackground {
	position: absolute;
	width /**/: 98%;
	height /**/: 99%;
	z-index: -1;
	display: block;
}

Et voilà le résultat

Nous avons désormais un menu qui ne perd pas sa transparence même en cas de désactivation des couleurs. De nombreux hacks css sont utilisés pour permettre un affichage correct sous Internet Explorer. Ils sont pour l'instant regroupés dans la feuille de style mais pourraient (devrait) être dans une feuille séparée et appelée en utilisant les commentaires conditionnels.

En l'état, le menu fonctionne sur IE 5 et supérieur, Firefox et Opera. Quelques bugs d'affichages subsistent sur Safari et Konqueror mais ils sont dû au css et non au javascript lui même.

Et maintenant ?

Il nous reste à voir dans la deuxième partie de cette article, la mise en place de liens facilitant la navigation au clavier pour passer d'un élément de premier niveau à l'autre. En attendant, les commentaires sont les bienvenus.

Trackbacks

Aucun trackback.

Les trackbacks pour ce billet sont fermés.

Commentaires

1. Le lundi 26 juin 2006 à 08:40, par Vinch

Pourquoi ne pas utiliser la méthode 100% CSS (décrite par Eric Meyer un de ses livres : more.ericmeyeroncss.com/p... pour faire les menus déroulants ?
Cette méthode à l'avantage de ne pas utiliser JavaScript, ce qui est, quand on parle d'accessibilité, un avantage non négligeable.
Qu'en pensez vous?

2. Le lundi 26 juin 2006 à 14:02, par Laurent Denis

Lorsque Mathieu et toi-même parlez de superposition en cas de désactivation des couleurs, je suppose que vous pensez au résultat dans FF ?

C'est en partie un faux problème (même si les utilisateurs de FF en souffre réellement) : c'est une implémentation erronée dans ce navigateur qui en est reponsable. Pas le mécanisme de superposition de boîte CSS lui-même.

En effet, "Ignorer les couleurs spécifiées dans les pages Web" (option IE) ou ne pas "Permettre aux pages de choisir leurs propres couleurs..." (option FF) consiste, à appliquer une CSS user dotée des priorités suffisantes. Par exemple:
* {
color: WindowText !important;
background-color: Window !important;
}

Ici, on reprend les couleurs de l'user Interface, mais on peut très bien utiliser des couleurs différentes.

IE le fait fort bien (sans css user) avec son option "Ignorer les couleurs...". Opera le fait sans problème avec une css user, Safari aussi.

Mais FF ne le fait pas. Au lieu de cela, il ramène la propriété "background" des différentes boîtes à la valeur CSS par défaut "transparent", et donne au canevas seul la couleur de background de la préférence utilisateur. Ce qui n'a aucun sens : les superpositions illisibles sont inévitables.

Cette implémentation est d'autant plus absurde que FF saurait très bien le faire correctement : les utilisateur de FF qui en ont le besoin peuvent en effet contourner le problème via n'importe quelle extension permettant d'appliquer une CSS user du type de celle ci-dessus (la web developper entre autres).

Ah... ce sera peut-être corrigé un jour ;)

Réponse de aurélien levy le lundi 26 juin 2006 à 17:56

Réponse à Vinch : en pure css tu fais comment dans IE ?

Réponse à Laurent : je suis tout à fait d'accord, j'ai cherché la solution la plus "tout terrain" possible (pour info : IE5.5 fait la même chose que firefox).

3. Le mardi 27 juin 2006 à 08:51, par Vinch

Et bien il existe une méthode pour simuler le :hover sur n'importe quel élément (pas seulement sur les liens comme c'est actuellement le cas dans IE) grâce à un fichier csshover.htc qu'il suffit d'appeller dans son fichier CSS. Plus d'informations ici : www.fredcavazza.net/index...

Réponse de aurélien levy le mardi 27 juin 2006 à 09:38

je connais également mais cela reste néanmoins moins compatible avec les ancienne version de IE et en l'état le menu d'eric meyer ne fonctionne pas non plus au clavier

Si tu arrives avec le menu d'Eric Meyer à répondre à tous les ingredients que je donne en début d'article et que cela fonctionne avec IE 5 et plus + navigateurs modernes nous serons tous preneurs je pense.

4. Le mardi 27 juin 2006 à 10:04, par Harmen Christophe

@Vinch : AMHA, les menus purs CSS ne sont pas accessibles pour la simple et bonne raison que les CSS n'ont pas vocation à gérer l’interactivité avec l’utilisateur mais seulement à « ajouter du style aux documents structurés ». Quelque soit les sélecteurs disponibles, ils ne suffisent pas (et ne suffiront jamais) à gérer l’ensemble des interactions que ces objets peuvent engendrer. La grammaire CSS impose de définir avec précision les différents inputs. Hors la mise en œuvre de contenu accessible exige de ne pas faire trop de suppositions sur les modes d’explorations qui sont aussi nombreux que d’UA et/ou d’utilisateurs.
CSS ne permet pas d’avoir une indépendance par rapport au mode d’exploration de la structure. Il nécessite de faire des suppositions sur les éléments activés par l’utilisateur (liens, titres, etc…) Si un UA propose un mode non pris en charge par l’auteur ou par les CSS, on se retrouve dans une impasse. Par exemple, comment répondre via CSS à une navigation de bloc de texte en bloc de texte (comme le propose Opera)? De là à dire que - dans le cadre du HTML - seul javascript couplé au DOM peut nous offrir un axe d’expérimentation vers des structures accessibles (en ne considérant que la technique) il n’y a qu’un pas que je franchis ouvertement et sans remord.

À propos du comportement que les UA devraient adopter sur la désactivation des couleurs, ça fait pas mal de temps que je tente de savoir s’il y a une normalisation à ce sujet. J’ai tenté de trouver des infos dans les UAAG, mais mes recherches sont restées vaines. Quelqu’un à t-il eu plus de chance ?

5. Le mardi 4 juillet 2006 à 19:57, par Monique

Bonjour,

Intrigant ces navigateurs qui ne désactivent pas les couleurs de la même façon.
Dans les "Recommandation des directives pour l'accessibilité des agents utilisateurs (UAAG) 1.0 du W3C en version française" (en français, désolée, j'ai trop de mal avec l'anglais), voilà ce que j'ai trouvé... c'est à dire rien de vraiment très clair !

www.yoyodesign.org/doc/w3...
Quand il est configuré pour ne pas restituer les images d'arrière-plan, l'agent utilisateur n'est pas obligé de les rechercher tant que l'utilisateur ne les requiert pas explicitement. Quand les images d'arrière-plan ne sont pas restituées, les agents utilisateurs devraient restituer une couleur d'arrière-plan unie à la place ;

www.yoyodesign.org/doc/w3...
S'assurer que l'utilisateur puisse sélectionner des styles préférés (par exemple, les couleurs, la taille du texte restitué et les caractéristiques de la synthèse vocale) à partir des choix offerts par l'agent utilisateur. Permettre à l'utilisateur de surclasser [ndt. override] les styles spécifiés par l'auteur et les styles par défaut de l'agent utilisateur.

- Permettre une configuration globale des couleurs de premier plan et d'arrière-plan de tout le contenu textuel restitué visuellement ;
- Comme partie de la satisfaction de la clause numéro un de ce point de contrôle, fournir une option de configuration pour surclasser les couleurs de premier plan et d'arrière-plan spécifiés par l'auteur ou celles par défaut de l'agent utilisateur ;

www.yoyodesign.org/doc/w3...
Pour les agents utilisateurs graphiques, fournir un accès aux informations suivantes concernant chaque morceau de texte restitué : la famille de polices, la taille de police, et les couleurs de premier plan et d'arrière-plan ;


Par curiosité, avec Firefox et "Editer les CSS", j'ai essayé en désactivant progressivement les déclarations color et background-color.
Je peux tout désactiver sans provoquer de transparence sauf ceci
#menu li li a, #menu li li span, #menu li.encourt li a{
/*background-color:#FFF;*/
color:#23388A;
margin:0px 0px 1px 0px;
}

Quand on désactive les couleurs via le navigateur, cette déclaration serait désactivée aussi avec Firefox et pas avec IE ?

Amicalement,
Monique

Réponse de aurélien levy le mardi 4 juillet 2006 à 21:55

oui pour IE 6 c'est tout à fait cela, mais pas pour IE 5.5, ni pour IE mac

6. Le mercredi 12 juillet 2006 à 22:46, par Matthieu Faure

Très joli travail ! On sent qu'il y a eu du boulot abattu derrière ce menu !

Je finis de lui faire subir ma batterie de tests et je trackback :)

7. Le jeudi 13 juillet 2006 à 04:24, par Astaldo

Quelques bugs sous mozilla dans l'état actuel.
1) Le menu produit un clignotement désagréable à chaque changement d'item. Pratiquement agressant.
2) Certaines séparations entre les sous items (par exemple travaux et productions) sont parfois absentes
3) Au chargement, les items du menu ont une largeur de ~ 12em. Et ne prennent la largeur par défaut qu'une fois un premier item survolé.

Quelques amméliorations possibles :
1) J'ai trouvé la ligne pour le lien de désactivation contraignante, ça oblige à bidouiller le script le lien ailleurs. (en même temps, l'article ne s'adresse pas vraiment à des débuttants)
2) Et pour terminer, dans un objectif académique, le code javascript mériterait d'être commenté. Certains morceaux sont vraiment ardus. :)

Ceci étant dit, c'est très sympa et complet.

Réponse de aurélien levy le jeudi 13 juillet 2006 à 09:14

Merci de tes retours, quelle version de mozilla et quel système d'exploitation?

  • 1) Pour le clignotement, personnellement j'ai parfois ce problème aussi sur certains sites mais c'est dût au extension que j'ai installé et non aux sites en question car cela m'arrive même sur des liens normaux.
  • 2) bug CSS pas bug du script de menu en lui même
  • 3) idem, j'ai rencontré la même chose sur safari mais pas encore trouvé d'où cela venait dans le CSS

Pour les améliorations :

  • 1) Je n'ai pas bien compris ce que tu trouvais contraignant.
  • 2) Oui pour la partie 2 à venir j'essayerais d'en rajouter

8. Le lundi 17 juillet 2006 à 17:38, par Reynald Jégo

Très intéressant.

Juste pour augmenter la lisibilité du menu, un indicateur d'item arborescent ou pas serait le bienvenu. Il semble en effet intéressant de pouvoir remarquer qu'on est sur une une feuille ou pas autrement que par la présence d'un lien. On pourrait d'ailleurs imaginer un lien sur un élément qui n'est pas une feuille.

9. Le mercredi 19 juillet 2006 à 15:18, par Enseignement

Hello,

Je viens de tomber sur cet excellent travail. Quelques petites questions :
- quand peut-on prévoir une version 2 ? Quelles en seront ses fonctionnalités, ses avancées ?
- la version peut-elle être utilisée en production, la partie 2 ne bougera pas, je suppose au bagarit xhtml mis en place ?

Merci pour cet excellent travail déjà.
Nizouille

Réponse de aurélien levy le mercredi 19 juillet 2006 à 23:16

La version 2 avec ajout de raccourci pour naviguer au clavier d'élément de menu à l'autre devrait arriver ce week end

Non aucun changement de structure au niveau de la version 2

10. Le mercredi 19 juillet 2006 à 22:29, par Enseignement

Sans vouloir faire mon rabat-joie, la dernière version d'Opera 9 fait foirer complètement le menu ... :(

Réponse de aurélien levy le mercredi 19 juillet 2006 à 23:23

Ah Opéra et ses changements de versions la joie du débuggeur javascript, je regarderai cela dès que possible

EDIT:

c'est bon c'est corrigé

11. Le mercredi 19 juillet 2006 à 22:45, par Marie-Noire

Autre rapport de bug :
la page ne passe pas la rampe de la validation, les li ne sont pas fermés ..

Réponse de aurélien levy le mercredi 19 juillet 2006 à 23:16

oups, corrigé merci

12. Le lundi 28 août 2006 à 18:15, par seb

Salut,

Je ne sais pas si c'est toujours d'actualité, mais l'ajout dans la feuille de style de la déclaration suivante:

.withjavascript ul { width: inherit; }

juste après le commentaire /* Niveau 1, 2 et 3 masqué */ semble résoudre le problème d'initialisation des largeurs sous firefox.
Je ne pense pas que ça pose d'autres problèmes pour les autres navigateurs (à vérifier ..)

merci pour ce super boulot

13. Le vendredi 6 octobre 2006 à 09:02, par Lionel

Bonjour,

Bon travail mais un petit soucis sous IE :
le changement d couleur de fond lors d'un survol est très long par rapport à firefox

14. Le mercredi 20 décembre 2006 à 17:20, par Eldebaran

Bonjour,

Très intéressant, mais un détail m'échappe : dans le cas d'un navigateur supportant les gestionnaires d'événements DOM2, pourquoi utiliser les types d'événements "focus" et "blur" sur le menu alors qu'ils ne "bouillonneront" (pour reprendre votre traduction :-)) de toute façon pas ?

15. Le jeudi 28 décembre 2006 à 07:19, par Harmen CHRISTOPHE

@Eldebaran : Il y a deux éléments de réponse à votre question : L’implémentation des types focus / blur et une précision sur la gestion des événements mis en œuvre (la capture et non le bouillonnement)

Pour ce qui est des types, la réponse est simple il s’agit uniquement d’un problème de compatibilité entre les différents agents utilisateurs. Tous les clients n’implémentent pas les DOMFocusIn et DOMFocusOut (préférant le focus / blur même sur les nœuds différents des contrôles des formulaires).

En ce qui concerne le fait que les types focus et blur ne bouillonnent pas n’a aucune espèce d’importance dans notre cas (à aucun moment le mot bouillonnement n’est employé ici). En effet, les gestionnaires mis en œuvre repose sur la phase de capture et non celle du bouillonnement.

Dans le DOM chaque événement est - au mieux - découpé en deux phases :

* la capture qui correspond à la propagation de l’événement de la racine du document vers la cible (le target). Les nœuds intermédiaires peuvent alors implémenter un gestionnaire dit capturant. Ce type de gestionnaire est mi en place en passant le booléen true comme troisième paramètre de la méthode addEventListener.

* le bouillonnement qui correspond - quant le type d’événement le permet - à la propagation de la cible vers la racine. Dans ce cas un même nœud peut implémenter également un gestionnaire qui est différent de celui capturant.

Pour résumer, un même nœud peut avoir - pour un même type d’événement - deux gestionnaires différents l’un capturant l’autre non. C’est le troisième paramètre (un booléen) de addEventListener qui permet de les différentier.

Pour la description formelle :
www.yoyodesign.org/doc/w3...

16. Le vendredi 5 janvier 2007 à 15:24, par Eldebaran

@Harmen CHRISTOPHE : Merci pour votre réponse.

Mea culpa, je n'avais en effet pas vu que l'on était en mode capturant.

17. Le dimanche 28 septembre 2008 à 23:05, par Filc

Désolé, mais j'ai rien compris. Mal expliqué.

Ajouter un commentaire

Les commentaires pour ce billet sont fermés.

Calendrier

« juin 2006 »
lunmarmerjeuvensamdim
1234
567891011
12131415161718
19202122232425
2627282930

Catégories

Sondage

Lequel des ces tutoriaux préféreriez vous voir traiter en priorité ?

Syndication

Archives

Il y a 105 billets publies sur ce blog, alors n'hésitez pas à fouiner

Liens