Discussion :

[ilood]

Bonjour,

J'aimerai créer un menu déroulant sans à avoir à modifier le code html ci-dessous. J'ai commencé un code js mais je n'arrive pas à récupérer le numéro du menu sur lequel la souris passe.
Avez-vous une idée ? Un exmple ?

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
<div id="menu">
    <dl>
        <dt>Titre 1</dt>
        <dd>
            <ul>
                <li>item 1</li>
                <li>item 2</li>
                <li>item 3</li>
            </ul>
        </dd>
    </dl>
    <dl>
        <dt>Titre 2</dt>
        <dd>
            <ul>
                <li>item 1</li>
                <li>item 2</li>
                <li>item 3</li>
            </ul>
        </dd>
    </dl>
</div>

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
<script type="text/javascript">
var PAGE = function(){
	return {
		addLoadEvent : function(e) {
			if (window.addEventListener)
	 			window.addEventListener('load', e, false);
	  		else if (window.attachEvent)
				window.attachEvent('onload', e);
		},
		menu : function(){
			return {
				init : function(){
					this.deplie();
				},
				deplie : function(){
					var _menu = document.getElementById('menu');
					var _dls = _menu.getElementsByTagName('dl');
					var _dt = new Array();
					for(var i=0;i<_dls.length;i++){
						var _dts = _dls[i].getElementsByTagName('dt');
						_dt.push(_dts[0]);
					}
					for(var i=0;i<_dt.length;i++){
						_dt[i].onmouseover = function(){
							alert('Hello '+i);
						}
					}
				}
			}
		}()
	}
}();
 
PAGE.addLoadEvent(function(){
	PAGE.menu.init();
});</script>

[marcha]

Salut,

Code :

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

1
2
3
4
 
_dt[i].onmouseover = function(i) {
    return function() { alert('Hello '+i); }
}(i);

Un peu de théorie ici

[ilood]

Code :

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

1
2
3
4
 
_dt[i].onmouseover = function(i) {
    return function() { alert('Hello '+i); }
}(i);

Effectivement lorsque la page est chargé j'ai bien deux alertes avec les i bien incrémentés.
Mais au survol des menus je n'ai plus d'alerte.

Le but est qu'au survol du menu je puisse récupérer son numéro. Le but final étant d'afficher un sous menu.

[le_chomeur]

pourquoi ?

Code :

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

1
2
3
4
 
 function(i) {
    return function() { alert('Hello '+i); }
}(i);

et non pas :

Code :

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

1
2
3
 function(i) {
    alert('Hello '+i);
}(i);

?

[DoubleU]

Parce qu'en écrivant ca, tu exécutes la fonction immédiatement ^^

[le_chomeur]

ha vi n'avais point vu le param (i) planqué :p

[marcha]

Effectivement lorsque la page est chargé j'ai bien deux alertes avec les i bien incrémentés.
Mais au survol des menus je n'ai plus d'alerte.

Tu peux reposter ton code actuel ?

[ilood]

Tu peux reposter ton code actuel ?

Au temps pour moi, je n'avais pas vu le return devant la fonction.
Ca fonctionne maintenant.

Je vais essayer de progresser avec ces éléments.

Merci

[ilood]

J'ai réussi à obtenir ce que je souhaitais.

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
48
49
50
var PAGE = function(){
	return {
		addLoadEvent : function(e) {
			if (window.addEventListener)
	 			window.addEventListener('load', e, false);
	  		else if (window.attachEvent)
				window.attachEvent('onload', e);
		},
		menu : function(){
			return {
				init : function(){
					this.deplie();
				},
				deplie : function(){
					var _menu = document.getElementById('menu');
					var _dls = _menu.getElementsByTagName('dl');
					var _dt = new Array(); var _dd = new Array();
					for(var i=0;i<_dls.length;i++){
						var _dts = _dls[i].getElementsByTagName('dt');
						var _dds = _dls[i].getElementsByTagName('dd');
						_dt.push(_dts[0]);
						_dd.push(_dds[0]);
					}
					for(var i=0;i<_dt.length;i++){
						_dt[i].onmouseover = function(i){
							return function(){
								_dd[i].style.display = 'block';
								_dd[i].onmouseover = function(i){
									return function(){
										_dd[i].style.display = 'block';
									}
								}(i);
							}
						}(i);
						_dt[i].onmouseout = function(i){
							return function(){
								_dd[i].style.display = 'none';
								_dd[i].onmouseout = function(i){
									return function(){
										_dd[i].style.display = 'none';
									}
								}(i);
							}
						}(i);
					}
				}
			}
		}()
	}
}();

Il y a peut-être des optimisations d'écriture, si vous souhaitez y participer, j'en prendrai note avec plaisir.

[le_chomeur]

quelques optimisation :

Code :

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

1
2
3
4
var i=0;i<_dls.length;i++
en
var i = 0 , l = _dls.length ; i < l ; i++
évite d'avoir a recalculer la taille du tableu a chaque boucle :)

je te conseillerais également d'utiliser un tableau a plusieurs dimension mais bon après c'est chacun ses préférences de code.

pour le reste ça va ...

[marcha]

Code :

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

1
2
3
var _dt = new Array(); var _dd = new Array();
// plus simplement:
var _dt = [], _dd = [];