11548 sujets

JavaScript, DOM et API Web HTML5

Plusieurs menu verticaux

Bonjour à tous,

Je voudrais mettre plusieurs menu verticaux, sur une même page.

Je me base sur ce menu : http://www.ibilab.net/webdev/articles/CSS/creer-menus-cascade-simple-4.htm.

Et je voudrais qu'à l'ouverture de la page, tous ces menus soient cachés, et que le survol sur un élément m'en affiche un et qu'il disparaisse entièrement après utilisation.

On en revient quasiment au principe d'un menu dynamique horizontal mais qui dans mon cas ne convient pas.

Une idée?
Je ne suis pas sûr de bien comprends ton problème. Tu veux que ça soit les sous-menus qui soient cachés ou tu veux faire plusieurs menus mais qui n'apparaissent qu'au survol d'un élément (un élément pour activer un menu à chaque fois).
Dans le premier cas, il te suffit de suivre les indications de ton lien.
Dans le deuxième cas, il va falloir faire un bout de javascript comme ça :

<script>
window.onload = cache;
function cache()
{
	for (i=1; i<4; i++)
	{
		CurrentMenu = document.getElementById("menu"+i);
		CurrentMenu.style.display = 'none';
	}
}
function afficheMenu(j)
{
	cache();
	MyMenu = document.getElementById("menu"+j);
	MyMenu.style.display = 'block';	
}
</script>
<style>
#menu1 {background-color:red; width:100px;}
#menu2 {background-color:blue; width:100px;}
#menu3 {background-color:green; width:100px;}
</style>
</head>

<body>
<p onmouseover="afficheMenu(1)">pointer sur ce paragraphe affichera le menu1</p>
<ul id="menu1">
  <li><a href="#">lien1</a></li>
  <li><a href="#">lien2</a></li>
  <li><a href="#">lien3</a></li>
</ul>

<p onmouseover="afficheMenu(2)">pointer sur ce paragraphe affichera le menu2</p>
<ul id="menu2">
  <li><a href="#">lien1</a></li>
  <li><a href="#">lien2</a></li>
  <li><a href="#">lien3</a></li>
</ul>

<p onmouseover="afficheMenu(3)">pointer sur ce paragraphe affichera le menu3</p>
<ul id="menu3">
  <li><a href="#">lien1</a></li>
  <li><a href="#">lien2</a></li>
  <li><a href="#">lien3</a></li>
</ul>
</body>


Par contre, ce qui m'impressionne dans le lien que tu donnes est que le menu à gauche reste toujours fixe quand on déscend dans la page et ceci sans javascript. Sais-tu comment c'est fait ?
Merci pour ta réponse Smiley cligne

C'était bien le 2ème problème.

Ton code fonctionne mais il me reste le problème suivant :

lorsqu'on sort du menu, celui-ci ne disparait pas, sauf si on va sur un autre élément. Je cherche dans cette voie Smiley smile

Pour mon lien, je ne sais pas comment c'est fait Smiley biggol
Sujet clos
Aller à