102、菜单展开效果

102、菜单展开效果

脚本说明:

把如下代码加入<body>区域中:

<STYLE>#iewrap {

       POSITION: relative; HEIGHT: 30px

}

#iewrap2 {

       POSITION: absolute

}

#dropmenu03 {

       FILTER: revealTrans(Duration=1.5,Transition=12)

visibility:hide

}

</STYLE>

<TABLE cellSpacing=0 cellPadding=0 width=600 align=center border=0>

  <TBODY>

   <TR bgColor=#f2f2f2>

    <TD width=10 bgColor=#f2f2f2> </TD>

    <TD width=590 bgColor=#f2f2f2><ILAYER id=dropmenu01 height="20"><LAYER

      id=dropmenu02 height="20" visibility="show"><SPAN id=iewrap><SPAN

      id=iewrap2 style="WIDTH: 100px; TOP: 10px"

      onclick="dropit2();event.cancelBubble=true;return false"><FONT face=宋体><A

      class=red

      href="http://www.1studio.net/html/example/0019/0019.htm#">壹号工作室导航</A></FONT>

      </SPAN></SPAN></LAYER></ILAYER>

      <SCRIPT language=javascript><!--

var enableeffect=true

 

//将如下数组修改成你自己的。

var selection=new Array()

selection[0]='<a href="/index.asp" class=yellow> 首  页</a><br>'

selection[1]='<a href="/web.asp" class=yellow> 精品插件 </a><br>'

selection[2]='<a href="/dreamweaver/index.asp" class=yellow> [1] Dreamweaver资源</a><br>'

selection[3]='<a href="/fireworks/index.asp" class=yellow> [2] Fireworks资源</a><br>'

selection[4]='<a href="/flash/index.asp" class=yellow> [3] Flash资源</a><br>'

selection[5]='<a href="/photoshop/index.asp" class=yellow> [4] Photoshop资源</a><br>'

selection[6]='<a href="/free/index.asp" class=yellow> 免费申请</a><br>'

selection[7]='<a href="/free/count/index.asp" class=yellow> [1] 免费计数器申请</a><br>'

selection[8]='<a href="/free/guestbook/index.asp" class=yellow> [2] 免费留言板申请</a><br>'

selection[9]='<a href="/free/vote/index.asp" class=yellow> [3] 免费网上调查申请</a><br>'

selection[10]='<a href="/technic.asp" class=yellow> 酷站源码</a><br>'

selection[11]='<a href="/html/index.asp" class=yellow> [1] HTML特效</a><br>'

selection[12]='<a href="/asp/index.asp" class=yellow> [2] ASP源程序下载</a><br>'

selection[13]='<a href="/xml/index.asp" class=yellow> [3] XML方面</a>'

 

if (document.layers)

document.dropmenu01.document.dropmenu02.visibility='show'

 

function dropit2(){

if (document.all){

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

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

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

if (enableeffect)

dropmenu03.filters.revealTrans.apply()

dropmenu03.style.visibility="visible"

if (enableeffect)

dropmenu03.filters.revealTrans.play()

}

else{

hidemenu()

}

}

}

 

function dropit(e){

if (document.dropmenu03.visibility=="hide")

document.dropmenu03.visibility="show"

else

document.dropmenu03.visibility="hide"

document.dropmenu03.left=e.pageX-e.layerX

document.dropmenu03.top=e.pageY-e.layerY+19

return false

}

 

function hidemenu(){

if (enableeffect)

dropmenu03.filters.revealTrans.stop()

dropmenu03.style.visibility="hidden"

}

 

function hidemenu2(){

document.dropmenu03.visibility="hide"

}

 

if (document.layers){

document.dropmenu01.document.dropmenu02.captureEvents(Event.CLICK)

document.dropmenu01.document.dropmenu02.onclick=dropit

}

else if (document.all)

document.body.onclick=hidemenu

 

 

//-->

 

 

</SCRIPT>

<DIV id=dropmenu03

      style="BORDER-RIGHT: #000000 1px; PADDING-RIGHT: 0px; BORDER-TOP: #000000 1px; PADDING-LEFT: 0px; LEFT: 10px; VISIBILITY: hidden; PADDING-BOTTOM: 0px; BORDER-LEFT: #000000 1px; WIDTH: 150px; PADDING-TOP: 0px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #7285cf; layer-background-color: 7285CF">

      <SCRIPT language=JavaScript1.2>

if (document.all)

dropmenu03.style.padding='6px'

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

document.write(selection[i])

</SCRIPT>

</DIV>

<SCRIPT language=JavaScript1.2>

if (document.layers){

document.dropmenu03.captureEvents(Event.CLICK)

document.dropmenu03.onclick=hidemenu2

}

</SCRIPT>

 

Write a comment

Comments: 0