Meizu魅族官方网站的jQuery导航菜单

最新推荐文章于 2025-11-26 17:11:00 发布

转载最新推荐文章于 2025-11-26 17:11:00 发布 · 341 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/webshow/archive/2011/07/19/2110465.html

文章标签：

#xhtml #javascript #前端 #ViewUI

本文详细解析了Meizu魅族官方网站上的jQuery导航菜单效果，包括代码实现和交互细节，为前端开发者提供了实用的学习资源。

Meizu魅族官方网站的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 ="http://www.codefans.net/ajaxjs/jquery1.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(http://www.codefans.net/jscss/demoimg/201105/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(http://www.codefans.net/jscss/demoimg/201105/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 ="http://www.codefans.net/" style ="padding: 5px 30px 0;" > 魅族 </ a >
                 </ li >
                 < span class ="sep" > | </ span >
                   < li >
                 < a href ="/" style ="padding: 5px 30px 0;" > 源码爱好者 </ a >
                 </ li >
      </ ul >
     </ div >
</ div >
</ div >
< script type ="text/javascript" src ="http://www.codefans.net/jscss/demoimg/201105/MZPub-CSC-0121.js" ></ script >
</ body >
</ html >

posted on 2011-07-19 13:18 前端设计阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/webshow/archive/2011/07/19/2110465.html