WEB开发网
开发学院网页设计JavaScript Menu 阅读

Menu

　2007-11-27 17:19:29　来源：WEB开发网　　　
核心提示：<style> body,td,a {font-size:9pt;color:black;text-decoration:none} .normal {padding:2px} .up {padding:1px;border:#999999 1
<style>



body,td,a  {font-size:9pt;color:black;text-decoration:none}



.normal  {padding:2px}



.up  {padding:1px;border:#999999  1px  solid;background:#cccccc}



.down  {padding:1px;border:dbdbdb  1px  solid;background:dbdbdb}



</style>



<body  onmousemove=move()>



<div  style=position:absolute;z-index:1;width:1;height:1;  left:  100;  top:  100  ID=plane  onmousedown=down=true;divleft=event.clientX-parseInt(plane.style.left);divtop=event.clientY-parseInt(plane.style.top)  onmouseup=down=false>　



<table  id=td123  cellspacing=2  width=100  border=0  style=BORDER:#999999  1px  solid;cursor:hand  cellpadding=0  bgcolor=f4f4f4>



<tr>



<td  bgcolor=#cccccc  height=20  style=BORDER:#999999  1px  solid;cursor:move>



<div  align=center>透明的菜单</div>



</td>



</tr>



<tr>



<td  class=normal  onMouseDown=this.className=down



onMouseOver=this.className=up,high(this),menu1.style.visibility=visible  onMouseOut=this.className=normal,low(this),menu1.style.visibility=hidden  style=filter:alpha(opacity=50)onMouseUp=this.className=up  >



<div  align=right>有下级菜单>></div>



</td>



</tr>



<tr>



<td  class=normal  onMouseDown=this.className=down



onMouseOver=this.className=up,high(this),menu2.style.visibility=visible  onMouseOut=this.className=normal,low(this),menu2.style.visibility=hidden  style=filter:alpha(opacity=50)onMouseUp=this.className=up  >



<div  align=right>有下级菜单>></div>



</td>



</tr>



<tr>



<td  class=normal  onMouseDown=this.className=down



onMouseOver=this.className=up,high(this)  onMouseOut=this.className=normal,low(this)  style=filter:alpha(opacity=50)onMouseUp=this.className=up>



<div  align=right>无下级菜单>></div>



</td>



</tr>



<tr>



<td  class=normal  onMouseDown=this.className=down



onMouseOver=this.className=up,high(this)  onMouseOut=this.className=normal,low(this)  style=filter:alpha(opacity=50)onMouseUp=this.className=up>



<div  align=right>无下级菜单>></div>



</td>



</tr>



</table>



<script  language=JavaScript>



<!--



function  flashit(){



if  (!document.all)



return



if  (td123.style.borderColor==#666666)



td123.style.borderColor=#999999



else



td123.style.borderColor=#666666



}



setInterval(flashit(),  500)



//-->



</script>



<script  language=javascript>



<!--



function  high(image)



{



theobject=image



highlighting=setInterval  (highlightit(theobject),100)



}



function  low(image)



{



clearInterval(highlighting)



image.filters.alpha.opacity=50



}



function  highlightit(cur2)



{



if  (cur2.filters.alpha.opacity<100)



cur2.filters.alpha.opacity+=20



else  if  (window.highlighting)



clearInterval  (highlighting)



}



//-->



</script>



<script>



var  over=false,down=false,divleft,divtop;



function  move(){



if(down){



plane.style.left=event.clientX-divleft;



plane.style.top=event.clientY-divtop;



}



}



</script>



　  <div  id=menu2  style=position:absolute;top:45px;left:96;  z-index:1;  visibility:  hidden;  width:  105



onMouseOver=this.style.visibility=visible



onMouseOut=this.style.visibility=hidden>　



　　　  <table  cellspacing=2  width=100  border=0  style=BORDER:#999999  1px  solid;cursor:hand  cellpadding=0  bgcolor=f4f4f4  align=right>



　　　　　  <tr>　



　　　　　　　  <td  class=normal  onMouseDown=this.className=down



onMouseOver=this.className=up,high(this)  onMouseOut=this.className=normal,low(this)  style=filter:alpha(opacity=50)onMouseUp=this.className=up>　



　　　　　　　　　  <div  align=center>子菜单</div>



　　　　　　　  </td>



　　　　　  </tr>



　　　　　  <tr>　



　　　　　　　  <td  class=normal  onMouseDown=this.className=down



onMouseOver=this.className=up,high(this)  onMouseOut=this.className=normal,low(this)  style=filter:alpha(opacity=50)onMouseUp=this.className=up>　



　　　　　　　　　  <div  align=center>子菜单</div>



　　　　　　　  </td>



　　　　　  </tr>



　　　　　  <tr>　



　　　　　　　  <td  class=normal  onMouseDown=this.className=down



onMouseOver=this.className=up,high(this)  onMouseOut=this.className=normal,low(this)  style=filter:alpha(opacity=50)onMouseUp=this.className=up>　



　　　　　　　　　  <div  align=center>子菜单</div>



　　　　　　　  </td>



　　　　　  </tr>



　　　　　  <tr>　



　　　　　　　  <td  class=normal  onMouseDown=this.className=down



onMouseOver=this.className=up,high(this)  onMouseOut=this.className=normal,low(this)  style=filter:alpha(opacity=50)onMouseUp=this.className=up>　



　　　　　　　　　  <div  align=center>子菜单</div>



　　　　　　　  </td>



　　　　　  </tr>



　　　  </table>



　  </div>



　  <div  id=menu1  style=position:absolute;top:24px;left:96px;  z-index:1;  visibility:  hidden;  width:  105



onMouseOver=this.style.visibility=visible



onMouseOut=this.style.visibility=hidden>　



　　　  <table  cellspacing=2  width=100  border=0  style=BORDER:#999999  1px  solid;cursor:hand  cellpadding=0  bgcolor=f4f4f4  align=right>



　　　　　  <tr>　



　　　　　　　  <td  class=normal  onMouseDown=this.className=down



onMouseOver=this.className=up,high(this)  onMouseOut=this.className=normal,low(this)  style=filter:alpha(opacity=50)onMouseUp=this.className=up>　



　　　　　　　　　  <div  align=center>子菜单</div>



　　　　　　　  </td>



　　　　　  </tr>



　　　　　  <tr>　



　　　　　　　  <td  class=normal  onMouseDown=this.className=down



onMouseOver=this.className=up,high(this)  onMouseOut=this.className=normal,low(this)  style=filter:alpha(opacity=50)onMouseUp=this.className=up>　



　　　　　　　　　  <div  align=center>子菜单</div>



　　　　　　　  </td>



　　　　　  </tr>



<tr>　



<td  class=normal  onMouseDown=this.className=down



onMouseOver=this.className=up,high(this)  onMouseOut=this.className=normal,low(this)  style=filter:alpha(opacity=50)onMouseUp=this.className=up>　



<div  align=center>子菜单</div>



</td>



</tr>



<tr>　



<td  class=normal  onMouseDown=this.className=down



onMouseOver=this.className=up,high(this)  onMouseOut=this.className=normal,low(this)  style=filter:alpha(opacity=50)onMouseUp=this.className=up>　



<div  align=center>子菜单</div>



</td>



</tr>



</table>



</div>



</div>

Tags：Menu

编辑录入：coldstar　[复制链接] [打 印]
更多精彩
赞助商链接

热点阅读
焦点图片
最新推荐
精彩阅读