偶尔看到魅族官方网站,发现网站的导航菜单的效果很不错就扣下来,俩字:给力。鼠标放到菜单上,菜单的下边会有一条横线在滑动。一直想找类似的效果学一下。结果,不是忘记有类似效果的网站的网址,就是压根儿找不到。。又不知道怎么描述,今天总算碰到了,真给力。
<!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>
- 大小: 7.2 KB
分享到:
相关推荐
主要介绍了jQuery实现Meizu魅族官方网站的导航菜单效果,可实现导航菜单项鼠标滑过出现下划线动态跟随的功能,通过jQuery插件实现该功能,需要的朋友可以参考下
魅族导航条特效,jqueryui菜单栏目导航,javascript特效
魅族魅族官网幻灯片导航菜单基于jquery.min.1.11.3.js制作,二级导航菜单。
jQuery+Swiper仿魅族幻灯片轮播和导航栏特效
jQuery魅族官网导航加幻灯片代码是一款仿魅族手机官网首页导航加轮播图片切换代码。
1、魅族魅族官网幻灯片导航菜单基于jquery.min.1.11.3.js制作,二级导航菜单。该导航栏十分漂亮,动画流畅,非常适合学习以及二次开发,欢迎大家来下载哦! 二、注意事项 1、开发环境为Visual Studio 2015,无...
有兴趣刚需的可以自己下载,非常实用的jquery代码,可以完美运行,有能力的还可以二次修改!
魅族官网幻灯片导航菜单基于jquery.min.1.11.3.js制作,二级导航菜单。
一款使用Swiper仿制的魅族官网大图轮播和导航栏ui布局。全代码
jQuery仿魅族大图轮播幻灯片特效是一款使用Swiper仿制的魅族官网大图轮播和导航栏ui布局。
使用jQuery Swiper 仿制的魅族官网大图轮播和导航栏ui布局。图片轮播有个特点:有两个主题,一个白色,一个灰色,切换图片的时候会对应切换主题背景色,具有创意的网站产品介绍banner大图切换实例。