Création menu (debutant)

Version imprimable

Bonjour,

Je suis débutant en Java script et je bloque sur un code que j'ai modifié.

Voila le html:

Code:

1
2
3
4
5
<div id="menu_vertical">
	<div ID=mv1>
		<SCRIPT LANGUAGE="JavaScript" SRC="menu_dyn_vert.js"></SCRIPT>
	</div>
</div>

Et voici le menu_dyn_vert.js:

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
bgcolor_Default='#7B7B7B'; // couleur du menu horizontal par defaut
bgcolor_MousseOn='#FF7B7B'; // couleur du menu horizontal quand souris survole le menu
bgcolor_Selected='#7B7BFF'; // couleur du menu horizontal après souris click
 
var MenuTitle = new Array;
MenuTitle[0]='Menu1';
MenuTitle[1]='Menu2';
MenuTitle[2]='Menu3';
MenuTitle[3]='Menu4';
 
document.write('<style type="text/css">');
document.write('#topgauche { position:absolute;  z-index:10; }');
/*document.write('A:hover.ejsmenu {color:#000000; text-decoration:none;}');
document.write('A.ejsmenu {color:#000000; text-decoration:none;}');*/
document.write('</style>');
 
menu_pos = -1;
 
function menu_draw(pos)
	{
	html_text="<TABLE CELLPADING=0 CELLSPACING=0 BORDER=0 WIDTH=100% HEIGHT=25><TR>";
	for(a=0;a<MenuTitle.length;a++)
		{
		if (pos==a)
			{
			html_text=html_text+"<TD WIDTH=400 ALIGN=center bgcolor="+bgcolor_Selected+' onMouseOver="this.style.background=\''+bgcolor_Selected+'\'" onMouseOut="this.style.background=\''+bgcolor_Selected+'\'" onClick=\menu_draw(pos)\'"><A onClick="return(true)" href=#><FONT SIZE=4 FACE="Verdana">'+MenuTitle[a]+'</FONT></a></TD>';
			}
		else
			{
			html_text=html_text+"<TD WIDTH=400 ALIGN=center bgcolor="+bgcolor_Default+' onMouseOver="this.style.background=\''+bgcolor_MousseOn+'\'" onMouseOut="this.style.background=\''+bgcolor_Default+'\'" onClick=\menu_draw(pos)\'"><A onClick="return(true)" href=#><FONT SIZE=4 FACE="Verdana">'+MenuTitle[a]+'</FONT></a></TD>';
			}
		}
	html_text+="</TR></TABLE>";
	alert("Vous m'avez cliqué "+pos);
	if(document.getElementById)
		document.getElementById("mv1").innerHTML = html_text;
	else
		document.write(html_text);
	}
 
menu_draw(menu_pos);

Le code s'execute bien au premier lancement.
Losrque je survole les onglets avec la souris il change bien de couleur.
Parcontre quand je clique dessus rien ne se passe.
J'ai même pas l'alerte qui se lance, se qui prouve que la fonction menu_draw() n'est pas appelée sur l'action d'un clique alors qu'elle deverait puisque je l'ai associée à l'evenement onClick.

Je ne comprends pas ce qui cloche. Please, quelqu'un a-t-il une idée ? :cry:

19/05/2013, 02h05
SylvainPV
Ouch. Il y a tellement de trucs qui ne vont pas que je ne sais pas par où commencer. Avant toute chose il va falloir corriger tous les problèmes potentiels de ton code.

- les balises script sont à placer juste avant la fermeture du tag </body>
- les tags et attributs sont tous à écrire en minuscules
- l'attribut id doit être entouré de guillemets
- les variables javascript doivent être déclarées avec la mot-clé var
- il faut écrire var MenuTitle = new Array(); ou var MenuTitle = [];.
- document.write est à éviter à tout prix. pour mettre du style css, utilise des fichiers css à part et la balise link. Pour du HTML, utilise les méthodes de l'API DOM (document.appendChild etc...)
- pour gérer des évènements par rapport à des élements HTML générés en Javascript, il vaut bien mieux passer directement par les attributs Javascript que par les attributs HTML:
Code:

