以下是 jquery鼠标悬停缓慢下拉导航特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery鼠标悬停缓慢下拉导航</title>
<link rel="stylesheet" type="text/css" href="css/all.css" media="all" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div id="header">
<ul class="nav">
<li class="first">
<a href="#">About us</a>
<div class="nav-w">
<div class="section-nav1">
<ul>
<li><a href="#">Mission & Vision</a></li>
<li><a href="#">PCD Team</a></li>
<li><a href="#">Partners & Supporters</a></li>
<li><a href="#">Why Choose</a></li>
<li><a href="#">Jion Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</li>
<li class="bg"></li>
<li>
<a href="#">International Internships</a>
<div class="nav-w">
<div class="section-nav1">
<ul>
<li><a href="#">Accounting</a></li>
<li><a href="#">Advertising</a></li>
<li><a href="#">Architecture</a></li>
<li><a href="#">Art Gallery</a></li>
<li><a href="#">Casting</a></li>
</ul>
</div>
</div>
</li>
<li class="bg"></li>
<li>
<a href="#">International Study Tours</a>
<div class="nav-w">
<div class="section-nav1">
<ul>
<li><a href="#">Overview</a></li>
<li><a href="#">Dates & Deadlines</a></li>
<li><a href="#">Eligibility</a></li>
<li><a href="#">Financing</a></li>
<li><a href="#">Academic Credit</a></li>
</ul>
</div>
</div>
</li>
<li class="bg"></li>
<li>
<a href="#">Destinations</a>
<div class="nav-w">
<div class="section-nav1">
<ul>
<li><a href="#">Overview</a></li>
<li><a href="#">Program Benefits</a></li>
<li><a href="#">Safety</a></li>
<li><a href="#">Track Record</a></li>
</ul>
</div>
</div>
</li>
<li class="bg"></li>
<li>
<a href="#">Employers</a>
<div class="nav-w">
<div class="section-nav1">
<ul>
<li><a href="#">Overview</a></li>
<li><a href="#">What We Do</a></li>
<li><a href="#">Our Employers</a></li>
<li><a href="#">Intern Manual</a></li>
<li><a href="#">Employer Form</a></li>
</ul>
</div>
</div>
</li>
<li class="bg"></li>
<li>
<a href="#">Articles</a>
<div class="nav-w">
<div class="section-nav1">
<ul>
<li><a href="#">Overview</a></li>
<li><a href="#">What We Do</a></li>
<li><a href="#">Our Employers</a></li>
<li><a href="#">Intern Manual</a></li>
<li><a href="#">Employer Form</a></li>
</ul>
</div>
</div>
</li>
<li class="bg"></li>
<li><a href="#">Faq</a></li>
</ul>
</div>
</body>
</html>
JS代码(main.js):
function initMenu(){
var _speed = 400;
// in msvar _hold = $('#header ul.nav');
var _t = null;
if(_hold.length){
var _list = _hold.children();
_list.each(function(){
var _el = $(this);
var _box = _el.children('div.nav-w');
var _sub = _box.children();
_box.show().width(_sub.outerWidth()).hide();
_el.mouseenter(function(){
var _this = this;
_t = setTimeout(function(){
$(_this).css('zIndex',10);
_el.addClass('hover');
if(_box.is(':hidden')){
_box.show();
_sub.css('marginTop',-_sub.outerHeight());
}
_sub.stop().animate({
marginTop:0}
,_speed);
}
,300)}
).mouseleave(function(){
if(_t) clearTimeout(_t);
var _this = $(this);
$(this).css('zIndex',5);
if(_sub.length){
_sub.stop().animate({
marginTop:-_sub.outerHeight()}
,_speed,function(){
_box.hide();
_el.removeClass('hover');
_this.css('zIndex',1);
}
);
}
else{
_el.removeClass('hover');
}
}
);
}
);
}
}
$(document).ready(function(){
initMenu();
}
);
CSS代码(all.css):
*{margin:0 auto;padding:0px;}
body{font-family:Arial,Helvetica,sans-serif;font-size:12px;text-align:left;color:#555;line-height:20px;background:#dadada;}
img{border:0px;margin:0px;padding:0px}
ul,li,p{list-style:none;margin:0px;padding:0px;}
a{font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#555;margin:0px;padding:0px;text-decoration:none}
a:hover{color:#cc0000;text-decoration:none}
/*导航下拉菜单*/
#header{width:900px;margin:50px auto 0 auto;}
.nav{position:absolute;width:900px;height:33px;background:url(../images/navbg.gif) repeat-x;}
.nav li{position:relative;float:left;}
.nav .bg{background:url(../images/nav_xian.gif) no-repeat;width:2px;height:33px;padding:0px;display:block;}
.nav li a{line-height:30px;padding:0px 21px;float:left;height:33px;color:#fff;font-size:14px;}
.nav li a:hover{background:url(../images/navbg_a.gif) repeat-x;color:#fff;}
.nav li .nav-w{z-index:21;position:absolute;display:none;float:left;clear:both;overflow:hidden;top:33px;background:#fff;border:#faa651 1px solid;left:-1px;}
.nav li:hover a{background:url(../images/navbg_a.gif) repeat-x;color:#fff;}
.nav li .section-nav1{padding:10px;height:auto;overflow:hidden;}
.nav li .section-nav1 ul{position:static;padding:0px;margin:0px;width:160px;overflow:hidden;}
.nav li .section-nav1 ul li{position:static;padding:0px;margin-bottom:3px;width:100%;background:none;float:left;}
.nav li .section-nav1 ul li a{border:#f0f0f0 1px solid;text-align:left;padding:0px;line-height:22px;width:auto;padding-left:3px;display:block;background:none;float:none;height:auto;color:#3167a5;font-size:12px;overflow:hidden;cursor:pointer;}
.nav li .section-nav1 ul li a:hover{border:#faa651 1px solid;background:none;color:#faa651;}
/*导航下拉菜单*/
分享到QQ
分享到微博
微信扫一扫
