<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="Sheneyan">
<script language="JavaScript" type="text/javascript">
var ns4 = document.layers; //当用户的浏览器是Netscape 4的时候
var ns6 = document.getElementById && !document.all; //当用户的浏览器是Netscape 6的时候
var ie4 = document.all; //当用户的浏览器是 IE 的时候
//设置坐标
var mouseX=0;
var mouseY=0;
/*设置节点类型
参数 obj 是 objectj对象 type 为对象菜单的 状态 open / close
*/
function setNodeType(obj,type){
var c=obj.parentNode; // 令 C 为对象obj的父节点
var s=c.getElementsByTagName("span"); //遍历 c 下面所有的span元素 ,结果是数组,
//下面的这个赋值是猜的。 ||注:这个其实是json||
/* t是一个多维数组
相当于t={left,open,close}
t[left]=[style,text]
t[open]=[style,text]
t[close]=[style,text]
t[left][style]="clsLeaf"
t[left][text]="."
t[open][style]="clsExpand"
t[open][text]="-"
t[close][style]="clsCollapse"
t[close][text]="+"
*/
var t={leaf:{style:"clsLeaf",text:"."},open:{style:"clsExpand",text:"-"},close:{style:"clsCollapse",text:"+"}}
var o=null; //初始化变量 o
if (s&&s[0]){ //遍历C得到的span元素存在 而且 选择第一个span 元素
o=s[0]; // 令变量 o 为遍历 c 得到第一个span 元素
}
else{ // 如果遍历C之后得不到span元素
var o=document.createElement("span"); // 令 o 为新建的一个span 元素
c.insertBefore(o,obj); // insertBefore 为 DOM的方法 在 obj 对象前面插入 O ,并用C代表这个新插入的对象。 }
o.innerHTML=t[type]["text"]; //设置 新插入的对象o的innerHTML 值 即设置菜单前面的 + - .等符号 o.className=t[type]["style"];//设置 新插入的对象o的class名称}
//获取鼠标位置
//分浏览器设置
function moveToMouseLoc(e){
if(ns4||ns6){ // 非IE 浏览器
mouseX = e.pageX;
mouseY = e.pageY;
}
else{ // IE浏览器
mouseX = event.x + document.body.scrollLeft;
mouseY = event.y + document.documentElement.scrollTop;
}
return true;
}
//初始化菜单
//opened:true,默认展开,false,默认收起
function initNav(obj,opened){
if(ns4) document.captureEvents(Event.MOUSEMOVE); //获取鼠标的位置
document.onmousemove = moveToMouseLoc;//获取鼠标的移动事件
var nav=document.getElementById(obj); //令 nav 为对象obj
var navItems=nav.getElementsByTagName("li"); // 令 navItems 为遍历 对象nav 下所有的li元素 结果为 一个数组 长度为li的个数
for (var i=0,c;c=navItems[i];i++){ //对每一个li进行循环操作 并把navItems[i] 赋值给新的变量c
var t=c.getElementsByTagName("ul"); // 令 t 为遍历 c 下所有的ul元素 结果为一数组 长度为c下面的ul 的个数
var a=c.getElementsByTagName("a")[0]; // 获取c 下面 第一个链接 并赋值给 a
if (t.length==0){ // 如果在t的长度为0,意味着在这个 c (LI) 下面没有ul 元素 即:没有 子菜单
setNodeType(a,"leaf") // 设置当前节点的链接的状态 为"leaf"
a.οnmοuseοut=function(){ //设置鼠标移除后的触发的事件
var tipDiv=this.parentNode.getElementsByTagName("div")[0]; //令tipDiv 为当前链接a 的父节点下第一个DIV
if (tipDiv){ //如果存在
tipDiv.style.display='none'; //设置这个DIV的状态为隐藏 意味着提示信息隐藏
}
};
}
else{ //如果 t 的长度不为0 意味着 当前菜单下面还有子菜单
for (var j=0;j<t.length ;j++ ){ //循环操作,遍历每个子菜单
t[j].style.display='none'; // 设置当前子菜单为隐藏状态
}
setNodeType(a,opened?"open":"close"); // 设置菜单的默认状态
a.οnfοcus=function(){this.blur();return true;}// 去掉当前选择的链接的焦点
a.οnmοuseup=function(){ // 当前链接收到单击事件
var t,p;
p=this.parentNode; //获取当前链接的父节点
var t=p.getElementsByTagName("ul")[0]; //获取当前链接父节点下第一个ul (如果有意味着有子菜单)
if (t.style.display=='none'){ //如果这个t是隐藏的
setNodeType(this,"open"); //切换状态 让他处在显示状态
t.style.display='';//确保状态处在显示状态
}
else{//反操作
setNodeType(this,"close"); //如果是显示的,那么隐藏
t.style.display='none';//确保状态处在隐藏
}
return false;
};
//设置菜单的样式
a.οnmοuseοver=function(){// 鼠标经过时候
var t=this.parentNode.getElementsByTagName("ul")[0];//当前链接的父节点下面的第一个ul元素
};
//设置菜单的样式
a.οnmοuseοut=function(){ //鼠标离开的时候
var t=this.parentNode.getElementsByTagName("ul")[0];//当前链接的父节点下面的第一个ul元素
var tipDiv=this.parentNode.getElementsByTagName("div")[0];//当前链接的父节点下面的第一个div元素 (菜单的提示)
if (tipDiv){//如果有这个div (即存在菜单的提示)
tipDiv.style.display='none'; //隐藏菜单的提示
}
};
//设置菜单提示 的样式
a.οnmοusemοve=function(){ //鼠标经过的时候
var tipDiv=this.parentNode.getElementsByTagName("div")[0];//当前链接的父节点下面的第一个div元素
if (tipDiv){ //如果存在
with (tipDiv.style){
display='block';//div的状态处在显示状态
left=parseInt(mouseX)+"px";//提示的div 位置left 点
top=(parseInt(mouseY)+20)+"px";//提示的div 位置top 点
position='absolute';//提示的div 进行绝对定位 }
}
}
}
}
}
//window.οnlοad=initNav("nav",false); // 在页面加载的时候 初始化菜单,默认收起菜单
</script><style type="text/css">
*,html,body{
margin: 0;
padding: 0;
font-size:12px;
font-family:宋体;
}
#nav ul{
list-style: none;
}
#nav li{
padding: 3px 0 0 13px;
}
#nav img{
border:0;
padding:2px 0 0 8px
}
#nav a{
color:#303030;
text-decoration: none;
padding:2px 0 0 2px;
}
#nav li div{
display:none;
position:absolute;
background:#fff;
color:#777;
border:solid 1px;
padding:3px;
}
#nav li div div{display:block;position:static;padding:0;border:0;}
#nav a:hover{
color:blue;
}
img{border:0}
#nav span,span.clsExpand,span.clsCollapse {font-size:9px;color:#ccc;position:relative;display:inline;top:-1px;height:14px;border:solid 1px #ccc;margin:0 5px 0 0;padding:1px 3px!important;padding:1px 3px 0;font-weight:normal;}
#nav span.clsLeaf {font-size:7px;padding:0px 2px 4px 5px!important;padding:0px 2px 3px 5px;top:-3px;}
</style>
</head>
<body οnlοad="initNav('nav',false)">
<div id="nav">
<ul>
<li>
<a href="#">子节点1(有提示)</a>
<div>这是一个提示框,<br/>试试看显示效果</div>
<ul>
<li>
<a href="#">子节点1-1(有提示)</a>
<div>这是第2个提示框,<br/>试试看显示效果</div>
<ul>
<li>
<a href="#">子节点1-1-1</a>
</li>
<li>
<a href="#">子节点1-1-2</a>
</li>
</ul>
</li>
<li>
<a href="#">子节点1-2(有提示)</a>
<div>这是第3个提示框,
<table border="1">
<tr>
<td>
这是一个表格
</td>
<td>
这是一个表格
</td>
</tr>
<tr>
<td>
这是一个表格
</td>
<td>
这是一个表格
</td>
</tr>
</table>
<div>测试内部div</div>
试试看显示效果</div>
<ul>
<li>
<a href="#">子节点1-2-1(有提示)</a>
<div>这是第4个提示框,<br/><strong>试试看</strong>显示效果</div>
<ul>
<li>
<a href="#">子节点1-2-1-1</a>
</li>
<li>
<a href="#">子节点1-2-1-2(有提示)</a>
<div>这是第5个提示框,<br/>试试看显示效果<img src="http://www.blueidea.com/img/common/logo.gif"/></div>
<ul>
<li>
<a href="#">子节点1-2-1-2-1</a>
</li>
<li>
<a href="#">子节点1-2-1-2-2(有提示)</a>
<div>这是第6个提示框,<br/>试试看<h1>显示效</h1>果</div>
<ul><li><a href="#">dasfds</a></li></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
JS实现树菜单源码for IE
最新推荐文章于 2024-09-09 09:35:48 发布