DentsLongues Posté 11 Février 2006 Posté 11 Février 2006 (modifié) 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 Posté 11 Février 2006 Posté 11 Février 2006 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 Posté 12 Février 2006 Posté 12 Février 2006 (modifié) 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 Posté 12 Février 2006 Posté 12 Février 2006 (modifié) 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 Posté 12 Février 2006 Posté 12 Février 2006 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 Posté 12 Février 2006 Posté 12 Février 2006 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 Posté 12 Février 2006 Posté 12 Février 2006 - 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 Posté 12 Février 2006 Posté 12 Février 2006 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 Posté 12 Février 2006 Posté 12 Février 2006 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 Posté 12 Février 2006 Posté 12 Février 2006 (modifié) 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'écranLà 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 Posté 12 Février 2006 Auteur Posté 12 Février 2006 (modifié) 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 Posté 12 Février 2006 Posté 12 Février 2006 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 Posté 12 Février 2006 Posté 12 Février 2006 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 Posté 12 Février 2006 Posté 12 Février 2006 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 Posté 13 Février 2006 Posté 13 Février 2006 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 :-(
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant