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