1 2 3 4 var elem = document.createElement("td"); elem.onclick = function(event){ ... }; //ou elem.addEventListener("mouseover", function(){ ... });

Bonjour,
je dirais que dans ton cas il ne t'ai nullement besoin d'utiliser document.write.

Comme l'a dit SylvainPV, le style peut directement être écrit sans passer par un document.write.

Les lignes suivantes
Code:

1 2 3 4 5 6 html_text +='</TR></TABLE>'; alert("Vous m'avez cliqué "+pos); if(document.getElementById) document.getElementById("mv1").innerHTML = html_text; else document.write(html_text);
peuvent ce résumer à
Code:

1 2 html_text +='</TR></TABLE>'; document.getElementById("mv1").innerHTML = html_text;
il y a belle burette que document.getElementById est reconnu par TOUS les navigateurs.

Le point qui me paraît le plus critiquable, outre passer par une TABLE pour créer un menu, est la façon d'écrire le code que tu va injecter via le innerHTML.

exemple:

Code:

html_text=html_text+'<td width="400" align="center" bgcolor="' +bgcolor_Selected +'" onmouseover="this.style.background=\'' +bgcolor_Selected +'\'" onmouseout="this.style.background=\'' +bgcolor_Selected +'\'" onclick="menu_draw('+a +')"><a onclick="return(true)" href=#><font size=4 face="Verdana">' +MenuTitle[a]+'</font></a></td>';

tu as des problèmes dans l’alternance entre les simples quottes et les doubles.

Enfin, ce type de menu est réalisable en pure CSS et si tu veux impérativement "backgrounder" le menu actif, il te faudra effectivement un peu de javascript.

menu simple
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 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Menu simple</title> <style> html, body{ font-family:Verdana; font-size:100%; } #ul_menu{ margin:0; padding:0; list-style:none; width:100%; background:#7B7B7B; line-height:1.5em; height:1.5em; } #ul_menu li{ display:inline-block; float:left; width:25%; height:100%; text-align:center; } #ul_menu li a{ font-size:1.1em; width:100%; height:100%; display:block; } #ul_menu li:hover{ background:#FF7B7B; } ul li a:target, ul li a:active, ul li a:focus{ background:#7B7BFF; } </style> </head> <body> <ul id="ul_menu"> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a></li> <li><a href="#">Menu3</a></li> <li><a href="#">Menu4</a></li> </ul> </body> </html>

:P oui j'étais pas du tout parti avec la bonne philosophie.
Merci pour vos reponses.

