網頁特效代碼模板無憂>網頁特效>菜單導航特效代碼>

一個較酷的層疊式下拉菜單_菜單導航特效

查看演示效果

特效Tag：菜單添加

一個較酷的層疊式下拉菜單,您可以先修改部分代碼再運行.

<script language="JavaScript1.2">

//菜單1的內容

var menu1=new Array()

menu1[0]='<a href=http://typhoon.500.to>首頁</a><br>'

menu1[1]='<a href=link1.htm>鏈接</a><br>'

menu1[2]='<a href=link.htm>鏈接</a><br>'

//菜單2的內容

var menu2=new Array()

menu2[0]='<a href=link.htm>友情鏈接</a><br>'

menu2[1]='<a href=link.htm>語音聊天</a><br>'

menu2[2]='<a href=http://typhoon.500.to>隨意鏈接</a><br>'

</script>

<style>

<!--

.iewrap1{

position:relative;

height:30px;

; font-family: "宋體"; font-size: 9pt}

.iewrap2{

position:absolute;

; font-family: "宋體"; font-size: 9pt}

#dropmenu0, #dropmenu1{

visibility:hide;

z-index:100;

}

#dropmenu0 { font-family: "宋體" ; font-size: 9pt}#dropmenu1 { font-family: "宋體" ; font-size:

9pt}-->

</style>

//以下不要改

var zindex=100

function dropit2(whichone){

if (window.themenu&&themenu.id!=whichone.id)

themenu.style.visibility="hidden"

themenu=whichone

if (document.all){

themenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX

themenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+18

if (themenu.style.visibility=="hidden"){

themenu.style.visibility="visible"

themenu.style.zIndex=zindex++

}

else{

hidemenu()

}

function dropit(e,whichone){

if (window.themenu&&themenu.id!=eval(whichone).id)

themenu.visibility="hide"

themenu=eval(whichone)

if (themenu.visibility=="hide")

themenu.visibility="show"

else

themenu.visibility="hide"

themenu.zIndex++

themenu.left=e.pageX-e.layerX

themenu.top=e.pageY-e.layerY+19

return false

}

function hidemenu(whichone){

if (window.themenu)

themenu.style.visibility="hidden"

}

function hidemenu2(){

themenu.visibility="hide"

}

if (document.all)

document.body.onclick=hidemenu

//以上不要改

</script>

<ilayer height=35px left="65" top="9"> 
<layer visibility=show left="381" top="26"> 
<div align="center"><span id="thpdn5x"    class=iewrap1> <span id="nbjfflf"    class=iewrap2

onClick="dropit2(dropmenu0);event.cancelBubble=true;return false"><font face=宋體><a href="#"

onClick="if(document.layers) return dropit(event, 'document.dropmenu0')">菜單一</a></font> 
  </span> </span> </div>
</layer>

<ilayer height=35px left="473" top="-26"> 
<layer visibility=show left="-234" top="-2"> 
<div align="center"><span id="rfdnz73"    class=iewrap1> <span id="ld5zxn5"    class=iewrap2

onClick="dropit2(dropmenu1);event.cancelBubble=true;return false"><font face=宋體><a href="#"

onClick="if(document.layers) return dropit(event, 'document.dropmenu1')">菜單二</a></font> 
  </span> </span> </div>
</layer>

</ilayer><br>

<div   class="xz5vf5l"   id=dropmenu0

style="position:absolute;left:0;top:0;layer-background-color:#CDECF5;background-color:#CDECF5;wid

th:80;visibility:hidden;border:1px solid black;padding:0px">

if (document.all)

dropmenu0.style.padding="4px"

for (i=0;i<menu1.length;i++)

document.write(menu1[i])

</script>

</div>

if (document.layers){

document.dropmenu0.captureEvents(Event.CLICK)

document.dropmenu0.onclick=hidemenu2

}

</script>

<div   class="53tdnr7"   id=dropmenu1

style="position:absolute;left:0;top:0;layer-background-color:#CDECF5;background-color:#CDECF5;wid

th:80;visibility:hidden;border:1px solid black;padding:0px">

if (document.all)

dropmenu1.style.padding="4px"

for (i=0;i<menu2.length;i++)

document.write(menu2[i])

</script>

</div>

if (document.layers){

document.dropmenu1.captureEvents(Event.CLICK)

document.dropmenu1.onclick=hidemenu2

}

</script>

所屬頻道：菜單導航特效/更新時間：2010-05-23

[收藏][報錯][返回列表]

相關菜單導航特效：

一個較酷的層疊式下拉菜單_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些