En fait, le code je l'ai trouvé à cette adresse:
[ Lien ]
code de la page contenant le menu
<script language="JavaScript">
var IE=navigator.appName=='Microsoft Internet Explorer';
var NS=navigator.appName=='Netscape';
var Panels=new Array();
var Layers=new Array();
var Menus=new Array();
function Menu(caption, left, top, width, heigh){
this.Index=Menus.length;
Menus[this.Index]=this;
this.Layer=new Layer('<table border=0 cellpadding=0 cellspacing=0><tr><td bgcolor=#9933FF><table border=0 cellpadding=1 height=' + heigh + ' cellspacing=1 width=' + width + '><tr><td bgcolor=#9933FF align=center><a class=MnuCaption href=# onMouseOver="Menus[' + this.Index + '].Click();"> ' + caption + ' </a></td></tr></table></td></tr></table>', left, top);
this.Panel=new Panel(left, top + this.Layer.Height());
this.Click=function(){
if(this.Panel.visible)
this.Panel.Hide();
else
this.Panel.Show();
}
this.Build=function(){
this.Panel.Build();
}
}
function Panel(left, top, parent, item){
this.parent=parent;
this.Index=Panels.length;
this.Item=item;
this.Items=new Array();
this.Panels=new Array();
this.left=left;
this.top=top;
this.visible=false;
Panels[this.Index]=this;
this.AddItem=function(caption, url){
if(url==undefined){
var Index=this.Panels.length;
this.Panels[Index]=new Panel(0, 0, this, this.Items.length);
this.Items[this.Items.length]=new Array(caption + ' <b>»</b>', 'href=# onMouseOver="Panels[' + this.Panels[Index].Index + '].Show();"');
}
else{
this.Items[this.Items.length]=new Array(caption, 'href="' + url + '" target="DEFAUT"');
}
}
this.AddItem1=function(caption, url){
if(url==undefined){
var Index=this.Panels.length;
this.Panels[Index]=new Panel(0, 0, this, this.Items.length);
this.Items[this.Items.length]=new Array(caption + ' <b>»</b>', 'href=# onMouseOver="Panels[' + this.Panels[Index].Index + '].Show();"');
}
else{
this.Items[this.Items.length]=new Array(caption, 'href="' + url + '"');
}
}
this.Build=function(){
var tag='<table border=0 cellpadding=0 cellspacing=0><tr><td bgcolor=black><table border=0 cellpadding=0 cellspacing=1><tr><td bgcolor=white><table border=0 cellpadding=0 cellspacing=1><tr><td bgcolor=#EBEBEB>';
for(var i=0; i < this.Items.length; i++)tag+='<a class=MnuItem ' + this.Items[i][1] + '> ' + this.Items[i][0] + '</a><br>';
tag+='</td></tr></table></td></tr></table></td></tr></table>';
this.Layer=new Layer(tag, this.left, this.top);
this.Layer.Hide();
for(var i=0; i < this.Panels.length; i++)this.Panels[i].Build();
}
this.Show=function(){
for(var i=0; i < Panels.length; i++)Panels[i].Hide();
if(this.parent!=undefined){
this.Layer.Move(this.parent.Layer.Left() + this.parent.Layer.Width(), this.parent.Layer.Top() + (this.Layer.Height() / this.Items.length) * this.Item);
this.parent.Show();
}
this.Layer.Show();
this.visible=this.Layer.visible;
}
this.Hide=function(){
this.Layer.Hide();
for(var i=0; i < this.Panels.length; i++)this.Panels[i].Hide();
this.visible=this.Layer.visible;
}
}
function Layer(tag, left, top){
this.Index=Layers.length;
Layers[this.Index]=this;
this.visible=true;
this.Show=function(){
if(IE)this.Object.style.visibility='visible';
else if(NS)this.Object.visibility='show';
this.visible=true;
}
this.Hide=function(){
if(IE)this.Object.style.visibility='hidden';
else if(NS)this.Object.visibility='hide';
this.visible=false;
}
this.Width=function(){
if(IE)return this.Object.offsetWidth;
else if(NS)return this.Object.clip.width;
}
this.Height=function(){
if(IE)return this.Object.offsetHeight;
else if(NS)return this.Object.clip.height;
}
this.Top=function(){
if(IE)return parseInt(this.Object.style.top);
else if(NS)return this.Object.top;
}
this.Left=function(){
if(IE)return parseInt(this.Object.style.left);
else if(NS)return this.Object.left;
}
this.Move=function(left, top){
if(IE){
this.Object.style.left=left;
this.Object.style.top=top;
}
else if(NS){this.Object.left=left;this.Object.top=top;}
}
if(IE){
document.write('<div id=lay' + this.Index + ' style="position:absolute;left:' + left + 'px;top:' + top + 'px;">' + tag + '</div>');
this.Object=document.all['lay' + this.Index];
}
else if(NS){
document.write('<layer id=lay' + this.Index + ' left=' + left + ' top=' + top + '>' + tag + '</layer>');
this.Object=document.layers['lay' + this.Index];
}
}
</script>
<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<title>Menu</title>
<SCRIPT language="Javascript" src="../../common/js/print.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" src="../../common/js/menu.js"></SCRIPT>
<style type=text/css>
A.MnuCaption{font-family:"Times New Roman", Times, serif;text-decoration:blink;color:#FFFFFF;font-size:12pt; text-align:center;}
A.MnuCaption:HOVER{border-style:none;border-width:0px;}
A.MnuItem{font-family:"Times New Roman", Times, serif;text-decoration:blink;color:black;font-size:12pt; text-align:center;}
A.MnuItem:HOVER{background-color:darkblue;color:white;}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<BODY>
<%
PositionLeft=0
PositionTop=0
%>
<script language=JavaScript>
var Menu3=new Menu('Menu', " <%=PositionLeft%> ", " <%=PositionTop %>", 80, 35);
Menu3.Panel.AddItem('Page2','page2.asp');
Menu3.Panel.AddItem('Page3','page3.asp');
Menu3.Panel.AddItem('Page4','page4.asp');
Menu3.Panel.AddItem('Page5','page5.asp');
Menu3.Build();
</script>
<table cellspacing="0" width="1024">
<tr height="35" bgcolor="#0070B8">
<td width="144" height="35" bgcolor="#9933FF" > </td>
</tr>
</table>
<table cellspacing="0" width="1024">
<tr height="35" bgcolor="#FFAD0C">
<td width="144" height="35" bgcolor="#9900FF" > </td>
</tr>
</table>
</body>
</html>