NoSomoking, j'ai repris ton code auquel j'ai ajouté un peu de javastript en reprennant l'exemple de SylvainPV:
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 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Menu simple</title> <style> html, body{ font-family:Verdana; font-size:100%; } #ul_menu{ margin:0; padding:0; list-style:none; width:100%; background:#7B7B7B; line-height:1.5em; height:1.5em; } #ul_menu li{ display:inline-block; float:left; width:25%; height:100%; text-align:center; } #ul_menu li a{ font-size:1.1em; width:100%; height:100%; display:block; } #ul_menu li:hover{ background:#FF7B7B; } ul li a:target, ul li a:active, ul li a:focus{ background:#7B7BFF; } </style> </head> <body> <ul id="ul_menu"> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a></li> <li><a href="#">Menu3</a></li> <li><a href="#">Menu4</a></li> </ul> <SCRIPT LANGUAGE="JavaScript" SRC="javascript.js"></SCRIPT> </body> </html>
javascript.js:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var elem = document.getElementById("ul_menu"); elem.onclick = function(event){ alert("Vous m'avez clique "); // ok fonctionne elem.style.fontSize = "12px";// ok fonctionne var el2 = elem.childNodes; el2.style.backgroundColor = '#FFFFFF'; // ne fonctionne pas //elem.innerHTML = "Salut tout le monde !!"; while (el2) { el2.addEventListener("mouseover", function(){ el2.style.backgroundColor = '#7BFFFF'; }); // ne fonctionne pas el2.style.backgroundColor = '#7BFFFF'; // ne fonctionne pas el2 = el2.nextSibling; } }
Il y a du progré, maintenant quand je clique sur un onglet du menu ca génère un évenement java qui affiche l'alerte.
J'arrive à modifier les propriétées de l'objet principale mais j'arrive pas à acceder aux sous-objets.
Tous se comporte comme si elem.childNodes me revoit null alors que je m'attends à ce qu'il me revoint le premier element <li></li> et aprés j'aurais aimé modifier définitivement la couleur de celui où la souris est dessus...
Vous voyez ce qui cloche dans le nouveau code?

19/05/2013, 17h59
Bovino

Comme le pluriel l'indique, childNodes renvoie une collection et il n'est pas possible d'affecter des styles à une collection !
Il faut boucler sur chaque élément pour affecter les styles individuellement.

Ok , j'ai modifié le script comme ceci:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 const bgcolor_Default='#7B7B7B'; // couleur du menu horizontal par defaut const bgcolor_MousseOn='#FF7B7B'; // couleur du menu horizontal quand souris survole le menu const bgcolor_Selected='#7B7BFF'; // couleur du menu horizontal aprés un clik de souris var elem = document.getElementById("ul_menu"); elem.onclick = function(event){ var el2 = elem; el2 = el2.firstChild; while (el2) { if (el2.nodeName=="LI") { el2.style.backgroundColor = '#FFFFFF'; el2.addEventListener("onMouseOver", function(){ el2.style.backgroundColor = bgcolor_Selected}); } el2 = el2.nextSibling; }
Maintenant j'arrive à acceder au noeud enfant et à modifier les propriétés de ceux-ci. Ce qui est un pas en avant. :mrgreen:
Parcontre je n'arrive pas à détecter celui qui a recu le clique. Le listener ne voit pas que la souris est dessus. Il semble que la détection se fait au momment ou la souris arrive.
J'ai essayé avec onFocus, onMouseOut ca ne marche pas ...

Enfait dans un second temps, je voudrais créer le menu dynamiquement donc je ne peux pas faire de Listner séparé pour chaque balise <LI>

S'il vous plait, quelqu'un sais comment je peux faire pour savoir lequel des objets a recu le clique dans la boucle while ?

Dans ton code tu crées un listener au callback d'un autre listener. Autrement dit si tu cliques 10 fois sur #ul_menu, tu vas 10 fois associer un event listener mouseover sur tes éléments el2 et ta fonction s'exécutera 10 fois quand tu passeras la souris dessus ! :?

Il vaut donc mieux ajouter tes listeners et faire ton binding évènementiel au moment où tu crées les éléments HTML, et nulle part ailleurs.

Aussi plutôt que de manipuler le style en Javascript, c'est plus propre de changer la classe de l'élément HTML et d'écrire des styles différents dans ta feuille CSS.

Enfin ne pas confondre Java et Javascript. Ca n'a rien à voir :) Si tu veux dire Javascript en abrégé écris JS.

Un peu de code pour t'inspirer:
Code:

1 2 3 4 5 6 7 8 var onglets = document.querySelectorAll("#ul_menu li"); for(var i = 0; i < onglets.length; i++){ var onglet = onglets[i]; onglet.addEventListener("click", function(){ this.className = "selected"; alert("Vous avez cliqué sur l'onglet "+this.innerHTML); });
http://codepen.io/anon/pen/egDkj

20/05/2013, 02h30
Dereck07

C'est parfait! C'est pile poile ce que je cherchais.

Encore mille fois merci :ccool: