Création d'un menu Horizontal

Version imprimable

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:

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:

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 } }

14/01/2009, 14h33
le_chomeur

supprime le onmouseout="montre('smenu5',false);" sur le menu parent , puis ajoute sur le body un onclick qui fermera tous les menus
14/01/2009, 14h38
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.

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:

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} }

14/01/2009, 14h48
snyfir

Concrétement sa donne coi ?
14/01/2009, 14h58
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:

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é :) )

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:

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';
			}
        }
    }
}

16/02/2009, 21h19
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:

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 ! ;)
17/02/2009, 12h33
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 ?
17/02/2009, 12h59
Bovino

Citation:

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

Code:

alert(MENU.variable)
31/03/2009, 12h49
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.
31/03/2009, 13h17
le_chomeur

oui tu peux y accéder dans le second fichier :)