当前页面: 开发资料首页 → Javascript 专题 → 经典的导航二级式导航菜单增强版,不看不知道!!

经典的导航二级式导航菜单增强版,不看不知道!!

摘要: 经典的导航二级式导航菜单增强版,不看不知道!!

"
}else{ //如果是能构成二级菜单的数据则...
str3=str1[i].split('**') //开始构件二级菜单驱动的显示字符
tdstr.innerHTML="/g,"lshdicstr3")+"')>"+str3[0]+" →" //MOVEOVER时调用二级菜单显示函数MOVESE2,replace是将指定网址中的特殊字符替换为预定字符
}}
cleartime=setTimeout('happydiv.style.display="none";happydiv2.style.display="none"',2000) //一切完毕后加上定时关闭菜单,可选
}
function movese2(menustr2,menuhref2){ //二级菜单的显示函数,menustr2=菜单要显示的文本,menuhref=菜单文本对应的网址
happydiv2.style.display=''; //第一步自然是先显示二级菜单的容器表格
if(cleartime!=1)clearTimeout(cleartime) //第二步自然是清除定时器关闭的设置
happydiv2.style.posLeft=happydiv.offsetLeft+happydiv.offsetWidth; //二级菜单定位"左"
temptop1=event.srcElement.parentElement.parentElement
happydiv2.style.posTop=happydiv.offsetTop+(temptop1.offsetHeight*temptop1.rowIndex) //二级菜单定位"上",根据一级菜单中单个TD的高度*第几个计算
for(i=0;happydiv2.rows.length;i++)happydiv2.deleteRow() //定位完毕,开始显示数据,首先要清除以显示的TD
str3=menustr2.split('**');str4=menuhref2.split('**') //然后分解构成二级菜单的数据
for(i=1;itdstr2=happydiv2.insertRow().insertCell() //在二级菜单中插入<tr><td></td></tr>
tdstr2.innerHTML="')+"'>"+str3[i]+"" //设定具体显示的数据,replace将预定字符替换过来
}
cleartime=setTimeout('happydiv.style.display="none";happydiv2.style.display="none"',2000) //一切完毕后加上定时关闭菜单,可选
}
function over1(){ //一,二级菜单中MOVEOVER事件时使用本函数定义菜单效果
if(event.srcElement.tagName=="TD"){event.srcElement.bgColor='eeeeee';event.srcElement.style.borderTop='1 solid';
event.srcElement.style.borderBottom='1 solid'}else if(event.srcElement.tagName=="FONT"||event.srcElement.tagName=="A"){
event.srcElement.parentElement.bgColor='eeeeee';event.srcElement.parentElement.style.borderTop='1 solid';
event.srcElement.parentElement.style.borderBottom='1 solid'}
}
function out1(){ //一,二级菜单中MOVEOUT事件时使用本函数定义菜单效果
if(event.srcElement.tagName=="TD"){event.srcElement.bgColor='';event.srcElement.style.borderTop='';
event.srcElement.style.borderBottom=''
}else if(event.srcElement.tagName=="FONT"||event.srcElement.tagName=="A"){event.srcElement.parentElement.bgColor='';
event.srcElement.parentElement.style.borderTop='';event.srcElement.parentElement.style.borderBottom=''}
}
function click1(){ //一,二级菜单时CLICK单击事件时使用本函数转到指定网址
if(event.srcElement.tagName=="TD")location.href=event.srcElement.all.tags('A')(0).href
}
function over2(){ //基本的HTML导航栏在MOUSEOVER时使用本函数,设定背景,并清除定时关闭
if(event.srcElement.tagName=="TD"){event.srcElement.bgColor='white';if(cleartime!=1)clearTimeout(cleartime)}
}
function out2(){ //基本的HTML导航栏在MOUSEOUT时使用本函数,设定背景,并加上定时关闭菜单的效果
if(event.srcElement.tagName=="TD"){event.srcElement.bgColor='';
cleartime=setTimeout('happydiv.style.display="none";happydiv2.style.display="none"',500)}
}
function click2(){ //基本的HTML导航栏在CLICK单击时转到的网址,目标网址使用自定义的HTML属性GOTO做目标
location.href=event.srcElement.goto
}
function document.onclick(){ //页面单击时关闭所有菜单
happydiv.style.display='none';happydiv2.style.display='none'
}
</script>
<table id=happydiv style='position:absolute;z-index:5;display:none;cursor:hand;border-top:0;border-bottom:0'onmouseover="over1();clearTimeout(cleartime)"
onmouseout="out1();temp1='none';cleartime=setTimeout('happydiv.style.display=temp1;happydiv2.style.display=temp1',500)"
onclick=click1()>
<tr><td></td></tr>
</table>

</td> </tr> <tr> <td vAlign=top align=left height="100%">
↑返回目录
前一篇: 经典的导航二级式导航菜单完整程序及中文注释,强力推荐
后一篇: vbscript和javascript互相调用方法