jQuery实现魅族魅族官方网站的导航菜单效果

本文实例讲述了jQuery实现魅族魅族官方网站的导航菜单效果。分享给大家供大家参考。具体如下：

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

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-魅族-网页-导航-菜单-样式-代码/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题魅族魅族导航菜单/title脚本类型=' text/JavaScript ' src=' http : jquery 1。3 .2 .js '/脚本样式div，h1，h2，h3，h4，p，表单，标签，输入，textarea，img，span { margin:0划水：0;}ul、李{列表式：无；划水：0;margin :0 } img { border : none }。CSC _ top {背景： URL(图片/购物_标签页。jpg)0 0不重复；宽度宽度：958像素重量：45像素33600汽车位置：相对；z索引：101;}.幻灯片菜单{ height:38px} Li。当前a { color : # 00b 5f 7；光标：指针指针；}李。当前a :悬停{ color : # 00b 5f 7；光标：指针指针；} .拉瓦灯与图像3阿利：悬停，LavaLampWithimage 3阿利：活动{边框：无；color: # 00B5F7文本装饰：无；}.lavaLampWithImage3 .sep { padding-top :13 px；font-size :10 pxcolor: # aeadadfloat:left高度：20 px边框-top :无；} .LavaLampWithImage 3 {位置：相对；高度：28 pxfloat : left } . LavaLampwithimage3 .当前{ color : # 008 ace } . LavaLampwithimage3 .当前a { color: # 008ace}。LavaLampWithImage 3 Li {左浮动：列表式：无；填充-底部：11像素；} .LavaLampWithimage 3 Li。后退{背景： URL(images/b _ slider。gif)居中底部无重复；宽度宽度：120像素高度：28 pxz索引：8;位置：绝对；}.lavaLampWithImage3阿利{ font:bold 14px arial文本装饰：无；color : # 303030 outlines : none文本对齐：居中；top:6px字母间距：0;z索引：10;显示：块；float:left高度：28 px位置：相对；飞越：隐藏；padd :5 px 20px 0 17px font-family : '微软雅黑'，Helvetica阿里亚尔，无衬线，',字体粗细：正常；font-size :13 px}/style/head dydiv class=' CSC _ top ' div class=' shead _ left ' ul id=' 1 ' class=' LavaLampWithIMage 3 ' Li class=' current ' a href=' # ' style=' padd : 5px 30px 0；'魅族/a /li span class='sep'|/span阿利魅族/a /li span class='sep'|/span阿利我们/a/Li/ul/div/div/div脚本类型=' text/JavaScript ' src=' http : mz pub-CSC-0121。js '/脚本/正文/html希望本文所述对大家的jQuery程序设计有所帮助。