jQuery浅灰色导航菜单代码，来自Meizu魅族网站

发布时间：2018-08-25 01:20:15 所属栏目：政策来源：站长网

导读：经常访问魅族官方网站，发现网站的导航菜单的效果很不错就扣下来，俩字：给力。鼠标放到菜单上，菜单的下边会有一条横线在滑动。一直想找类似的效果学一下。结果，不是忘记有类似效果的网站的网址，就是压根儿找不到。。又不知道怎么描述，今天总算碰到了

　　经常访问魅族官方网站，发现网站的导航菜单的效果很不错就扣下来，俩字：给力。鼠标放到菜单上，菜单的下边会有一条横线在滑动。一直想找类似的效果学一下。结果，不是忘记有类似效果的网站的网址，就是压根儿找不到。。又不知道怎么描述，今天总算碰到了，真给力。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Meizu魅族导航菜单</title> <script type="text/javascript" src="/uploads/common/js/jquery-1.3.2.js"></script> <style> div,h1,h2,h3,h4,p,form,label,input,textarea,img,span{margin:0;padding:0;}ul,li{list-style:none;padding:0;margin:0;}img{border:none;} .csc_top{background:url(/uploads/allimg/1105/shopping_tab.jpg) 0 0 no-repeat;width:958px;height:45px;margin:0 auto;position:relative;z-index:101;} .slideMenu{height:38px;} li.current a{color:#00b5f7;cursor:pointer;} li.current a:hover{color:#00b5f7;cursor:pointer;} .lavaLampWithImage3 li a:hover,.lavaLampWithImage3 li a:active{border:none;color:#00B5F7;text-decoration:none;} .lavaLampWithImage3 .sep{padding-top:13px;font-size:10px;color:#aeadad;float:left;height:20px;border-top:none;} .lavaLampWithImage3{position:relative;height:28px;float:left;} .lavaLampWithImage3 .current{color:#008ace;} .lavaLampWithImage3 .current a{color:#008ace;} .lavaLampWithImage3 li{float:left;list-style:none;padding-bottom:11px;} .lavaLampWithImage3 li.back{background:url(/uploads/allimg/1105/b_slider.gif) center bottom no-repeat;width:120px;height:28px;z-index:8;position:absolute;} .lavaLampWithImage3 li a{font:bold 14px arial;text-decoration:none;color:#303030;outline:none;text-align:center;top:6px;letter-spacing:0;z-index:10;display:block;float:left;height:28px;position:relative;overflow:hidden;padding:5px 20px 0 17px;font-family:"Microsoft Yahei",Arial,Helvetica,sans-serif,"��";font-weight:normal;font-size:13px;} </style> </head> <body> <div class="csc_top"> <div class="shead_left"> <ul id="1" class="lavaLampWithImage3"> <li class="current"> <a href="/" style="padding: 5px 30px 0;">Meizu</a> </li> <span class="sep">|</span> <li > <a href="/" style="padding: 5px 30px 0;">魅族</a> </li> <span class="sep">|</span> <li> <a href="http://www.veryhuo.com/" style="padding: 5px 30px 0;">烈火学院</a> </li> </ul> </div> </div> </div> <script type="text/javascript" src="/uploads/allimg/1105/MZPub-CSC-0121.js"></script> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!