Javascript et CSS - Menu déroulant sous JS

[DentsLongues]

Salut, ne connaissant rien à javascript, je voudrais juste savoir si on peut inclure un bout de code javascript dans un code html normal et si ça marche sans module supplémentaire... (je pense au cas du fichier css externe).

J'ai envie de créer un menu déroulant et les exemple de codes avec du javascript que j'ai essayé de rapatrier dans mon cher dreamweaver affichent un résultat dont certaines parties ne fonctionnent pas (précisément le menu déroulant que j'aurais voulu copier coller modifier... GRRRR )

Voilà.

Merci d'avance pour votre éclairage basique.

Modifié 11 Février 2006 par Dudu

[Dudu]

Pour info:

• Il est déconseillé de faire des menus déroulants en Javascript. D'une, ce n'est pas le rôle du Javascript. De deux, les utilisateurs naviguant sans JS n'auront pas droit à ton menu (mauvais point pour l'accessibilité et pour le référencement)
  
• Java et Javascript sont 2 langages différents. Attention à ne pas les confondre. J'édite le titre de ton sujet pour éviter la confusion car il est également possible en Java de créer des menus déroulants ou "treeview".
  

Pour répondre à ta 1ère question: oui, c'est le rôle de la balise <script> (l'un des rôles)

[Billyboy]

pour faire quelque chose d'animé on est un peu obligé d'utilisé js pour les vieux navigateurs ( ou ceux pas au x normes )

Le mieux et de faire un menu en css et que ceux qui ont ie par exemple utilisent js.

On utilise donc une combine pour inclure un fichier si le fureteur capte pas le css

Tutorial menu déroulant en css sans javascript

Modifié 12 Février 2006 par Billyboy

[Raphael]

Pour info:

[*]Il est déconseillé de faire des menus déroulants en Javascript. D'une, ce n'est pas le rôle du Javascript. De deux, les utilisateurs naviguant sans JS n'auront pas droit à ton menu (mauvais point pour l'accessibilité et pour le référencement)

Je me permets une petite modération :

- JS est tout à fait prévu pour ce genre de chose. Si JS n'est pas prévu pour les effets dynamiques sur une page, à quoi sert-il ?

- Utiliser uniquement les CSS pour ce genre d'effets est discutable car justement les CSS sont fait pour la mise en page mais pas pour les comportements dynamiques (cf le W3C)... la question est discutable ustement parce que "hover" permet des comportements dynamiques

- Les utilisateurs sans CSS ne sont pas à négliger non-plus : ne pas dire "il faut éviter JS au profit des CSS parce que tout le monde n'a pas JS activé" car c'est exactement la même chose pour CSS (à ce propos).

- En raison du mauvais support CSS des navigateurs, il est aujourd'hui nécessaire de devoir placer du JS si l'on veut créer un menu déroulant

- Dernier point : un menu déroulant est - pas essence - toujours - un obstacle à l'accessibilité, même s'il est très bien conçu.

Bon week-end

Modifié 12 Février 2006 par Sibelius

[Dudu]

Salut

- Les utilisateurs sans CSS ne sont pas à négliger non-plus : ne pas dire "il faut éviter JS au profit des CSS parce que tout le monde n'a pas JS activé" car c'est exactement la même chose pour CSS

Je ne vois pas le problème Dans un menu déroulant, le code CSS ne se charge que de masquer certaines parties et de les afficher au survol.

Sans CSS, on obtient le code HTML pur et dur de type

<ul>
<li>1<ul><li>1.1</li><li>1.2</li><li>1.3</li></ul></li>
<li>2<ul><li>2.1</li><li>2.2</li><li>2.3</li></ul></li>
<li>3<ul><li>3.1</li><li>3.2</li><li>3.3</li></ul></li>
</ul>

et ce genre de code ne me semble pas un obstacle si énorme à l'accessibilité, et même les robots peuvent le lire (c'est dingue) ce qui n'est pas le cas des menus en Javascript les plus courants qui contiennent et les destinations de liens et leurs ancres non dans l'HTML mais dans le JS.

Je veux bien que tu détailles ton propos, parce que du coup je ne te suis pas du tout S'agit-il des histoires de display:none et des lecteurs d'écran ? C'est leur problème. Ma CSS screen est adaptée pour l'écran et c'est AMHA un tort de la part de ces logiciels de vouloir appliquer des règles qui ne leur sont pas destinées. Pourquoi crierait-on sur Microsoft quand leur navigateur présente des bugs alors qu'on ne crierait pas parrallèlement sur ces logiciels qui, trop zélés, lisent les display:none? En tous cas, j'ai déjà reçu des mails d'internautes hadicapés visuels et ils semblaient pouvoir naviguer très sereinement.

Quant au débat qui revient souvent pour le pseudo-format ":hover", il me passe vraiment par dessus: qualifier çà de 'dynamique' est vraiment exagéré

