<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ipa-Acn</title>
<style type="text/css">
.menu{ margin-right:18px;}
</style>
<script src="jquery.js"></script>
<script>
var menu = [
[{url:"http://www.baidu.com",name:"baidu",css:"menu"},{url:"http://www.qq.com",name:"qq",css:"menu"}],
[{url:"http://www.google.com",name:"google",css:"menu"},{url:"http://www.taobao.com",name:"taobao",css:"menu"}]
]
function Show(id)
{
var o = document.getElementById("SubMenu");
o.style.visibility='visible';
var list = menu[id];
var str ="";
for(i=0; i<list.length;i++)
{
str += "<a href='"+list[i].url+"' class='"+list[i].css+"' >"+list[i].name+"</a> ";
}
o.innerHTML=str;
}
function Hidden()
{
var o = document.getElementById("SubMenu");
o.style.visibility='hidden';
}
</script>
</head>
<body>
<div onmouseover='Hidden()'>header</div>
<div id="Menu"><a href="#" OnMouseOver="Show(0)">abc</a> <a href="#" OnMouseOver="Show(1)" >kk kkkk</a>
</div>
<div id="SubMenu" style="height:30px; border:solid #FF0000" ></div>
<div onmouseover='Hidden()'>bode</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ipa-Acn</title>
<style type="text/css">
.menu{ margin-right:18px;}
</style>
<script src="jquery.js"></script>
<script>
var menu = [
[{url:"http://www.baidu.com",name:"baidu",css:"menu"},{url:"http://www.qq.com",name:"qq",css:"menu"}],
[{url:"http://www.google.com",name:"google",css:"menu"},{url:"http://www.taobao.com",name:"taobao",css:"menu"}]
]
function Show(id)
{
var o = document.getElementById("SubMenu");
o.style.visibility='visible';
var list = menu[id];
var str ="";
for(i=0; i<list.length;i++)
{
str += "<a href='"+list[i].url+"' class='"+list[i].css+"' >"+list[i].name+"</a> ";
}
o.innerHTML=str;
}
function Hidden()
{
var o = document.getElementById("SubMenu");
o.style.visibility='hidden';
}
</script>
</head>
<body>
<div onmouseover='Hidden()'>header</div>
<div id="Menu"><a href="#" OnMouseOver="Show(0)">abc</a> <a href="#" OnMouseOver="Show(1)" >kk kkkk</a>
</div>
<div id="SubMenu" style="height:30px; border:solid #FF0000" ></div>
<div onmouseover='Hidden()'>bode</div>
</body>
</html>
因为其它的浏览器不支持onmouseleave事件。。所有只能在菜单的周围加上onmouseover的事件用它来隐藏菜单
----lovebanyi lookcode.net
打开新页面的时候希望可以保留 菜单(或子菜单)选中的样式
请删掉 Hidden()函数 并加入以下的代码
function loadMenu()
{
var o = document.getElementById("SubMenu");
var url = document.location.href;
var temp = url.split('/');
var page= temp[temp.length-1].toLowerCase();
for(i=0;i<menu.length;i++)
{
var item = menu[i];
for(j=0;j<item.length;j++)
{
var url = item[j].url.toLowerCase();
if (url==page)
{
item[j].css +=" current";
//alert(item[j].css);
show(i);
return;
}
}
}
}
{
var o = document.getElementById("SubMenu");
var url = document.location.href;
var temp = url.split('/');
var page= temp[temp.length-1].toLowerCase();
for(i=0;i<menu.length;i++)
{
var item = menu[i];
for(j=0;j<item.length;j++)
{
var url = item[j].url.toLowerCase();
if (url==page)
{
item[j].css +=" current";
//alert(item[j].css);
show(i);
return;
}
}
}
}
current 样式是鼠标移过去的样式。
loadMenu请在body中加载
<body onload="loadMenu()">
menu只需要放到 masterpage就可以了