一个带渐显特效的弹出菜单

答案：<!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>
<title>一个带渐显特效的弹出菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<STYLE>#iewrap {
	POSITION: relative; HEIGHT: 30px
}
#iewrap2 {
	POSITION: absolute
}
#dropmenu03 {
	FILTER: revealTrans(Duration=1.5,Transition=12)
visibility:hide
}
</STYLE>

</head>
<body>
<TABLE cellSpacing=0 cellPadding=0  align=center border=0>
  <TBODY>
   <TR bgColor=#f2f2f2>
    <TD width=10 bgColor=#f2f2f2>&nbsp;</TD>
    <TD width=100 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="#"><font color=black>展开菜单</font></A></FONT> 
      </SPAN></SPAN></LAYER></ILAYER>
      <SCRIPT language=javascript><!--
var enableeffect=true

//将如下数组修改成你自己的。
var selection=new Array()
selection[0]='<a href="/index.html" class=yellow>Ⅰ 首　　页</a><br>'
selection[1]='<a href="#" class=yellow>Ⅱ 精品插件 </a><br>'
selection[2]='<a href="#" class=yellow>　[1]　Dreamweaver资源</a><br>'
selection[3]='<a href="#" class=yellow>　[2]　Fireworks资源</a><br>'
selection[4]='<a href="#" class=yellow>　[3]　Flash资源</a><br>'
selection[5]='<a href="#" class=yellow>　[4]　Photoshop资源</a><br>'
selection[6]='<a href="#" class=yellow>Ⅲ 免费申请</a><br>'
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></div></td></tr>
</table>

</body>
</html>
上一个：黑色风格的CSS下拉菜单，带阴影和小箭头
下一个：Js+css横向二级导航菜单条--蓝色
更多图片编程知识: