Menu, sous-menu, sous-sous-menu.

Bonjour à tous,
Je suis en train de faire un site web avec un menu dynamique en CSS et javascript. En ce moment j'ai réussi à faire en sorte d'avoir un menu déroulant, mais je ne sais pas comment faire pour faire apparaître un sous-menu à mon premier menu déroulant. Voici ce que j'ai de fait :

Dans mon html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<td style="padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px">				  
  <div class="menu" id="oeuvre" onmouseout="focusOut(this)" onmouseover="focusOver(this)" style="text-align: left; padding-right:0px; margin-right:0px">
    <div class="titreMenu itemOut" id="oeuvreTitre">   		
      Titre
    </div>
 
 
    <div class="contenuMenu" id="oeuvreItem">
	<div class="sousmenu" onmouseout="this.className=itemOutContenue" onmouseover="this.className=itemOverContenue"><a href="page1.php" class="sousmenu">Page1</a></div>
	<div class="sousmenu" onmouseout="this.className=itemOutContenue" onmouseover="this.className=itemOverContenue"><a href="page2.php" class="sousmenu">Page2</a></div>
    </div>
  </div>					
</td>

dans mon 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
var timer = null;
var objOut = null;
 
function mouseOut(obj)
{
	var elmt = document.getElementById(obj.id+"Item");
	elmt.style.display = "none";
 
	document.getElementById(obj.id+"Titre").className="titreMenu itemOut";
 
	//instruction a placer a la fin de la fonction
	timer = null;
}
 
function focusOut(obj)
{
	objOut = obj;
	if (timer==null)
	{
		timer = setTimeout("mouseOut(objOut)","150");
	}
}
 
 
function focusOver(obj)
{
	var elmt;
	clearTimeout(timer);
	timer = null;	
 
	elmt = document.getElementById(obj.id+"Item");
	elmt.style.display = "block";
 
	document.getElementById(obj.id+"Titre").className="titreMenu itemOver";	  
 
 
	if (objOut!=obj && objOut!=null)
	{
		mouseOut(objOut);
	}
}

et dans mon CSS :

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
.titreMenu, .contenuMenu, .lienMenu{
color: #000000;
}
 
.contenuMenu{
border: 0px outset #AAAAAA;
width: 140px;
text-align: left;
padding: 7px;  	   
line-height:20px;
letter-spacing:1px; 
}
 
.contenuMenu{
display: none;
position: absolute;
background-color: #f3ab52 ;
}		
 
.itemOverContenue{
background-color: #fdd868;
color: #000000 ;
}
 
.itemOutContenue{
background-color: #f3ab52;
}

J'aimerais par exemple avoir un Sous-Menu qui apparaît à la droit lorsque je passe au dessus de Page 1 ou Page 2.

Pour mon exemple concret: Voir MaximePlante.com

Merci de votre aide

JP

bonjour,

ce code ressemble au menu que je propose dans la galerie CSS.

En ce qui concerne ce menu (si c'est bien un de mes menus) il est limité à 1 niveau. Lors de sa conception, je n'ai jamais réussi à ajouter plusieurs niveaux :oops:
Un membre a bien repris ce script et a ajouté des niveaux, mais il n'a à ce jour il n'a pas posté le script modifié.

Achat de source ! :)

milonic.com, pour 50.00$ ca vaut la peine !!!! Puissant leur menu !

Merci de votre aide