Aller au contenu

menu déroulant javascript


lorem_ipsum

Sujets conseillés

bonjour à tous!

je rencontre un petit problème au niveau d'un menu déroulant (source)

En fait j'aimerai attribuer au premier étage de lien une class différente des liens du sous menu.

exemple:

tous les liens de la première liste ont pour class "premier_menu" et pour tous les sous menu "sous_menu".

comme dans le code ci dessous.

Seulement le javascript et moi font 2 =/

Voici ce que je cherche à faire:

<ul id="menu">
<li><a class="premier_menu" href="#menu1">menu 1</a>
<ul>
<li><a class="sous_menu" href="#">élément 1</a></li>
<li><a class="sous_menu" href="#">élément 2</a>
<ul>
<li><a class="sous_menu" href="#">élément 1</a></li>
<li><a class="sous_menu" href="#">élément 3</a>
<ul>
<li><a class="sous_menu" href="#">élément 1</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="sous_menu" href="#">élément 1</a></li>
<li><a class="sous_menu" href="#">élément 3</a>
<ul>
<li><a class="sous_menu" href="#">élément 1</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="premier_menu" href="#menu2" >menu 2</a>
<ul>
<li><a class="sous_menu" href="#">élément 1</a></li>
</ul>
</li>
<li><a class="premier_menu" href="#menu3" >menu 3</a>
<ul>
<li><a class="sous_menu" href="#">élément 3</a></li>
</ul>
</li>
</ul>

Si vous cliquez sur le lien des sources, vous trouverez le fichier js complet.

J'ai bien essayé de triturer les hasChildnodes, les getElements après avoir lu plusieurs exemples, mais mon niveau est trop bas pour piger la logique de tout ça.

Bref 4h00 du mat , c'est la cata!

Merci d'avance pour l'aide, bonne nuit.

Lien vers le commentaire
Partager sur d’autres sites

  • 4 semaines plus tard...

<body onload="Menu.Init()"> et ça devrait aller !

var Menu = {};

Menu.Init = function()
{
var nodes = document.getElementById('menu').childNodes;
for(var i=0;i<nodes.length;i++)
{
if(nodes[i].getElementsByTagName)
{
var allLinks = nodes[i].getElementsByTagName('A');

for(var j=0;j<allLinks.length;j++)
{
var newClass;
(j==0)? newClass = "premier_menu" : newClass = "sous_menu";
allLinks[j].setAttribute('class',newClass);
}
}
}
}

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...