Menu dynamique

[zouOparadis]

Bonjour,

J'envisage de reprendre ce menu dynamique sur mon site.

Mais je veux que tout le monde puisse l'utiliser. Or je crois savoir qu'un certain nombre d'internautes désactivent les fonctions javascript sur leur navigateur.

Ce nombre est-il négligeable?

Un menu dynamique est-il donc conseillé ou non, d'une manière générale?

Comment faire sinon ?

Merci pour vos réponses

Modifié 18 Septembre 2005 par zouOparadis

[Monique]

Bonjour,

Le JavaScript utilisé sur un site ne doit en aucun cas être un passage obligé pour la consultation du site ou l'utilisation de ses services.

Par contre il peut être utilisé sans problème comme surcouche apportant un confort supplémentaire à l'internaute.

Si tu désactives le JavaScript (d'un click avec la barre Web Developper de Firefox), tu pourras constater que le menu proposé sur Alsacreations est tout à fait opérationnel même avec le JavaScript désactivé... il se présentera simplement déroulé.

[recherche_webmaster]

Moi je regarde ce menu et je ne le comprend pas, si quelqu'un veut m'expliquer :

ça c'est le JavaScript :

<script type="text/javascript">
<!--
window.onload=afficher;
function afficher(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>

ça c'est le code html :

<dt onclick="javascript:montre();"><a href="#">Menu 1</a></dt>
 	 
  <dt onclick="javascript:montre('smenu2');">Menu 2</dt>

 	 <dd id="smenu2">
    <ul>
   	 <li><a href="#">Sous-Menu 2.1</a></li>
   	 <li><a href="#">Sous-Menu 2.2</a></li>

   	 <li><a href="#">Sous-Menu 2.3</a></li>
    </ul>
 	 </dd>	

  <dt onclick="javascript:montre('smenu3');">Menu 3</dt>

 	 <dd id="smenu3">
    <ul>
   	 <li><a href="#">Sous-Menu 3.1</a></li>
   	 <li><a href="#">Sous-Menu 3.1</a></li>

   	 <li><a href="#">Sous-Menu 3.1</a></li>
   	 <li><a href="#">Sous-Menu 3.1</a></li>
   	 <li><a href="#">Sous-Menu 3.1</a></li>

   	 <li><a href="#">Sous-Menu 3.1</a></li>
    </ul>
 	 </dd>

Questions :

Qu'est ce que cette balise <dt> déjà? Mais surtout je ne pige pas l'algorythme général du script, pourquoi une boucle while et la ligne <dt onclick="java script:montre('smenu3');">Menu 3</dt> (par exemple)

?

Je n'arrive pas à traduire le script en français, c'est dommage parce que ce script m'intéresse aussi .

<edit Monique> Attention : JavaScript et Java sont deux langages totalement différents </edit>

Modifié 19 Septembre 2005 par Monique

[jeanpierre949]

Salut.

Je ne peux pas t'expliquer tout le code mais la balise <dt> c'est une balise d'element d'une liste de definition <dl> ainsi que la balise<dd>

[recherche_webmaster]

C'est déjà ça merci ...

Aussi j'ai une autre question au cas ou un javascripteur chevronné passerait par là :

Comment faire en sorte que le menu s'ouvre non pas en cliquant mais seulement au survol ? J'ai essayé de placer un "onMouseOver" à la place du "onLoad" , ce qui est certainement abbérant, et cela n'a donc rien donné.

Mais déjà je voudrais bien le comprendre ce menu.

[Dudu]

Salut,

tu peux le faire sans Javascript avec le pseudo-format :hover en CSS. Çà évitera aux internautes qui désactivent le JS de contempler un menu vide...

[recherche_webmaster]

Merci Dudu pour ta suggestion, j'ai justement une légère allergie au javascript. Si je peux m'en passer tant mieux.

Je vais relire le livre d'éric Meyer sur les CSS mais il dit, dans le chapitre sur les menus déroulants, qu'il faut rajouter un truc spécial, je ne sais plus lequel, pour faire des menus déroulants en CSS, ce qui n'est guère plus accessible si mes souvenirs sont exactes.

Je fais erreur ?

Si j'ai bon, je veux toujours bien que l'on m'explique le but de la structure de controle "for" dans le javascript du code du haut du post.

[Anonymus]

1/

La structure de la boucle 'for' :

$a="1";
for($x=0;$x<5;$x++){
$a++;
}

- On initialise la variable $a à "1".

- Au premier passage à la boucle 'for', on initialise un compteur, $x, à "0". On verifie si $x<5. Si c'est inférieur à 5, alors on passe par la boucle (donc, on incrémente $a de "1".

Puis, on incrémente le compteur de "1" (instruction $x++).

Puis, on recommence (on vérifie si $x<5, si c'est inférieur à 5, alors on passe par la boucle, etc..

2/

Je vais relire le livre d'éric Meyer sur les CSS mais il dit, dans le chapitre sur les menus déroulants, qu'il faut rajouter un truc spécial, je ne sais plus lequel, pour faire des menus déroulants en CSS, ce qui n'est guère plus accessible si mes souvenirs sont exactes.

Qu'est ce que cette balise <dt> déjà?

Donnes toi un peu de mal, jettes un oeil aux différentes docs mises à ta disposition, tu es ton meilleur allié, on ne pourra jamais t'aider mieux que tu ne pourras le faire toi même.

Jettes un oeil au livre dont tu parles, et reviens nous voir avec des questions plus... concretes que :

il faut rajouter un truc spécial, je ne sais plus lequel

Anonymus.

[recherche_webmaster]

Jettes un oeil au livre dont tu parles, et reviens nous voir avec des questions plus... concretes que

Oui j'ai répondu un peu vite désolé.

Bon pour la boucle for voilà ce qui me turlupine :

On initialise un compteur à 1. Bon

Ensuite on donne un id à chaque liste à puce. Mettons 3.

En cliquant dessus, ça nous fait 4. (normalement).

Et donc ça dit, selon la boucle for, la liste à puce numéro 4 s'affiche.

C'est ça ?

** edit ** je me lance dans un exercice de traduction du script, vous moquez pas.

fonction "afficher" les éléments notés "id" : La variable "d" déclenche la fonction qui affiche l'élément noté "id".

si la variable i est égale à 1, et tant qu'elle est inférieur à 10 on lui ajoute 1.

si la fonction d'affichage de l'éméent smenu, incrémenté de la valeur de i,

j'y arrive plus j'ai de la fumée qui sort des oreilles.

La suite ?

Modifié 19 Septembre 2005 par recherche_webmaster

[Anonymus]

for (var i=1; i<=10; i++)
{if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}}
}

On créé une boucle, qui va tourner 10 fois. On aura accès au nombre de fois, avec la variable 'i'.

>> if (document.getElementById('smenu'+i))

Signifie 'si document.getElementById('smenu'+i)', autrement dit : S'il existe un élément appelé smenu+i (smenu1, ou smenu2, ... )

alors on affiche 'none' pour cet élément :

document.getElementById('smenu'+i).style.display='none';

Voilà. C'est plus clair ?

[recherche_webmaster]

C'est gris foncé disons mais c'est déjà moins sombre :

Je fais une boucle for pour compter le nombre de menus/sous menus. Et on les ferme tous avec cette boucle.

Et si on clique sur un menu ça déclenche la variable "d" qui l'affiche.

ça sert à quoi de fermer tous les menus avec la boucle for.

** edit ** répondez pas à la dernière question je viens enfin de trouver la page qui détail ce menu sur alsa, faudrait qu'ils revoient un peu leur navigation interne.

** edit **

ça change rien , je comprend pas, je crois que c'est un blocage inconscient : je suis allergique au javascript, je n'aime pas ce langage ça ne sert qu'à fert qu'a faire des bib bib sur une page.

J'ai tort ?

Modifié 19 Septembre 2005 par recherche_webmaster

[clb56]

je n'aime pas ce langage ça ne sert qu'à fert qu'a faire des bib bib sur une page.

J'ai tort ?

<{POST_SNAPBACK}>

Oui, le problème n'est javascript mais l'usage qu'on en fait.

Exemple cruel : on peut se poser la question de l'intérêt des menus déroulants avec plein de liens alors qu'une page plan du site rend très aisément toutes les rubriques, sous rubriques et pages accessibles à l'utilisateur sans encombrer toutes les pages du site d'innombrables liens.

Sans l'avoir utilisé moi même il me semble que le tutoriel d'alsa est sans problème et tu devrais donc sans doute le reprendre à tête reposée.

Attention à ne pas avoir d'autres javascript avec onload dans ta page parce que si c'est le cas ça fait tout foirer.

Pour ton onmouseover, ce n'est pas le onload qu'il fallait modifié mais les onclick compris dans les balises <dt>

à Dudu > pourquoi parle tu de problème si le javascript est inactif. Il ne peut pas y en avoir puisque tout le contenu auquel on doit pouvoir accédé est bien en dur dans le document html javascript ne sert dans ce cas qu'à montrer ce qu'il a lui m^me aup

[Dudu]

à Dudu > pourquoi parle tu de problème si le javascript est inactif. Il ne peut pas y en avoir puisque tout le contenu auquel on doit pouvoir accéder est bien en dur dans le document html, javascript ne sert dans ce cas qu'à montrer ce qu'il a lui même auparavant caché

La réponse est da ta question. Le Javascript sert dans le cas présent à afficher les éléments. Tu fais comment pour les voir s'ils ne sont pas affichés ? ("aller voir dans le code source" est une mauvaise réponse)

[Xavier]

Il me semble que dans le cas du tutoriel d'alsacréations, le javascript et utilisé aussi pour cacher les éléments.

Donc sans javascript, on ne peut pas les faire apparaître, mais c'est pas grave vu qu'ils sont déjà affichés

(Il faut quand-même toujours vérifier avec javascript désactivé que ça passe bien...)

[clb56]

La réponse est da ta question. Le Javascript sert dans le cas présent à afficher les éléments. Tu fais comment pour les voir s'ils ne sont pas affichés ? ("aller voir dans le code source" est une mauvaise réponse)

<{POST_SNAPBACK}>

Xavier vient de redire la précision pertinent mais j'insiste.

Voilà bien le cas où les commentaires sur la rigueur de conception vont trop loin.

Pourquoi mettre le soupçon sur la question de l'obstructivité d'un javascript si l'auteur dudit script a déjà pris en compte et résolu le problème de manière intelligente et satisfaisante.

Cette question de l'obstructivité du javascript est de manière générale tout à fait fondée et importante. Simplement quand elle ne concerne pas un exemple particulier elle ne le concerne pas et je ne trouve pas bien que l'on y insiste.

Celà donne une image du javascript comme étant définitivement du coté du mal.

C'est ruineux pour la question de l'accessibilité car ça tranche les débats avant qu'ils ne puissent avoir lieu. Le script d'alsa est en fait l'exemple même d'un bon usage controlé du javascript. Même si je reste très réservé sur l'idée même de faire des menu déroulants (queque soit la technique utilisée) dans toutes les pages d'un site.

[Dudu]

Celà donne une image du javascript comme étant définitivement du coté du mal.

C'est ruineux pour la question de l'accessibilité car ça tranche les débats avant qu'ils ne puissent avoir lieu. Le script d'alsa est en fait l'exemple même d'un bon usage controlé du javascript. Même si je reste très réservé sur l'idée même de faire des menu déroulants (queque soit la technique utilisée) dans toutes les pages d'un site.

C'est une interprétation aléatoire de mes propos qui n'engage que toi

[clb56]

le qui clôt ton dernier message, clôt en même temps le débat pour ce qui me concerne.

[recherche_webmaster]

Attention à ne pas avoir d'autres javascript avec onload dans ta page parce que si c'est le cas ça fait tout foirer.

Voilà qui ne va point guérir mon allergie au javascript ...

De toute façon j'ai décidé d'ajouter une simple page avec les sous-catégories plutot que d'insérer celles-ci dans un menu javascrito-dynamique. Simple, classique et à l'ergonomie sans surprise donc efficace.

[clb56]

Pour le problème de plusieurs onload il y a un excellent script et tutoriel à cette adresse

et oui bien sur faire un plan du site c'est ce qu'il y a de mieux.

[Country]

Attention à ne pas avoir d'autres javascript avec onload dans ta page parce que si c'est le cas ça fait tout foirer.

<{POST_SNAPBACK}>

Vu sur Iliab.net , une petite fonction afin d'éviter ce genre de problèmes :

Evenements multiples au chargement d'une page

J'utilise de script depuis quelque temps déjà et ça fonctionne parfaitement

[Dudu]

le qui clôt ton dernier message,  clôt en même temps le débat pour ce qui me concerne.

Désolé si tu l'as mal pris.

Mais quel débat au fait ? Tu interprètes mes propos de manière complétement farfelue et c'est toi qui te permet le luxe de jouer le vexé, c'est le monde à l'envers