11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Un menu sans lien "fictif"

Bonjour à tous!

Je cherche à réaliser un menu dont les sous-menus se cache ou s'affiche en cliquant dessus. Pour le moment, je suis arrivé au résultat escompté mais d'une façon qui ne me satisfait pas.

En effet, je suis obligé d'avoir dans mon menu des liens "fictif" (dans l'exemple ci dessou, cela correspond aux lien avec un href="#") pour permettre à l'utilisateur de cliquer dessus. Ce qui est du plus mauvais effet quand l'utilisateur n'a pas activé le javascript ...

J'ai pensé à créé ces lien "fictifs" directement dans le javascript mais je bloque ... n'étant pas très familiarisé avec le javascript Smiley sweatdrop . Comment puis je faire cela?

Sachant que j'arrive à manipuler le dom pour ajouter/effacer des noeuds, mon problème étant plus d'ajouter un noeud qui contient des noeuds déjà existant.

En espérant que je suis assé clair, merci d'avance pour toutes pistes et/ou solutions Smiley lol

Voici le code javascript (récupéré sur ce même forum sur un poste de Gatsu35):

function DynamMenu(IdMenu)
{
	//test de compatibilité
	if(!document.getElementsByTagName || !document.getElementById)
		return false; 

	var Menu = document.getElementById(IdMenu); //On récupère le menu
	var li = Menu.getElementsByTagName('LI'); //On récupère tous les LI du menu

	for(var ii=0; ii<li.length-1; ++ii)
	{
		//On scanne tous les LI
		var sousUL = li[ii].getElementsByTagName('UL'); //Pour chaque LI on recupère le UL dessous
		if (sousUL[0])
		{
			//On vérifié qu'il y a un UL dans le LI
			sousUL[0].id = IdMenu + ii; //On met un ID à ce UL
			sousUL[0].style.display = "none";
			li[ii].getElementsByTagName('A')[0].href= "javascript:ShowHideMenu('" + IdMenu + ii + "')";
		}  
	}
}

window.onload = init;

function ShowHideMenu(MenuId)
{
	var SousMenu = document.getElementById(MenuId);
	if (SousMenu.style.display=='block' || SousMenu.style.display == null)
	{
		SousMenu.style.display = 'none'; //ON cache le sous menu
	}
	else
	{ 
		SousMenu.style.display = 'block'; //On affiche le sous menu
	}
}

function init()
{
	DynamMenu("menu");
}


et le code XHTML:

<ul id="menu">
	<li><a href="#">Lib 1 CLICK</a>
		<ul>
			<li class="actif"><strong><a href="unLien">Lib 1.0</a></strong></li>
			<li><a href="unLien">Lib 1.1</a></li>
		</ul>
	</li>
	<li><a href="#">Lib 2 CLICK</a>
		<ul>
			<li><a href="unLien">Lib 2.0</a></li>
			<li><a href="unLien">Lib 2.1</a></li>
			<li><a href="#">Lib 2.2 CLICK</a>
				<ul>
					<li><a href="unLien">Lib 2.2.0</a></li>
					<li><a href="unLien">Lib 2.2.1</a></li>
				</ul>
			</li>
			<li><a href="unLien">Lib 2.3</a></li>
			<li><a href="unLien">Lib 2.4</a></li>
			<li><a href="unLien">Lib 2.5</a></li>
			<li><a href="unLien">Lib 2.6</a></li>
		</ul>
	</li>
	<li><a href="#">Lib 3 CLICK</a>
		<ul>
			<li><a href="unLien">Lib 3.0</a></li>
		</ul>
	</li>
</ul>

Modifié par Francois44 (12 Dec 2006 - 15:27)
En fait, je cherche à éviter les liens qui ne font rien dans la structure XHTML de mon menu. Et de les créer à la volé via mon code JavaScript.

A partir de ça:

<ul id="menu">
	<li>>Lib 1 CLICK
		<ul>
			<li class="actif"><strong><a href="unLien">Lib 1.0</a></strong></li>
			<li><a href="unLien">Lib 1.1</a></li>
		</ul>
	</li>
	<li>Lib 2 CLICK
		<ul>
			<li><a href="unLien">Lib 2.0</a></li>
			<li><a href="unLien">Lib 2.1</a></li>
			<li>Lib 2.2 CLICK
				<ul>
					<li><a href="unLien">Lib 2.2.0</a></li>
					<li><a href="unLien">Lib 2.2.1</a></li>
				</ul>
			</li>
		</ul>
	</li>
</ul>


je voudrais obtenir ça (via du code JavaScript)

<ul id="menu">
	<li>><a href="#">Lib 1 CLICK</a>
		<ul>
			<li class="actif"><strong><a href="unLien">Lib 1.0</a></strong></li>
			<li><a href="unLien">Lib 1.1</a></li>
		</ul>
	</li>
	<li><a href="#">Lib 2 CLICK</a>
		<ul>
			<li><a href="unLien">Lib 2.0</a></li>
			<li><a href="unLien">Lib 2.1</a></li>
			<li><a href="#">Lib 2.2 CLICK</a>
				<ul>
					<li><a href="unLien">Lib 2.2.0</a></li>
					<li><a href="unLien">Lib 2.2.1</a></li>
				</ul>
			</li>
		</ul>
	</li>
</ul>
Nickel!!!

Il y a quelques adaptations pour en faire ce que je veux (gestion de plusieurs niveaux)mais c'est une très bonne base.

Merci koala64 Smiley biggrin
Sujet clos
Aller à