这是我一年前写的js菜单demo，对js语法不太熟悉。想封装起来，但不知道怎么弄。而且仅支持IE，谁有兴趣拿去改改吧。：)


////////////////////////////////////////////////////////////向右划出
function slideRightOut(menu)
{
function slideRightOut_(menu)
{
if(parseInt(menu.content.style.marginLeft) < 0-20)
{
menu.content.style.marginLeft = parseInt(menu.content.style.marginLeft)+20;
menu.timeout = setTimeout(function(){slideRightOut_(menu);},50);
}
else
{
menu.content.style.marginLeft = 0;
menu.length = null;
menu.moving = false;
}
} var point = fGetXY(menu.parentItem);
menu.div.style.pixelLeft = point.x + menu.parentItem.offsetWidth;
menu.div.style.pixelTop = point.y;
menu.div.style.display = '';
menu.content.style.width = menu.div.style.width;
menu.content.style.height = menu.div.style.height;
menu.length = parseInt(menu.div.style.width);
if(menu.content.style.marginLeft=='')menu.content.style.marginLeft = -menu.length;
clearTimeout(menu.timeout);
slideRightOut_(menu);
}
////////////////////////////////////////////////////////////向左划入
function slideLeftIn(menu)
{
function slideLeftIn_(menu)
{
if(parseInt(menu.content.style.marginLeft) > -menu.length+20)
{
menu.content.style.marginLeft = parseInt(menu.content.style.marginLeft)-20;
menu.timeout = setTimeout(function(){slideLeftIn_(menu);},50);
}
else
{
menu.content.style.marginLeft = -menu.length;
menu.content.parentNode.style.display='none';
menu.length = null;
menu.moving = false;
}
}

if(menu.div.style.display=='')
{
menu.length = parseInt(menu.div.style.width);
clearTimeout(menu.timeout);
for(var i=0;i<menu.children.length;i++)
{
slideLeftIn(menu.children[i]);
}
menu.moving = true;
slideLeftIn_(menu);
}
}
////////////////////////////////////////////////////////////向左划出
function slideLeftOut(menu)
{
function slideLeftOut_(menu)
{
if(parseInt(menu.content.style.marginLeft) > 0+20)
{
menu.content.style.marginLeft = parseInt(menu.content.style.marginLeft)-20;
menu.timeout = setTimeout(function(){slideLeftOut_(menu);},50);
}
else
{
menu.content.style.marginLeft = 0;
menu.length = null;
}
} var point = fGetXY(menu.parentItem);
menu.div.style.pixelLeft = point.x - parseInt(menu.div.style.width);
menu.div.style.pixelTop = point.y;
menu.div.style.display = '';
menu.content.style.width = menu.div.style.width;
menu.content.style.height = menu.div.style.height;
menu.length = parseInt(menu.div.style.width);
if(menu.content.style.marginLeft=='')menu.content.style.marginLeft = menu.length + menu.length;
clearTimeout(menu.timeout);
slideLeftOut_(menu);
}
////////////////////////////////////////////////////////////向右划入
function slideRightIn(menu)
{
function slideRightIn_(menu)
{
if(parseInt(menu.content.style.marginLeft) < menu.length + menu.length - 20)
{
menu.content.style.marginLeft = parseInt(menu.content.style.marginLeft)+20;
menu.timeout = setTimeout(function(){slideRightIn_(menu);},50);
}
else
{
menu.content.style.marginleft = menu.length + menu.length;
menu.div.style.display='none';
menu.length = null;
menu.moving = false;
}
}

if(menu.div.style.display=='')
{
menu.length = menu.length = parseInt(menu.div.style.width);
clearTimeout(menu.timeout);
menu.moving = true;
slideRightIn_(menu);
}
}</script><script defer="true">
var m1 = new Menu('menu1','r1',true);
var m1_2 = new Menu('menu1_2','item1_2',false);
var m1_3 = new Menu('menu1_3','item1_3',false);
var m1_3_3 = new Menu('menu1_3_3','item1_3_3',false);
var m1_3_3_4 = new Menu('menu1_3_3_4','item1_3_3_4',false);
</script>
</head><body>
<table width="400" border="1" cellpadding="1" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#0099FF">
  <tr>
    <td id="r1">菜单一</td>
    <td id="r2">菜单二</td>
    <td id="r3">菜单三</td>
    <td id="r4">菜单四</td>
  </tr>
