以下是 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 type="text/css" href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<div class="nav_menu">
<div class="nav">
<div class="list" id="navlist">
<ul id="navfouce">
<li><a href="http://www.baidu.com/jiaoben/">公司概况</a></li>
<li><a href="http://www.baidu.com/jiaoben/">产品展示</a></li>
<li><a href="http://www.baidu.com/jiaoben/">新闻动态</a></li>
<li><a href="http://www.baidu.com/jiaoben/">营销网络</a></li>
<li><a href="http://www.baidu.com/jiaoben/">照明知识</a></li>
<li><a href="http://www.baidu.com/jiaoben/">人力资源</a></li>
<li><a href="http://www.baidu.com/jiaoben/">客服中心</a></li>
<li><a href="http://www.baidu.com/jiaoben/">联系我们</a></li>
</ul>
</div>
<div class="box" id="navbox" style="height:0px;opacity:0;overflow:hidden;">
<div class="cont" style="display:none;">
<ul class="sublist clearfix">
<li>
<h3 class="mcate-item-hd"><span>服饰内衣</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">女装</a>
<a href="http://www.baidu.com/jiaoben">男装</a>
<a href="http://www.baidu.com/jiaoben">内衣</a>
<a href="http://www.baidu.com/jiaoben">家居服</a>
<a href="http://www.baidu.com/jiaoben">配件</a>
<a href="http://www.baidu.com/jiaoben">羽绒</a>
<a href="http://www.baidu.com/jiaoben">呢大衣</a>
<a href="http://www.baidu.com/jiaoben">毛衣</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>鞋 箱包</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">女鞋</a>
<a href="http://www.baidu.com/jiaoben">男鞋</a>
<a href="http://www.baidu.com/jiaoben">箱包</a>
<a href="http://www.baidu.com/jiaoben">女包</a>
<a href="http://www.baidu.com/jiaoben">男包</a>
<a href="http://www.baidu.com/jiaoben">旅行箱</a>
<a href="http://www.baidu.com/jiaoben">钱包 </a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>珠宝、手表</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">饰品</a>
<a href="http://www.baidu.com/jiaoben">项链</a>
<a href="http://www.baidu.com/jiaoben">珠宝</a>
<a href="http://www.baidu.com/jiaoben">钻石</a>
<a href="http://www.baidu.com/jiaoben">手表</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>化妆品</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">护肤</a>
<a href="http://www.baidu.com/jiaoben">彩妆</a>
<a href="http://www.baidu.com/jiaoben">香水</a>
<a href="http://www.baidu.com/jiaoben">男士</a>
<a href="http://www.baidu.com/jiaoben">精油</a>
<a href="http://www.baidu.com/jiaoben">假发</a>
<a href="http://www.baidu.com/jiaoben">美体</a>
<a href="http://www.baidu.com/jiaoben">试用服务</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>运动 户外</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">运动鞋</a>
<a href="http://www.baidu.com/jiaoben">运动服</a>
<a href="http://www.baidu.com/jiaoben">运动用品</a>
<a href="http://www.baidu.com/jiaoben">户外</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>手机 数码</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">手机</a>
<a href="http://www.baidu.com/jiaoben">笔记本</a>
<a href="http://www.baidu.com/jiaoben">相机</a>
<a href="http://www.baidu.com/jiaoben">平板电脑</a>
<a href="http://www.baidu.com/jiaoben">配件</a>
<a href="http://www.baidu.com/jiaoben">电脑硬件</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>家用电器</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">大家电</a>
<a href="http://www.baidu.com/jiaoben">影音电器</a>
<a href="http://www.baidu.com/jiaoben">生活电器</a>
<a href="http://www.baidu.com/jiaoben">厨房电器</a>
<a href="http://www.baidu.com/jiaoben">健康护理</a>
<a href="http://www.baidu.com/jiaoben">剃须刀</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>家具 建材</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">家具</a>
<a href="http://www.baidu.com/jiaoben">卫浴</a>
<a href="http://www.baidu.com/jiaoben">地板</a>
<a href="http://www.baidu.com/jiaoben">灯具</a>
<a href="http://www.baidu.com/jiaoben">五金</a>
<a href="http://www.baidu.com/jiaoben">开关</a>
<a href="http://www.baidu.com/jiaoben">装修设计</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>家纺 居家</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">家纺</a>
<a href="http://www.baidu.com/jiaoben">磨毛套件</a>
<a href="http://www.baidu.com/jiaoben">羽绒被</a>
<a href="http://www.baidu.com/jiaoben">枕头</a>
<a href="http://www.baidu.com/jiaoben">软饰</a>
<a href="http://www.baidu.com/jiaoben">居家</a>
<a href="http://www.baidu.com/jiaoben">厨房</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>食品</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">零食</a>
<a href="http://www.baidu.com/jiaoben">进口</a>
<a href="http://www.baidu.com/jiaoben">茶叶</a>
<a href="http://www.baidu.com/jiaoben">冲饮</a>
<a href="http://www.baidu.com/jiaoben">酒水</a>
<a href="http://www.baidu.com/jiaoben">粮油</a>
<a href="http://www.baidu.com/jiaoben">干货</a>
<a href="http://www.baidu.com/jiaoben">生鲜</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>医药保健</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">保健</a>
<a href="http://www.baidu.com/jiaoben">滋补</a>
<a href="http://www.baidu.com/jiaoben">蛋白粉</a>
<a href="http://www.baidu.com/jiaoben">阿胶</a>
<a href="http://www.baidu.com/jiaoben">药品</a>
<a href="http://www.baidu.com/jiaoben">血压仪</a>
<a href="http://www.baidu.com/jiaoben">计生</a>
<a href="http://www.baidu.com/jiaoben">体检</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>母婴用品</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">玩具</a>
<a href="http://www.baidu.com/jiaoben">宝宝食品</a>
<a href="http://www.baidu.com/jiaoben">用品</a>
<a href="http://www.baidu.com/jiaoben">童装</a>
<a href="http://www.baidu.com/jiaoben">孕装</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>汽车 配件</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">新车</a>
<a href="http://www.baidu.com/jiaoben">座垫</a>
<a href="http://www.baidu.com/jiaoben">脚垫</a>
<a href="http://www.baidu.com/jiaoben">GPS</a>
<a href="http://www.baidu.com/jiaoben">车衣</a>
<a href="http://www.baidu.com/jiaoben">洗车机</a>
<a href="http://www.baidu.com/jiaoben">水枪</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>文化 玩乐</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">电子凭证</a>
<a href="http://www.baidu.com/jiaoben">图书</a>
<a href="http://www.baidu.com/jiaoben">乐器</a>
<a href="http://www.baidu.com/jiaoben">旅游</a>
<a href="http://www.baidu.com/jiaoben">鲜花</a>
</p>
</li>
</ul>
</div>
<div class="cont" style="display:none;">
<ul class="sublist clearfix">
<li>
<h3 class="mcate-item-hd"><span>服饰内衣</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">女装</a>
<a href="http://www.baidu.com/jiaoben">男装</a>
<a href="http://www.baidu.com/jiaoben">内衣</a>
<a href="http://www.baidu.com/jiaoben">家居服</a>
<a href="http://www.baidu.com/jiaoben">配件</a>
<a href="http://www.baidu.com/jiaoben">羽绒</a>
<a href="http://www.baidu.com/jiaoben">呢大衣</a>
<a href="http://www.baidu.com/jiaoben">毛衣</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>鞋 箱包</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">女鞋</a>
<a href="http://www.baidu.com/jiaoben">男鞋</a>
<a href="http://www.baidu.com/jiaoben">箱包</a>
<a href="http://www.baidu.com/jiaoben">女包</a>
<a href="http://www.baidu.com/jiaoben">男包</a>
<a href="http://www.baidu.com/jiaoben">旅行箱</a>
<a href="http://www.baidu.com/jiaoben">钱包 </a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>珠宝、手表</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">饰品</a>
<a href="http://www.baidu.com/jiaoben">项链</a>
<a href="http://www.baidu.com/jiaoben">珠宝</a>
<a href="http://www.baidu.com/jiaoben">钻石</a>
<a href="http://www.baidu.com/jiaoben">手表</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>化妆品</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">护肤</a>
<a href="http://www.baidu.com/jiaoben">彩妆</a>
<a href="http://www.baidu.com/jiaoben">香水</a>
<a href="http://www.baidu.com/jiaoben">男士</a>
<a href="http://www.baidu.com/jiaoben">精油</a>
<a href="http://www.baidu.com/jiaoben">假发</a>
<a href="http://www.baidu.com/jiaoben">美体</a>
<a href="http://www.baidu.com/jiaoben">试用服务</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>运动 户外</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">运动鞋</a>
<a href="http://www.baidu.com/jiaoben">运动服</a>
<a href="http://www.baidu.com/jiaoben">运动用品</a>
<a href="http://www.baidu.com/jiaoben">户外</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>手机 数码</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">手机</a>
<a href="http://www.baidu.com/jiaoben">笔记本</a>
<a href="http://www.baidu.com/jiaoben">相机</a>
<a href="http://www.baidu.com/jiaoben">平板电脑</a>
<a href="http://www.baidu.com/jiaoben">配件</a>
<a href="http://www.baidu.com/jiaoben">电脑硬件</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>家用电器</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">大家电</a>
<a href="http://www.baidu.com/jiaoben">影音电器</a>
<a href="http://www.baidu.com/jiaoben">生活电器</a>
<a href="http://www.baidu.com/jiaoben">厨房电器</a>
<a href="http://www.baidu.com/jiaoben">健康护理</a>
<a href="http://www.baidu.com/jiaoben">剃须刀</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>家具 建材</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">家具</a>
<a href="http://www.baidu.com/jiaoben">卫浴</a>
<a href="http://www.baidu.com/jiaoben">地板</a>
<a href="http://www.baidu.com/jiaoben">灯具</a>
<a href="http://www.baidu.com/jiaoben">五金</a>
<a href="http://www.baidu.com/jiaoben">开关</a>
<a href="http://www.baidu.com/jiaoben">装修设计</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>家纺 居家</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">家纺</a>
<a href="http://www.baidu.com/jiaoben">磨毛套件</a>
<a href="http://www.baidu.com/jiaoben">羽绒被</a>
<a href="http://www.baidu.com/jiaoben">枕头</a>
<a href="http://www.baidu.com/jiaoben">软饰</a>
<a href="http://www.baidu.com/jiaoben">居家</a>
<a href="http://www.baidu.com/jiaoben">厨房</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>食品</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">零食</a>
<a href="http://www.baidu.com/jiaoben">进口</a>
<a href="http://www.baidu.com/jiaoben">茶叶</a>
<a href="http://www.baidu.com/jiaoben">冲饮</a>
<a href="http://www.baidu.com/jiaoben">酒水</a>
<a href="http://www.baidu.com/jiaoben">粮油</a>
<a href="http://www.baidu.com/jiaoben">干货</a>
<a href="http://www.baidu.com/jiaoben">生鲜</a>
</p>
</li>
</ul>
</div>
<div class="cont" style="display:none;">
<ul class="sublist clearfix">
<li>
<h3 class="mcate-item-hd"><span>服饰内衣</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">女装</a>
<a href="http://www.baidu.com/jiaoben">男装</a>
<a href="http://www.baidu.com/jiaoben">内衣</a>
<a href="http://www.baidu.com/jiaoben">家居服</a>
<a href="http://www.baidu.com/jiaoben">配件</a>
<a href="http://www.baidu.com/jiaoben">羽绒</a>
<a href="http://www.baidu.com/jiaoben">呢大衣</a>
<a href="http://www.baidu.com/jiaoben">毛衣</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>鞋 箱包</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">女鞋</a>
<a href="http://www.baidu.com/jiaoben">男鞋</a>
<a href="http://www.baidu.com/jiaoben">箱包</a>
<a href="http://www.baidu.com/jiaoben">女包</a>
<a href="http://www.baidu.com/jiaoben">男包</a>
<a href="http://www.baidu.com/jiaoben">旅行箱</a>
<a href="http://www.baidu.com/jiaoben">钱包 </a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>珠宝、手表</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">饰品</a>
<a href="http://www.baidu.com/jiaoben">项链</a>
<a href="http://www.baidu.com/jiaoben">珠宝</a>
<a href="http://www.baidu.com/jiaoben">钻石</a>
<a href="http://www.baidu.com/jiaoben">手表</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>化妆品</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">护肤</a>
<a href="http://www.baidu.com/jiaoben">彩妆</a>
<a href="http://www.baidu.com/jiaoben">香水</a>
<a href="http://www.baidu.com/jiaoben">男士</a>
<a href="http://www.baidu.com/jiaoben">精油</a>
<a href="http://www.baidu.com/jiaoben">假发</a>
<a href="http://www.baidu.com/jiaoben">美体</a>
<a href="http://www.baidu.com/jiaoben">试用服务</a>
</p>
</li>
<li>
<h3 class="mcate-item-hd"><span>运动 户外</span></h3>
<p class="mcate-item-bd">
<a href="http://www.baidu.com/jiaoben">运动鞋</a>
<a href="http://www.baidu.com/jiaoben">运动服</a>
<a href="http://www.baidu.com/jiaoben">运动用品</a>
<a href="http://www.baidu.com/jiaoben">户外</a>
</p>
</li>
</ul>
</div>
<div class="cont" style="display:none;">3<br />3</div>
<div class="cont" style="display:none;">4<br />3<br />4</div>
<div class="cont" style="display:none;">5</div>
<div class="cont" style="display:none;">6<br />3<br />3</div>
<div class="cont" style="display:none;">7<br />3<br />3<br />3</div>
</div>
</div>
</div>
<script type="text/javascript">
(function(){
var time = null;
var list = $("#navlist");
var box = $("#navbox");
var lista = list.find("a");
for(var i=0,j=lista.length;i<j;i++){
if(lista[i].className == "now"){
var olda = i;
}
}
var box_show = function(hei){
box.stop().animate({
height:hei,
opacity:1
},400);
}
var box_hide = function(){
box.stop().animate({
height:0,
opacity:0
},400);
}
lista.hover(function(){
lista.removeClass("now");
$(this).addClass("now");
clearTimeout(time);
var index = list.find("a").index($(this));
box.find(".cont").hide().eq(index).show();
var _height = box.find(".cont").eq(index).height()+54;
box_show(_height)
},function(){
time = setTimeout(function(){
box.find(".cont").hide();
box_hide();
},50);
lista.removeClass("now");
lista.eq(olda).addClass("now");
});
box.find(".cont").hover(function(){
var _index = box.find(".cont").index($(this));
lista.removeClass("now");
lista.eq(_index).addClass("now");
clearTimeout(time);
$(this).show();
var _height = $(this).height()+54;
box_show(_height);
},function(){
time = setTimeout(function(){
$(this).hide();
box_hide();
},50);
lista.removeClass("now");
lista.eq(olda).addClass("now");
});
})();
</script>
</body>
</html>
CSS代码(style.css):
@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial,Helvetica,sans-serif,"新宋体";background-color:#E8E8E8;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-table}
*html .clearfix{height:1%}
.clearfix{display:block}
*+html .clearfix{min-height:1%}
/* nav_menu */
.nav_menu{height:42px;background-color:#333333;}
.nav{width:1006px;height:41px;position:relative;margin:0 auto;}
.nav .list li{float:left;}
.nav .list a{float:left;display:block;width:125px;height:42px;text-align:center;font:bold 13px/36px "微软雅黑";color:#fff;}
.nav .list a:hover{color:#FFA304;}
.nav .list a:hover,.nav .list .now{color:#F00;background:#fff;}
.nav .box{position:absolute;left:-5px;top:42px;width:1006px;background:#FFF;overflow:hidden;height:0;filter:alpha(opacity=0);opacity:0;border-bottom:2px solid #074c52;}
.nav .cont{position:relative;padding:25px 0 0px 24px;}
/* sublist */
.sublist li{float:left;width:168px;padding-right:24px;padding-bottom:24px;}
.sublist li h3.mcate-item-hd{font-family:'微软雅黑';padding-left:2px;font-size:14px;height:26px;line-height:26px;border-bottom:1px dashed #666666;}
.sublist li p.mcate-item-bd{padding-left:2px;}
.sublist li p.mcate-item-bd a{height:26px;line-height:26px;margin-right:5px;font-size:12px;color:#666666;text-decoration:none;display:inline-block;}
.sublist li p.mcate-item-bd a:hover{color:#6c5143;text-decoration:underline;}
分享到QQ
分享到微博
微信扫一扫
