动态油漆效果滑动的jquery导航菜单
- 作者：网页模板
- 大小：0.042MB
- 点击次数：
- 发布时间：2014-02-27 13:25
特效介绍
动态油漆效果滑动的jquery导航菜单，完美兼容IE6，但是由于png问题，会显示略有不同。如果想完美解决PNG在IE6下面的透明度问题，可以访问：IE6 PNG透明解决方法
使用方法
1、在头部引入下面的代码：<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* nav */
#nav{width:880px;height:570px;margin:0 auto;padding:15px;}
#nav ul li{float:left;margin-left:15px;display:inline;}
#nav ul li a{text-align:center;display:block;width:92px;height:40px;line-height:40px;position:relative;font-size:14px;color:#fff;text-decoration:none;}
li.home a{background:url(images/q.png) 0 0 no-repeat;}
li.work a{background:url(images/q.png) -95px 0 no-repeat;}
li.art a{background:url(images/q.png) -190px 0 no-repeat;}
li.about a{background:url(images/q.png) -285px 0 no-repeat;}
li.connect a{background:url(images/q.png) -380px 0 no-repeat;}
</style>
<script type='text/javascript' src='http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js'></script>
<script type="text/javascript">
$(function(){
$('#nav ul li a').hover(function(){
$(this).stop().animate({height:"208px"},600);
},function(){
$(this).stop().animate({height:"40px"},600);
});
//Work
$('#nav ul li.work a').hover(function(){
$(this).stop().animate({height:"163px"},600);
},600);
//Art
$('#nav ul li.art a').hover(function(){
$(this).stop().animate({height:"189px"},600);
},600);
//About
$('#nav ul li.about a').hover(function(){
$(this).stop().animate({height:"126px"},600);
},600);
//Connect
$('#nav ul li.connect a').hover(function(){
$(this).stop().animate({height:"139px"},600);
},600);
});
</script>
2、复制下面的代码到您的html页面<div id="nav">
<ul>
<li class="home"><a href="http://www.5imoban.net/" alt="模板网" title="模板网" target="_blank">Home</a></li>
<li class="work"><a href="#">Work</a></li>
<li class="art"><a href="#">Art</a></li>
<li class="about"><a href="#">About</a></li>
<li class="connect"><a href="#">Connect</a></li>
</ul>
</div>
- 本文标签：
- jquery菜单,jquery导航代码
