11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à toutes et tous

Je suis intéressé par le menu de ce tutos : http://www.alsacreations.com/articles/modelesmenus/hd2.htm

Lorsque je désactive le javascript, sur le tuto, je ne vois que les sous-menus relatifs aux menus 3 et 4, pas ceux relatifs aux menus 1 et 2. Pourtant je ne vois pas de différence dans le code ???

Merci d'avance de bien vouloir m'éclairer sur ce point.
Modifié le 17 Jan 2005 - 12:37
Administrateur
C'est parce que tout est affiché, dans l'ordre d'apparition dans le code.
Donc le sous menu 1, puis le sous menu 2 par dessus, puis etc.

Bref chacun cache en partie les sous menus précédents.

Ce n'est effectivement pas une bonne solution pour l'accessibilité Smiley decu ... à moins de trouver autre chose qu'une position absolue au même endroit pour chaque sous menu.
Ok ! merci Raphaël,

La position absolute ne me convient pas... Donc, si je place l'ensemble en position relative, par exemple, tous les sous-menus s'afficheront dans le flux de la page au lieu de se chevaucher...

Je vais essayer, je te tiens au courant ici
Modifié le 17 Jan 2005 - 13:44
Bon,

Je me suis penché sur le code.... et j'suis tombé !! hi hi ! une fois la position absolute retirée, l'ensemble est ingérable en css.

Je vais peut être dire une énormité, mais je pense que ce serait peut être réalisable si on pouvait positionner les éléments avec javascript, ainsi, lorsque que javascript est désactivé, l'ensemble suivrait le flux html et ne se superposerait pas. Le problème est que je ne connais pas javascript.

Comme chaque sous menu fait (dans l'exemple) 400 px de large, il suffirait de mettre une marge négative proportionnelle pour chaque sous menu.

Sinon, voici ce que je voulais faire, mais si on n'a pas la solution avec ce menu, j'irais poster dans le forum débutants... Pour avoir des idées.

En fait j'ai un sommaire principal de 5 rubriques et dessous, environ 600 articles réparties dans environ 190 sous rubriques. Ce qui devient assez lourd pour trouver l'info que l'internaute cherche. L'idée était d'utiliser ce menu afin d'obtenir un second rang de liens, ce qui ferait 25 nouvelles entrées pour le site.

En attendant, je vais regarder si je trouve une solution dans les autres menus.
Une solution plus simple, peut être, et prenant en compte l'accesibilité serait de complemetement masquer les sous menu quand javascript est désactivé.

Et puisque les entrées principales du menu réagissent comme des liens elles devraient conduire chacune à une page contenant les liens équivalent aux les sous-menus.

Ainsi le sous menu servirait de raccourci pour la navigation, pour les personnes avec javascript. Les entrées principales conduiraient quelques part (comme on peut le supposer). Le menu resterait accessible au navigateurs sans JS, mode texte, etc...

Suis je assez accessible dans mes propos? Smiley lol
Modifié le 27 Jan 2005 - 16:50
Salut,

Je pense qu'il serait plutôt souhaitable de mettre le menu dans un état totalement accessible au départ (menus et sous-menus déployés, sans JavaScript), et déclencher au chargement de la page un JavaScript appliquant les css appropriés pour le menu version montre-cache.
Je ne vois pas pourquoi une personne ayant JavaScript désactivé devrait recharger la page alors qu'une personne avec n'aurait pas à le faire, surtout qu'en l'occurence ce n'est pas une obligation.
Bonjour,

Marvin à abolument raison et ce raisonnement se généralise à tout événement javascript.

Il faut concevoir ton script comme une fonctionnalité ajoutée et non comme une nécessité.

Dans le cas d'un menu, il doit être implémenté par défaut déroulé à sa place naturelle, puis tu dois le replier par une routine javscript au chargement de la page.

Si ça n'est pas possible, notamment pour des raisons de gestion de la structure, l'absence des liens gérés par javascript ne doit pas être génante à la navigation et tu peux utiliser la solution de jb_gfx.

Attention toutefois de ne peut te retrouver obligé de compliquer inutilement la structure et d'éviter les redondances.

Le plus sage est quand même de considérer que si tu ne parviens pas à trouver une place pour dégrader ton menu de manière satisfaisante il vaut mieux retourner à la table à dessin, c'est très souvent le signe que les fondations de ton site pose problème.

Dernier conseil qui va de pair avec cette manière de faire : ton script de gestion de menu doit implémenter les events sur les éléments de menu au chargement de la page au travers du DOM et tu dois t'assurer du support des méthodes que tu utilise en les testant avant de lancer ton script.
Généralement un test sur un élement comme getElementById ou une méthode de l'objet Node (test plus sécurisant) suffit pour t'assurer de la version de javscript et du DOM présent chez le client.

Le résultat c'est que ton menu s'affiche déplié par défaut, qu'au chargement de la page la version de javascript et le support du DOM ou des méthodes critiques sont testés et que sous ces conditions une routine équipe les éléments des events (souris mais aussi clavier) nécessaires et replie le menu.

De cette manière, tu t'assures de ne pas poser de problème en cas d'absence ou de support partiel de javascript.

Ce n'est pas compliqué à faire mais ça demande un travail de conception généralement plus élaboré que les onmouse-machinchose et donc, il faut que ça en vailles le coup Smiley cligne
Modifié le 27 Jan 2005 - 23:47
Marvin Le Rouge a écrit :
Salut,

Je pense qu'il serait plutôt souhaitable de mettre le menu dans un état totalement accessible au départ (menus et sous-menus déployés, sans JavaScript), et déclencher au chargement de la page un JavaScript appliquant les css appropriés pour le menu version montre-cache.
Je ne vois pas pourquoi une personne ayant JavaScript désactivé devrait recharger la page alors qu'une personne avec n'aurait pas à le faire, surtout qu'en l'occurence ce n'est pas une obligation.


Ce que j'en disais c'était pour garder le menu principal le plus simple possible. Les personnes sans JS n'auraient pas à recharger la page mais au contraire devraient acceder à une page différente, ou les liens vers les sous rubriques occuperaient tous l'espace.

Je pense que cela dépend de la complexité de la navigation mais à priori si tu décide d'utiliser un menu deroulant c'est que cette derniere est "touffue".