一个不错的渐显菜单_导航菜单

由于此菜单不易灵活改动，图片量又大，要改栏目和增删栏目特麻烦，得须改图片。
       因对本人对此菜单做了大量改动，最终达到的效果是一样
       原网站那个菜单加上图片有80多k呢，经修改过后的菜单加上图片大小只有4k左右，改了过后是不是小了很多呢。
       改动后的优点，便于修改栏目名称，和增删栏目，图片量减少，无论多少栏目只需两张图片。
       熟悉js的人还可以把它改得更简单方便呢，不过我对js还不够了解，所以就等高手改更简单的效果吧！
补充一点: 这个效果在FF下不能实现,其它浏览器,我也没有测试,只在IE6.0下测试通过.

<script language="javascript"> nereidFadeObjects = new Object(); nereidFadeTimers = new Object(); function nereidFade(object, destOp, rate, delta){ if (!document.all) return if (object != "[object]"){ setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0); return; } clearTimeout(nereidFadeTimers[object.sourceIndex]); diff = destOp-object.filters.alpha.opacity; direction = 1; if (object.filters.alpha.opacity > destOp){ direction = -1; } delta=Math.min(direction*diff,delta); object.filters.alpha.opacity+=direction*delta; if (object.filters.alpha.opacity != destOp){ nereidFadeObjects[object.sourceIndex]=object; nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate); } } </script> <style type="text/css"> <!-- .menu_bg{ float:left; width:80px; height:25px; line-height:25px; background-image:url(http://www.cqgg.com/UploadFiles_15/2007-3/313929821.gif); font-size:12px; color:#ccc; text-align:center; } .menu_cont{ float:left; position: absolute; visibility: visible; background-image:url(http://www.cqgg.com/UploadFiles_15/2007-3/313380944.gif); color:#fff; text-align:center; width:80px; height:25px; line-height:25px; FILTER: alpha(opacity=0); cursor: pointer; top:8px !important; top:15px; } } a{font-size:12px; color:#fff; text-decoration:none;} --> </style> <div class="menu_bg">首页 <a href="#"><div class="menu_cont" style="left: 10px;" onmouseover="nereidFade(this,100,5,7)" onmouseout="nereidFade(this,01,7,5)">首页</div></a> </div> <div class="menu_bg">关于我们 <a href="#"><div class="menu_cont" style="left: 90px;" onmouseover="nereidFade(this,100,5,7)" onmouseout="nereidFade(this,01,7,5)">关于我们</div></a> </div> <div class="menu_bg">网站介绍 <a href="#"><div class="menu_cont" style="left: 170px;" onmouseover="nereidFade(this,100,5,7)" onmouseout="nereidFade(this,01,7,5)">网站介绍</div></a> </div> <div class="menu_bg">服务项目 <a href="#"><div class="menu_cont" style="left: 250px;" onmouseover="nereidFade(this,100,5,7)" onmouseout="nereidFade(this,01,7,5)">服务项目</div></a> </div> <div class="menu_bg">成功案例 <a href="#"><div class="menu_cont" style="left: 330px;" onmouseover="nereidFade(this,100,5,7)" onmouseout="nereidFade(this,01,7,5)">成功案例</div></a> </div> <div class="menu_bg">联系我们 <a href="#"><div class="menu_cont" style="left: 410px;" onmouseover="nereidFade(this,100,5,7)" onmouseout="nereidFade(this,01,7,5)">联系我们</div></a> </div> <div class="menu_bg">本站论坛 <a href="#"><div class="menu_cont" style="left: 490px;" onmouseover="nereidFade(this,100,5,7)" onmouseout="nereidFade(this,01,7,5)">本站论坛</div></a> </div> <div class="menu_bg">English <a href="#"><div class="menu_cont" style="left: 570px;" onmouseover="nereidFade(this,100,5,7)" onmouseout="nereidFade(this,01,7,5)">English</div></a> </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]