当前位置：首页 > 资讯 > 技术文档

一个不错的渐显菜单

时间：2020-09-27 15:58 编辑：来源：阅读：
扫一扫，手机访问

摘要：一个不错的渐显菜单

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

<div class="menu_bg">首页 
 [url=http://www.1sucai.cn/article/9841.htm#]<div class="menu_cont" onmouseout="nereidFade(this,01,7,5)" onmouseover="nereidFade(this,100,5,7)" style="left: 10px;">首页</div>[/url] 
</div> 
<div class="menu_bg">关于我们 
 [url=http://www.1sucai.cn/article/9841.htm#]<div class="menu_cont" onmouseout="nereidFade(this,01,7,5)" onmouseover="nereidFade(this,100,5,7)" style="left: 90px;">关于我们</div>[/url] 
</div> 
<div class="menu_bg">网站介绍 
 [url=http://www.1sucai.cn/article/9841.htm#]<div class="menu_cont" onmouseout="nereidFade(this,01,7,5)" onmouseover="nereidFade(this,100,5,7)" style="left: 170px;">网站介绍</div>[/url] 
</div> 
<div class="menu_bg">服务项目 
 [url=http://www.1sucai.cn/article/9841.htm#]<div class="menu_cont" onmouseout="nereidFade(this,01,7,5)" onmouseover="nereidFade(this,100,5,7)" style="left: 250px;">服务项目</div>[/url] 
</div> 
<div class="menu_bg">成功案例 
 [url=http://www.1sucai.cn/article/9841.htm#]<div class="menu_cont" onmouseout="nereidFade(this,01,7,5)" onmouseover="nereidFade(this,100,5,7)" style="left: 330px;">成功案例</div>[/url] 
</div> 
<div class="menu_bg">联系我们 
 [url=http://www.1sucai.cn/article/9841.htm#]<div class="menu_cont" onmouseout="nereidFade(this,01,7,5)" onmouseover="nereidFade(this,100,5,7)" style="left: 410px;">联系我们</div>[/url] 
</div> 
<div class="menu_bg">本站论坛 
 [url=http://www.1sucai.cn/article/9841.htm#]<div class="menu_cont" onmouseout="nereidFade(this,01,7,5)" onmouseover="nereidFade(this,100,5,7)" style="left: 490px;">本站论坛</div>[/url] 
</div> 
<div class="menu_bg">English 
 [url=http://www.1sucai.cn/article/9841.htm#]<div class="menu_cont" onmouseout="nereidFade(this,01,7,5)" onmouseover="nereidFade(this,100,5,7)" style="left: 570px;">English</div>[/url] 
</div>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

全部评论(0)

上一篇：CSS TreeMenu 二级树形菜单示例
下一篇：css 有弹动效果的网页导航

资讯排行榜
更多>>