<style>/* 先把这个 xmenu 的样式放到css里 */.xmenu td{font-size:12px;font-family:verdana,arial;font-weight:bolder;color:#ffffff;border:1px solid #336699;background:#336699;filter:blendtrans(duration=0.5);cursor:hand;text-align:center;}</style> <script>/* http://lexrus.blueidea.com 这是把事件动作绑定到菜单上的函数*/function attachXMenu(objid){ var tds=objid.getElementsByTagName('td'); for(var i=0;i<tds.length;i++){ with(tds[i]){ onmouseover=function(){ with(this){ filters[0].apply(); style.background='#66CCFF'; //这是鼠标移上去时的背景颜色 style.border='1px solid #ffffff'; //边框 style.color='black'; //文字颜色 filters[0].play(); } } onmouseout=function(){ with(this){ filters[0].apply(); style.background='#336699'; //这是鼠标离开时的背景颜色 style.border='1px solid #336699'; //边框 style.color='#ffffff'; //文字颜色 filters[0].play(); } } } }}</script> <!--菜单从这里开始, 注意要把class设置成和css里相同的, 还要为它设一个id--><table class="xmenu" id="xmenu0" width="500" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center"> <tr> <td><a href="http://www.lenvo.cn/">www.lenvo.cn</a></td> <td>Name</td> <td>Is</td> <td>LeX</td> <td>Rus</td> <td>!!!</td> </tr></table> <script>attachXMenu(xmenu0); //在上面这个table结束的地方执行事件动作的绑定, 这里的这个xmenu0就是那个table的id</script><br><br><br><br><!--下面这个是竖排的--><table class="xmenu" id="xmenu1" width="100" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center"> <tr><td>My</td></tr> <tr><td>Name</td></tr> <tr><td>Is</td></tr> <tr><td>LeX</td></tr> <tr><td>Rus</td></tr> <tr><td>!!!</td></tr></table><script>attachXMenu(xmenu1);</script>

　　推荐阅读

　　Javascript调用XML制作连动下拉列表框

传统的HTML页面中连动下拉框采用了两种方法：1）直接将下拉框中的内容hardcode于html的javascript中，调用javascript函数循环写入下拉框中。这种方法不适用于下拉框内容经常改变的情况。因为数据源和javascript程序>>>详细阅读

本文标题：漂亮的仿flash菜单，来自蓝色经典

地址：http://www.17bianji.com/kaifa2/JS/31761.html

 1/2    1