凹丫丫网络社区 » 【网页编程】 » 非常精彩的导航菜单，推荐！

Amm 发表于 2008-5-16 13:08

非常精彩的导航菜单，推荐！

<P>把如下代码复制到&lt;head&gt;与&lt;/head&gt;之间</P>
<P>&lt;style&gt;<BR>/* 先把这个 xmenu 的样式放到css里 */<BR>.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;}<BR>&lt;/style&gt;</P>
<P>&lt;script&gt;<BR>/* <BR>这是把事件动作绑定到菜单上的函数<BR>*/<BR>function attachXMenu(objid){<BR>&nbsp; var tds=objid.getElementsByTagName('td');<BR>&nbsp;&nbsp;&nbsp; for(var i=0;i&lt;tds.length;i++){<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; with(tds[i]){<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; onmouseover=function(){<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; with(this){<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; filters[0].apply();<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; style.background='#66CCFF'; //这是鼠标移上去时的背景颜色<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; style.border='1px solid #ffffff'; //边框<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; style.color='black'; //文字颜色<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; filters[0].play();<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; onmouseout=function(){<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; with(this){<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; filters[0].apply();<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; style.background='#336699'; //这是鼠标离开时的背景颜色<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; style.border='1px solid #336699'; //边框<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; style.color='#ffffff'; //文字颜色<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; filters[0].play();<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<BR>}<BR>&lt;/script&gt;</P>
<P>把如下代码复制到&lt;body&gt;与&lt;/body&gt;之间</P>
<P>&lt;table class="xmenu" id="xmenu0" width="500" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center"&gt;<BR>&lt;tr&gt;<BR>&lt;td onclick="location.href='http://www.butong.net';"&gt;精彩网页特效Butong.net&lt;/td&gt;<BR>&lt;td&gt;Name&lt;/td&gt;<BR>&lt;td&gt;Is&lt;/td&gt;<BR>&lt;td&gt;LeX&lt;/td&gt;<BR>&lt;td&gt;Rus&lt;/td&gt;<BR>&lt;td&gt;!!!&lt;/td&gt;<BR>&lt;/tr&gt;<BR>&lt;/table&gt;</P>
<P>&lt;script&gt;attachXMenu(xmenu0); //在上面这个table结束的地方执行事件动作的绑定, 这里的这个xmenu0就是那个table的id&lt;/script&gt;<BR>&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;<BR>&lt;!--下面这个是竖排的--&gt;<BR>&lt;table class="xmenu" id="xmenu1" width="100" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center"&gt;<BR>&lt;tr&gt;&lt;td&gt;My&lt;/td&gt;&lt;/tr&gt;<BR>&lt;tr&gt;&lt;td&gt;Name&lt;/td&gt;&lt;/tr&gt;<BR>&lt;tr&gt;&lt;td&gt;Is&lt;/td&gt;&lt;/tr&gt;<BR>&lt;tr&gt;&lt;td&gt;LeX&lt;/td&gt;&lt;/tr&gt;<BR>&lt;tr&gt;&lt;td&gt;Rus&lt;/td&gt;&lt;/tr&gt;<BR>&lt;tr&gt;&lt;td&gt;!!!&lt;/td&gt;&lt;/tr&gt;<BR>&lt;/table&gt;<BR>&lt;script&gt;attachXMenu(xmenu1);&lt;/script&gt; </P>

nieyg 发表于 2008-11-1 15:07

<P>好像不能运行</P>

kmlxzbq 发表于 2008-11-12 13:15

学习了/:yy80

dreamtale 发表于 2008-11-15 16:31

我要试试阿/:emot1

83388593 发表于 2008-11-21 09:20

不错
顶你了

庙小妖风大 发表于 2008-11-23 02:41

好东西，赞一下~~^_^～～！……

v1xuhao 发表于 2008-12-19 18:51

看 哈！~~~~~

q97927 发表于 2008-12-26 17:46

/:hao.............

查看完整版本: 非常精彩的导航菜单，推荐！