Discussion :

[jimmplan]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Auteur]

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
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é.

[jimmplan]

Achat de source !

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

Merci de votre aide