</table><div id="menu1" style="display:none;position:absolute;overflow:hidden;width:120px;height:150px;" >
<div style="background:#cccccc; left:0px; top:0px;">
<table width="120" height="100%" border="0" cellpadding="0" cellspacing="1" class="menu_tb">
  <tr>
<td id="item1_1">子菜单一</td>
  </tr>
  <tr>
<td id="item1_2"><span style="float:left">子菜单二</span><span style="float:right">&gt;&gt;&nbsp;</span></td>
  </tr>
  <tr>
<td id="item1_3"><span style="float:left">子菜单三</span><span style="float:right">&gt;&gt;&nbsp;</span></td>
  </tr>
  <tr>
<td id="item1_4">子菜单四</td>
  </tr>
  <tr>
<td id="item1_5">子菜单五</td>
  </tr>
  <tr>
<td id="item1_6">子菜单六</td>
  </tr>
</table>
</div>
</div><div id="menu1_2" style="display:none;position:absolute;overflow:hidden;width:120px;height:75px;" >
<div style="background:#cccccc; left:0px; top:0px;">
<table width="120" height="100%" border="0" cellpadding="0" cellspacing="1" class="menu_tb">
  <tr>
<td id="item1_2_1">子菜单一</td>
  </tr>
  <tr>
<td id="item1_2_2">子菜单二</td>
  </tr>
  <tr>
<td id="item1_2_3">子菜单三</td>
  </tr>
</table>
</div>
</div><div id="menu1_3" style="display:none;position:absolute;overflow:hidden;width:120px;height:100px;" >
<div style="background:#cccccc; left:0px; top:0px;">
<table width="120" height="100%" border="0" cellpadding="0" cellspacing="1" class="menu_tb">
  <tr>
<td id="item1_3_1">子菜单一</td>
  </tr>
  <tr>
<td id="item1_3_2">子菜单二</td>
  </tr>
  <tr>
<td id="item1_3_3"><span style="float:left">子菜单三</span><span style="float:right">&gt;&gt;&nbsp;</span></td>
  </tr>
  <tr>
<td id="item1_3_4">子菜单四</td>
  </tr>
</table>
</div>
</div><div id="menu1_3_3" style="display:none;position:absolute;overflow:hidden;width:120px;height:100px;" >
<div style="background:#cccccc; left:0px; top:0px;">
<table width="120" height="100%" border="0" cellpadding="0" cellspacing="1" class="menu_tb">
  <tr>
<td id="item1_3_3_1">子菜单一</td>
  </tr>
  <tr>
<td id="item1_3_3_2">子菜单二</td>
  </tr>
  <tr>
<td id="item1_3_3_3">子菜单三</td>
  </tr>
  <tr>
<td id="item1_3_3_4"><span style="float:left">子菜单四</span><span style="float:right">&gt;&gt;&nbsp;</span></td>
  </tr>
</table>
</div>
</div><div id="menu1_3_3_4" style="display:none;position:absolute;overflow:hidden;width:120px;height:50px;" >
<div style="background:#cccccc; left:0px; top:0px;">
<table width="120" height="100%" border="0" cellpadding="0" cellspacing="1" class="menu_tb">
  <tr>
<td id="item1_3_3_4_1">子菜单一</td>
  </tr>
  <tr>
<td id="item1_3_3_4_2">子菜单二</td>
  </tr>
</table>
</div>
</div></body>
</html>
[/code]