Menu déroulant js non intrusif

Version imprimable

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:

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:

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>

Salut,

Code:

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

Un peu de théorie ici

03/02/2009, 16h11
ilood
Citation:
Envoyé par marcha

Code:

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.

pourquoi ?

Code:

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

et non pas :

Code:

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

03/02/2009, 16h32
DoubleU

Parce qu'en écrivant ca, tu exécutes la fonction immédiatement ^^
03/02/2009, 16h39
le_chomeur

ha vi n'avais point vu le param (i) planqué :p
03/02/2009, 16h50
marcha

Citation:

Envoyé par ilood

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 ?
03/02/2009, 21h30
ilood

Citation:

Envoyé par marcha

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

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

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

04/02/2009, 09h13
le_chomeur
quelques optimisation :
Code:

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

Code:

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