[Monique]

Bonjour,

J'ai envie de créer un menu déroulant et les exemple de codes avec du javascript que j'ai essayé de rapatrier dans mon cher dreamweaver affichent un résultat dont certaines parties ne fonctionnent pas (précisément le menu déroulant que j'aurais voulu copier coller modifier... GRRRR evil.gif )

Voilà.

Merci d'avance pour votre éclairage basique.

<{POST_SNAPBACK}>

Très basique (ce qui est mon niveau de connaissance en ce domaine)...

Pour déclencher des événements au bon endroit et sur la bonne action (par exemple un click, le survol avec la souris...) le JavaScript fait appel à l'attribut id. Tu dois évidemment adapter sa valeur à ton code... cela doit généralement se faire en plusieurs endroits du script, il est possible que tu en aies oubliés.

De plus, l'attribut id ayant plusieurs rôles (ancre, sélecteur CSS...), il est possible qu'il y ait interférence entre le code existant et le script que tu ajoutes.

[Billyboy]

- Dernier point : un menu déroulant est - pas essence - toujours - un obstacle à l'accessibilité, même s'il est très bien conçu.

Je ne vois pas trop pourquoi

C'est du html pur.

Apres pour avoir acces aux sous menu si on a ni js ni css il suffit de cliker sur le menu base.

[Monique]

Je reprends une phrase du dernier billet de Marco à propos de son tutoriel Des menus déroulants grâce aux CSS :

Le top serait de pouvoir le parcourir au clavier sans javascript et que ça soit pas trop dégueulasse avec les CSS désactivées.

(Source URL: http://marcarea.com/weblog/index.php/?2006...plus-accessible )

Tant le JavaScript que les CSS devraient toujours être considérés comme une surcouche destinée à rendre une page plus confortable à l'usage, plus jolie à voir...

Je vous invite à relire ceci : Menus déroulants accessibles?

Marrant... en cherchant cette ancienne discussion, je suis tombée sur ceci

Salut,

préambule : aujourd'hui je suis avec un lynx (navigateur texte) car mon ordi est cassé , alors vu la galère je n'ai pas regardé

tous les liens que vous avez mis. Ce qui ne m'empêche pas de vouloir mettre mon grain de sel ...

<{POST_SNAPBACK}>

[Monique]

Un mauvais exemple qui me revient.

C'était le site d'une grande surface belge mais il n'existe plus sous cette forme, il ne servirait donc à rien que j'en donne le lien.

La page d'accueil consistait en une superbe image, visiblement réalisée par un graphiste de talent. Mais j'ai cherché un moment le moyen d'entrer sur le site... en fait l'image comprenait un menu déroulant mais les items du menu étaient tellement bien intégrés au graphisme que leur rôle de lien était tout sauf évident, ce n'est qu'au hasard des déplacements de la souris qu'un des menus s'est déroulé

Avant même d'être utilisé, ce menu n'était pas vraiment accessible

[Raphael]

Je ne vois pas le problème. Dans un menu déroulant, le code CSS ne se charge que de masquer certaines parties et de les afficher au survol.

Sans CSS, on obtient le code HTML pur et dur de type

Cela est appliquable exactement de la même manière en remplaçant CSS par JavaScript : si le menu est correctement structuré, alors sans JS on obtient aussi le code HTML pur et dur.

Toujours se rappeler que CSS et JavaScript (+ Flash, etc.) ne sont que des surcouches par rapport à ce qui est essentiel : le contenu.

En clair, il n'y a pas de "mauvaise surcouche" : quelle que soit celle employée, il faut toujours que le contenu reste accessible sans cette surcouche.

Bref, CSS ou JS cela revient exactement au même en terme d'accessibilité : l'essentiel reste que le menu soit bien conçu au départ

ce qui n'est pas le cas des menus en Javascript les plus courants qui contiennent et les destinations de liens et leurs ancres non dans l'HTML mais dans le JS.

Dans ce cas précis : entièrement d'accord. Mais il s'agit d'un cas particulier à éviter effectivement.

... Un peu comme les menus déroulant masqués à l'aide des CSS et de display : none, beaucoup beaucoup plus courants

Comme tu le vois : ce n'est pas toujours JS qui est le moins accessible :-/

Ma CSS screen est adaptée pour l'écran

Là c'est une excellente chose : proposer une CSS pour chaque utilisation (screen, handheld, speech, etc.)

Par contre se rappeler que "display : none" n'est pas réservé au media screen et qu'il concerne tous les médias (cf lien ci-dessus)

et c'est AMHA un tort de la part de ces logiciels de vouloir appliquer des règles qui ne leur sont pas destinées. Pourquoi crierait-on sur Microsoft quand leur navigateur présente des bugs alors qu'on ne crierait pas parrallèlement sur ces logiciels qui, trop zélés, lisent les display:none?

Deux choses :

- les lecteurs d'écran sont censés prendre en compte "display : none" car comme le disent les spécifications, il ne s'agit pas d'une propriété reservée au média screen. Donc ceux à blâmer seraient plutôt les autres.

- Entièrement d'accord sur le fait que les principaux outils (Jaws, HomePageReader, etc.) sont très en retard vis à vis des spécifications... on en est un peu comme à l'époque de la guéguerre Netscape-IE.

Quant au débat qui revient souvent pour le pseudo-format ":hover", il me passe vraiment par dessus: qualifier çà de 'dynamique' est vraiment exagéré

Par "dynamique", on entend qu'il est possible d'avoir un comportement non statique en utilisant la pseudo-classe ":hover" (afficher/masquer du contenu, etc).

Je ne vois pas trop pourquoi 

C'est du html pur.

Apres pour avoir acces aux sous menu si on a ni js ni css il suffit de cliker sur le menu base.

Un exemple très simple (vécu) : une personne très mal voyante qui utilise une loupe d'écran (agrandissement X8). Il a CSS et JS activés.

En survolant un item de menu, les sous-menus se déploient... en grande partie hors du champ de la loupe. Si cette personne essaye de pointer sur un sous-menu, il doit déplacer la loupe, donc perd le focus sur l'item principal, donc perd les sous-menus.

C'est un gros problème pour ce genre de personnes.

Il y'a bien sûr d'autres cas où cela pose des problèmes.

Modifié 12 Février 2006 par Sibelius

[DentsLongues]

Bon, après moultes bidouilles... j'ai un peu débroussaillé le truc, et désormais ne s'affiche que le menu en javascript dans IE.

Apparamment le javascript n'apparaît jamais dans Dreamweaver... c'est pour ça que j'avais l'impression d'un bug.

Voici un lien vers une page de test provisoire pour voir la bête en action:

http://www.artsvenusiens.com/X/testX007.htm

Mais je ne sais toujours pas comment intégrer le code javascript (ni quelle partie...) il est méga long...

Ce qui m'inquiète c'est la longueur des bouts de javascript... De gros pâtés... c'est habituel? J'aimerais élaguer au maximum le javascript si possible. Enlever tout ce qui n'est pas nécessaire au menu proprement dit.

Celui qui m'intéresse fait juste un centième du total (à la fin, nb). Menu navbar... (je pense).

Cela pose-t-il un problème si je laisse tout ce code javascript dans ma nouvelle page? (poids, fiabilité, copyright etc... car j'ai trouvé ce code sur un site...)

PS: merci pour les réponses au fait... même si j'ai l'impression qu'il y a plusieurs sons de cloche quant à CSS ou javascript pour créer un menu dynamique...

PS2: chui entre autre allé sur Alsacréations, pas mal!

Modifié 13 Février 2006 par DentsLongues

[Raphael]

PS2: chui entre autre allé sur alsacréation, pas mal!

Hmmm...

Cette année, j'aimerais un super cadeau : que tous les gens se mettent à écrire "Alsacréations" correctement, avec un "s" à la fin. Si si, ça me plairait beaucoup.

Source

[Monique]

Mais je ne sais toujours pas comment intégrer le code javascript (ni quelle partie...) il est méga long...

<{POST_SNAPBACK}>

J'ai vu qu'il était question d'ActiveX (contrôle propriétaire à IE !) et de détection de navigateurs, c'est déjà mal parti

Mes connaissances basiques en JavaScript ne me permettent pas d'en dire plus... si ce n'est de te conseiller de laisser tomber ce code et d'adopter une autre solution.

[Billyboy]

Un exemple très simple (vécu) : une personne très mal voyante qui utilise une loupe d'écran (agrandissement X8). Il a CSS et JS activés.

En survolant un item de menu, les sous-menus se déploient... en grande partie hors du champ de la loupe. Si cette personne essaye de pointer sur un sous-menu, il doit déplacer la loupe, donc perd le focus sur l'item principal, donc perd les sous-menus.

C'est un gros problème pour ce genre de personnes.

Il y'a bien sûr d'autres cas où cela pose des problèmes.

<{POST_SNAPBACK}>

D'ou justement le fait de faire que le menu base envoi a une page ou on a les sous menu en html simple (<p> )

C'est ce que j'ai fais sur mon site par exemple:

http://www.tuto-fr.com/

[Raphael]

D'ou justement le fait de faire que le menu base envoi a une page ou on a les sous menu en html simple (<p> )

C'est ce que j'ai fais sur mon site par exemple:

http://www.tuto-fr.com/

C'est une solution en effet, mais devoir créer plusieurs pages différentes pour s'adapter à chaque personne n'est pas la solution idéale non-plus :-(