Discussion :

[snyfir]

Bonjour,
Pour créé un menu horizontal défilant j'utilise un script javascript.
Mon menu marche bien, le seul problème que je peut lui reprocher, c'est qu'a chaque fois qu'on sort le pointeur de la sourie du menu, celui-ce referme. Ce qui en soit n'est pas pratique. Je voudrais donc qu'il se referme seulement quand on clique à coté du menu. Mais je ne vois pas comment faire.
Si vous pouviez m'aider. Merci d'avance.

Voici un exemple du code html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div id="menu">
  <ul>		
    <li onmouseover="montre('smenu5',true);" onmouseout="montre('smenu5',false);">Menu 5
      <ul id="smenu5">
        <li onmouseover="montre('smenu51',true);" onmouseout="montre('smenu51',false);"><a href="#">smenu51</a>
          <ul class="dernier" id="smenu51">
            <li><a href="#">smenu511</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>	
</div>

Voici le code javascript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
//au chargement de la page, on appelle la fonction montre()
window.onload=montre;
 
//affichage du menu déroulant et placement de ce dernier
function montre(id,affiche)
{
    var d = document.getElementById(id);
    //si on quitte un élément du menu
    if (d && !affiche)  {
        d.style.display='none'; //on l'efface
    }
    //sinon si on se mets sur un élément du menu
    else if (d && affiche) { 
        d.style.display='block'; //on l'affiche
    }
}

[le_chomeur]

supprime le onmouseout="montre('smenu5',false);" sur le menu parent , puis ajoute sur le body un onclick qui fermera tous les menus

[snyfir]

Oui, ji est penssé, mais le problème est que je n'est aucun sous menu qui se ferme quand j'en ouvre un autre.
De plus, avec le onclik dans le body, quand je clique sur un lien de mon menu, cela ferme mon menu mais ne me redirige pas vers le lien.

[le_chomeur]

pour fermer les autres menus :

- récupère le nombre de menu parent de parent ( hé oui car tu as des sous menu ... )

- sur le mouseover , commence par masquer tous les menu PUIS affiche le menu courant

pour le onclick :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
document.onclick = function(e){
		var source=window.event?window.event.srcElement:e.target;
		if(source.id != 'iddetonmenu'){
fonctionmasquer();
		}
		else if(!preventDouble){preventDouble = true}
	}

[snyfir]

Concrétement sa donne coi ?

[le_chomeur]

. . . ça donne qu'il faut essayer de coder ^^

essaye déja de récupérer tout tes menus et sous menu dans un tableau ( array )

que tu parcourras pour masquer chacun d'entre eux sur le over :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var mesMenu = ... sois tu remplis a la main soit via une méthode.
 
for(var i = 0 , l = mesMenu.length ; i <l ; i++){
mesMenu['i'].style.display = "none";
}

avec une subtilité /!\ il faut ajouter une condition pour ne pas masquer les menus parent ( d'ou la complexité )

[snyfir]

Voila j'ai fini de coder ma fonction. sa marche !
Est-il possible de l'alléger ? Comment pourrais-je faire pour ne pas utiliser de variable global ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
var table = new Array();
var table_save = new Array();
var i = 0;
var date;
 
function menu(id, option)
{
    if (option == 'body') {
        var fin = new Date();
        tempsMs = fin.getTime() - date.getTime();
        if (tempsMs > 100) {
            table_save.reverse();
            for (var s=0; s<table_save.length; s++) {
                var df = document.getElementById(table_save[s]);
                if (df) {
                    df.style.display='none';
                }
            }
        }
    } else {
        date = new Date();
        table[i] = id;
        if (table[i] == 0) {
            table.reverse();
          	for(var s=table_save.length; s>=0; s--) {
                if (table_save[s] != table[s]) {
			        var df = document.getElementById(table_save[s]);
		            if (df) {
		                df.style.display='none';
    				}
		        }
	    	}
            table_save = table;
            table = new Array();    //  Vider l'array
            i=0;
        } else {
            i++;
        }
        if (option != 'noshow') {
            var d = document.getElementById(id);
			if (d) {
                d.style.display='block';
			}
        }
    }
}

[Bovino]

En quoi les variables globales te dérangent-elles ?
Si c'est par peur de conflits éventuels avec d'autres scripts ou des ajouts ultérieurs, une bonne technique est de créer une variable globale sous forme d'objet liée spécifiquement à ton script, par exemple pour ton menu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var MENU = {
table: [],
table_save: [],
i: 0,
date: undefined
}

ainsi, tu appelles les variables de ton menu et tu peux créer d'autres variables du même nom sans que cela interfère.
Pour le date de type undefined, c'est un bon moyen par la suite pour tester si elle a déjà été initialisée (ça peut être utile), ensuite, comme JavaScript est faiblement typé, tu peux lui affecter n'importe quelle valeur sans aucun risque.
Enfin, attention, pas de virgule après le dernier élément !

[snyfir]

Oui, les variables global me dérange car elle risque de rentrer en conflit avec d'autre scripte. En langage c, je c'est qu'il y a le type 'static', qui conserve la valeur, mais en javascript je c'est pas s'il y la même chose.
Pour l'exemple que tu ma montré, je fais comment pour accéder à une variable ?
Sinon vous voyez des choses à améliorer avec mon script ?

[Bovino]

Pour l'exemple que tu ma montré, je fais comment pour accéder à une variable ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert(MENU.variable)

[snyfir]

Si mes variables globales sont dans deux fichiers javascript différents. Mais que ces deux fichiers son inclus dans la même page html. Comme ceci par exemple :
<script src="monscript1.js" type="text/javascript"></script>
<script src="monscript2.js" type="text/javascript"></script>

Si je cré une variable global dans le fichier monscript1, est ce que je peux y acceder à partir du fichier monscript2. Ou alor sont'il totalement independant ?

Merci d'avance pour vos reponses.

[le_chomeur]

oui tu peux y accéder dans le second fichier