87,907
社区成员
发帖
与我相关
我的任务
分享
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
body,td,th {
font-size: 12px;
}
.menu_tb
{
background:#000000;
}
.menu_tb TD
{
background:#CCCCCC;
}
-->
</style>
<script language="javascript" defer="true">
//定义二维坐标
function Point(iX, iY){
this.x = iX;
this.y = iY;
}
//计算一个元素的绝对坐标
function fGetXY(aTag){
var oTmp = aTag;
var pt = new Point(0,0);
do {
pt.x += oTmp.offsetLeft;
pt.y += oTmp.offsetTop;
oTmp = oTmp.offsetParent;
} while(oTmp.tagName!="BODY");
return pt;
}
//检测是否超出菜单区域
function checkOutBound(obj){
if(obj.style.display=='none')return true;
with (obj.style){
var l = pixelLeft
var t = pixelTop;
var r = l + pixelWidth;
var b = t + pixelHeight;
return (event.clientX>r)||(event.clientX<l)||(event.clientY>b)||(event.clientY<t);
}
}
////////////////////////////////////////////////////////////定义菜单对象
function Menu(divID,parentItemID,isRoot)
{
this.timeout = null;
this.length = null;
this.parentMenu = null
this.parentItem = null;
this.div = null;
this.content = null;
this.moving = false;
this.children = [];
this.activeChild = null;
this.slideDirection = 'right';
this.mouseOverCSSClass = null;
this.mouseOutCSSClass = null;
{
this.div = document.getElementById(divID);
this.div.menu = this;
this.content = this.div.childNodes[0];
this.parentItem = document.getElementById(parentItemID);
if( !isRoot )
{
this.parentMenu = this.parentItem.parentNode.parentNode.parentNode.parentNode.parentNode.menu;
this.parentMenu.children[this.parentMenu.children.length] = this;
this.slideDirection = this.parentMenu.slideDirection;
}
var tr = this.content.childNodes[0].childNodes[0].childNodes;
for(var i=0;i<tr.length;i++)
{
var td = tr[i].childNodes[0];
td.attachEvent('onmouseover',
function(obj)
{
return function(){obj.style.backgroundColor='#999999';}
}(td)
);
td.attachEvent('onmouseout',
function(obj)
{
return function(){obj.style.backgroundColor='';}
}(td)
);
}
if(!isRoot)
{
this.parentItem.attachEvent('onmouseover',
function(obj)
{
return function()
{
obj.parentMenu.activeChild = obj;
slideOut(obj);
}
}(this)
);
this.parentItem.attachEvent('onmouseout',
function(obj)
{
return function()
{
if(checkOutBound(obj.div))slideIn(obj);
}
}(this)
);
}
else
{
this.parentItem.attachEvent('onmouseover',
function(obj)
{
return function()
{
slideDownOut(obj);
}
}(this)
);
this.parentItem.attachEvent('onmouseout',
function(obj)
{
return function()
{
if(checkOutBound(obj.div))slideUpIn(obj);
}
}(this)
);
}
this.div.attachEvent('onmouseleave',
function(obj)
{
return function()
{
if(checkOutBound(obj.parentItem) && (obj.activeChild==null || checkOutBound(obj.activeChild.div)) )
{
var o = obj;
while(o.parentMenu)
{
slideIn(o);
o = o.parentMenu;
if(!checkOutBound(o.div))
{
return;
}
}
slideUpIn(o);
}
}
}(this)
);
}
}
////////////////////////////////////////////////////////////划出
function slideOut(menu)
{
if(menu.parentMenu!=null && menu.parentMenu.moving==true)return;
menu.moving = true;
var point = fGetXY(menu.parentItem);
if(menu.slideDirection == 'right')
{
if( point.x + menu.parentItem.offsetWidth + parseInt(menu.div.style.width) > parseInt(document.body.clientWidth) + parseInt(document.body.leftMargin) )
{
menu.slideDirection = 'left';
slideLeftOut(menu);
}
else
{
menu.slideDirection = 'right';
slideRightOut(menu);
}
}
else if(menu.slideDirection == 'left')
{
if( point.x - parseInt(menu.div.style.width) < 0 )
{
menu.slideDirection = 'right';
slideRightOut(menu);
}
else
{
menu.slideDirection = 'left';
slideLeftOut(menu);
}
}
}
////////////////////////////////////////////////////////////划入
function slideIn(menu)
{
if(menu.slideDirection == 'left')
{
slideRightIn(menu);
}
else
{
slideLeftIn(menu);
}
}
////////////////////////////////////////////////////////////向下划出
function slideDownOut(menu)
{
if(menu.parentMenu!=null && menu.parentMenu.moving==true)return;
menu.moving = true;
function slideDownOut_(menu)
{
if(parseInt(menu.content.style.marginTop) < 0-20)
{
menu.content.style.marginTop = parseInt(menu.content.style.marginTop)+20;
menu.timeout = setTimeout(function(){slideDownOut_(menu);},50);
}
else
{
menu.content.style.marginTop = 0;
menu.length = null;
menu.moving = false;
}
}
var point = fGetXY(menu.parentItem);
menu.div.style.pixelLeft = point.x;
menu.div.style.pixelTop = point.y + menu.parentItem.offsetHeight + 2;
menu.div.style.display = '';
menu.content.style.width = menu.div.style.width;
menu.content.style.height = menu.div.style.height;
menu.length = menu.div.style.pixelHeight;
if(menu.content.style.marginTop=='')menu.content.style.marginTop = -menu.length;
clearTimeout(menu.timeout);
slideDownOut_(menu);
}
////////////////////////////////////////////////////////////向上划入
function slideUpIn(menu)
{
function slideUpIn_(menu)
{
if(parseInt(menu.content.style.marginTop) > -menu.length+20)
{
menu.content.style.marginTop = parseInt(menu.content.style.marginTop)-20;
menu.timeout = setTimeout(function(){slideUpIn_(menu);},50);
}
else
{
menu.content.style.marginTop = -menu.length;
menu.div.style.display='none';
menu.length = null;
menu.moving = false;
}
}
if(menu.div.style.display=='')
{
menu.length = menu.div.style.pixelHeight;
clearTimeout(menu.timeout);
for(var i=0;i<menu.children.length;i++)
{
slideLeftIn(menu.children[i]);
}
menu.moving = true;
slideUpIn_(menu);
}
}
////////////////////////////////////////////////////////////向右划出
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">>> </span></td>
</tr>
<tr>
<td id="item1_3"><span style="float:left">子菜单三</span><span style="float:right">>> </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">>> </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">>> </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>