[Résolu] Menu déroulant: et si javaScript est désactivé?

Bonjour à tous!
J'utilise le menu déroulant du tuto. Je me suis demandé ce qui se passait si je désactivé javaScript, résultat: impossible de naviguer dans le menu! Y a-t-il un moyen de faire que le menu soit ouvert originellement si javaScript est désactivé? En plus, je me demande si un handicapé peut utiliser ce menu. J'ai bien vu le mot conseillant d'utiliser onblur et onfocus mais vu que je ne connais rien à javaScript, je comprend ni à quoi ils servent ni comment les utiliser.

Merci d'avance

Edit: Bon pour avoir le menu ouvert originellement si JavaScript est désactiver il suffit d'enlever le display: none; dans le css. Sinon pour les malvoyants, ben j'attend votre réponse.
Modifié par Celenor (12 May 2006 - 18:18)

Hello,

Le comportement que tu décris est assez curieux, car comme l'explique le tuto, les menus déroulants d'Alsacréations sont faits pour être utilisables même si JavaScript est désactivé.

tuto a écrit :
Comme vous le remarquez dans le code Javascript ci-dessous, le script appelle la fonction "montre()" au chargement de la page. Cet appel ("montre" vide) a pour effet de cacher tous les sous-menus dès le chargement du document.

Il aurait été plus simple de masquer ces sous-menus en définissant simplement leur CSS à "display:none" (c'était d'ailleurs le cas dans la première version du tutoriel), alors pourquoi avoir préféré utiliser un appel javascript pour obtenir le même effet ?

L'intérêt est une question d'Accessibilité, ou plutôt d'interopérabilité : il existe une part non négligeable d'internautes pour qui Javascript est désactivé.
Pour ces utilisateurs, le menu doit rester utillisable, ce qui n'aurait pas été le cas si les sous-menus avaient été cachés par CSS, car ils le resteraient.
Dans notre cas, les menus sont effacés au chargement, mais uniquement si javascript est actif. Dans les autres cas, le menu reste navigable même si aucun comportement au survol ne sera déclenché.

D'ailleurs je viens de tester : si JS est désactivé, alors le menu apparaît complètement déployé au chargement de la page. Tous les sous-menus apparaissent et ne se masquent pas. Ils sont donc utilisables.

Si tu as trouvé un cas particulier, merci de nous donner un peu plus de précisions

EDIT : j'ai l'impression que tu as dû tomber sur une ancienne version (au-moins 2 ans) d'un menu déroulant.
Modifié par Raphael (11 May 2006 - 08:22)

Bonjour,

En fait, presque tous les menus semblent poser problème si Javascript est désactivé, sauf le premier, le menu vertical.

Le résultat le pire est sur la variante du menu vertical et sur le menu horizontal une ligne : les sous-menus se superposent et une grande partie des liens est donc inaccessible (sauf en désactivant les styles)

L'autre problème (qui concerne également les autres menus) est que les sous menus risquent de recouvrir du contenu.

Une solution qui me parait bonne est proposée ici, sur base des menus d'alsacréations : http://moncastel.9online.fr//menualsa/menu-hrz.htm
Deux fichiers .css sont prévus, selon que javascript est activé ou non. En cas de JS désactivé, c'est donc un plus pour l'accessibilité ou le design.
Modifié par Alan (11 May 2006 - 11:57)

Rhaaa! J'aurai du relire le tuto. Je l'ai utilisé la première fois il y a effectivement environs deux ans. A l'époque, l'accessibilité ne m'interressais pas. Là, je le reprend et je vois qu'il risque de poser un problème. J'aurai du le relire, je m'excuse de vous avoir déranger pour rien. Merci de vos réponses.

Edit: merci pour le lien, j'ai bien ça permet de ne pas cacher une partie du site.
Modifié par Celenor (11 May 2006 - 14:36)

Alan a écrit :
Bonjour,


Une solution qui me parait bonne est proposée ici, sur base des menus d'alsacréations : http://moncastel.9online.fr//menualsa/menu-hrz.htm
Deux fichiers .css sont prévus, selon que javascript est activé ou non. En cas de JS désactivé, c'est donc un plus pour l'accessibilité ou le design.

Bonjour,
On peut appliquer sur tous les menus d'alsacréations la double feuille de style en remplacement du window.onload : (tester)

1 - Mettre le css du menu dynamique dans un fichier externe nommé dynmenu.css par exemple.

2 - ajouter display:none dans #menu dd pour que les sous-menus soient cachés.

3 - Créer une nouvelle feuille de style dans un fichier nommé : sansJS.css comprenant le style du menu sans javascript

4 - Modifier l'entête du fichier HTML du menu comme ceci :

<title>un menu déroulant en CSS et javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
[#red]<link rel="stylesheet" type="text/css" href="sansJS.css" />[/#]

<script type="text/javascript">
<!--
[#red]//window.onload=montre;  supprimé

//active la feuille de style dynamique
document.getElementsByTagName("link")[0].href="dynmenu.css"[/#]
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

Modifié par chmel (13 May 2006 - 18:55)

Merci Alan et Chmel pour ces retours très intéressants.

Si tu es d'accord, Chmel, je rajouterais bien un lien vers ta "variante" dans le tutoriel.

chmel a écrit :

No problème dès que j'ai un moment, je corrigerai les qqs erreurs et essaierai de clarifier l'explication

OK, tu me préviens par MP dès que tu es prêt ?