Menu en javascript uniquement

Sujet résolu

9 mai 2010 à 11:26:06

Bonjour à tous!
Voila plusieurs jours que je cherche une solution à mon problème et me voila à saturation alors je me tourne vers vous!
Voici mon problème:
Je souhaite faire un menu uniquement en JS. Je pense que mon code est bon (c'est celui de mon prof :-°

) mais rien ne s'affiche...

function Rubrique (titre,lien)
	{this.titre=titre;
	this.lien=lien;}
Rubrique.prototype.valueOf=function()
	{return "rubrique";	}
Rubrique.prototype.toString=function()
	{return this.titre;}
	
function SousMenu(titre)
	{this.titre=titre;
	this.rubriques=new Array;}
SousMenu.prototype.valueOf=function()
	{return "SousMenu";}
SousMenu.prototype.toString=function()
	{return this.titre;}
SousMenu.prototype.push=function()
	{for (var i=0;i<arguments.length;i++)
		{var o=arguments[i];
		if (o!=undefined && o.valueOf=="Rubrique")
			this.Rubrique.push(o);
		}
	}

function Menu(nom)
	{Array.call(this);
	this.nom=nom;}
	
Menu.prototype.toString=function()
	{return this.nom;}
Menu.prototype.valueOf=function()
	{return "menu";}
Menu.prototype=new Array;

function CreationMenu()
{
	var menu = new Menu("menuJS");
	var r = new Rubrique("Accueil","accueil.html");
	menu.push(r);
	
	var sousmenu1=new SousMenu("TP");
	var r1=new Rubrique("TP1","TP1.html");
	var r2=new Rubrique("TP2","TP2.html");
	var r3=new Rubrique("TP3","TP3.html");
	var r4=new Rubrique("TP4","TP4.html");
	sousmenu1.push(r1,r2,r3,r4);
	menu.push(sousmenu1);
	
	var sousmenu2=new SousMenu("Projet");
	var q1=new Rubrique("Presentation","presentation.html");
	var q2=new Rubrique("Realisation","realisation.html");
	sousmenu2.push(q1,q2);
	menu.push(sousmenu2);
	menu.creerElements();
}

SousMenu.prototype.creerElements=function(elementParent)
	{
	var elmSM=document.createElement("ul");//elmSM=elementSousMenu
	elmSM.setAttribute("class","sousMenu")
	for (var i=0;i<rubriques.length;i++)
		{var elmR=document.createElement("li");//elmR=ElementRubrique
		elmR.setAttribute("class","Rubrique");
		var elmL=document.createElement("a");//elmL=elementLien
		elmL.setAttibute("href",this.rubriques[i].lien);
		var txt=document.createTextNode(this.rubriques[i].titre);
		elmR.appendChild(elmL).appendChild(txt);
		elmSM.apprendChild(elmR);
		}
	elementParent.append(elmSM);

	}

Menu.prototype.creerElements=function()
	{var p=document.getElementById(this.nom);
	for(var i=0;i<this.length;i++)
		{
		if (this[i].valueOf=="SousMenu")
			{
			var elmD=document.createElement("div");
			elmD.setAttribute("id",this[i].titre);
			p.appendChild(elmD);
			this[i].creerElements(elmD);
			//elmD.style.display='none';
			}
		}
	}

Merci beaucoup à vous de vous pencher la-dessus

Golmote

9 mai 2010 à 11:35:56

Où est le code qui "appelle" le menu ?

As-tu une erreur dans la console ? (Outils -> Console d'erreurs sous Firefox)

Ehlodie50

9 mai 2010 à 11:50:08

Aucune erreur, c'est bien ça le probleme...

C'est ce code là que tu veux?

>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
        <head>
                <title>Exercice 1 - Menu</title>
                <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
                <meta http-equiv="Content-Style-Type" content="text/css"/>
                <link rel="stylesheet" href="accueil.css"/>
                <script type="application/javascript" src="menu.js"></script>
        </head>
        <body onload="CreationMenu();">
                <h1>JavaScript</h1>
                <h4>Nom Prénom</h4>
                <div id="menuJS">
                  <img src="accueil.png" width="290" height="259" alt="accueil.png" usemap="#mapAccueil"/>
                  <map name="mapAccueil">
                        <area onclick="alert('Vous etes deja a l\'accueil')" id="areaAcc" shape="poly" coords="24,31,223,31,224,74,163,75,162,101,61,101,60,126,26,127,26,77"/>
                        <area id="areaProj" shape="poly" coords="66,106,194,106,194,227,65,226"/>
                        <area id="areaTP" shape="poly" coords="167,80,261,80,259,169,201,169,199,101,167,101,166,101"/>
                  </map>
                </div>
        </body>
</html>

restimel

9 mai 2010 à 12:29:31

Je ne vais pas parler de toutes les lignes que je trouve sous optimisée car ce n'est que du détail

mais ligne 27 et ligne 77: pourquoi il n'y a pas de parenthèses derrière valueOf ? car là valueOf est une fonction donc je ne vois pas comment il peut être égale à une chaine de caractères...
Du coup les vérifications sont toujours fausse et tu ne peux jamais créer tes éléments.
Ce que tu veux c'est exécuter la fonction donc il faut faire: .valueOf()==

Ehlodie50

9 mai 2010 à 12:44:21

Ca ne change rien... mais merci quand même

restimel

9 mai 2010 à 13:02:26

sur les éléments que tu crées il n'y a pas de listener sur des événements tel que onmouseover ou onclick, ils doivent réagir comment tes éléments normalement?

A quoi doit ressembler ton menu final?

Ehlodie50

9 mai 2010 à 13:16:52

Comme une liste avec li et ul. Il faut juste qu'ils s'affichent

restimel

9 mai 2010 à 14:13:22

Bon alors j'ai regardé plus en détails et il y a de nombreuses fautes:
ligne 5: {return "Rubrique";} (car ensuite tu compare par rapport à "Rubrique" avec un R majuscule)
ligne 20: this.rubriques.push(o); (avec un r minuscule cette fois et avec un s sinon ce n'est pas le même attribut)
ligne 60: for (var i=0;i<this.rubriques.length;i++) (il manquait le this.) à noter qu'il est préférable d'écrire: for(var i=0,li=this.rubriques.length;i<li;i++) (pour éviter de recalculer la longueur à chaque itération)
ligne 64: elmL.setAttribute("href",this.rubriques[i].lien); (le r de attribute)
ligne 67: elmSM.appendChild(elmR); (appendChild et non pas apprendChild (un r en moins cette fois))
ligne 69: elementParent.appendChild(elmSM); (c'est appendChild et non pas append)

sans oublier les 2 valueOf() cités précédemment

En espérant ne pas en avoir raté...

Golmote

9 mai 2010 à 18:41:40

J'aime beaucoup le "code du prof" :-°

Ehlodie50

9 mai 2010 à 21:15:20

Merci beaucoup restimel, ça fonctionne!!! Je suis ravie, tu ne peux pas savoir à quel point...:p Merci pour tout le temps que tu y as consacré! A bientot