基于jQuery实现缓慢弹出下拉导航特效



31 123 42



特效描述:基于jQuery实现 缓慢弹出 下拉导航,基于jQuery实现缓慢弹出下拉导航特效

代码结构

1. 引入CSS

<link type="text/css" href="css/style.css" rel="stylesheet" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

3. HTML代码

<div class="nav_menu">
	<div class="nav">
		<div class="list" id="navlist">
			<ul id="navfouce">
				<li><a href="http://51qianduan.com/jiaoben/">公司概况</a></li>   
				<li><a href="http://51qianduan.com/jiaoben/">产品展示</a></li>   
				<li><a href="http://51qianduan.com/jiaoben/">新闻动态</a></li>
				<li><a href="http://51qianduan.com/jiaoben/">营销网络</a></li>
				<li><a href="http://51qianduan.com/jiaoben/">照明知识</a></li>   
				<li><a href="http://51qianduan.com/jiaoben/">人力资源</a></li>   
				<li><a href="http://51qianduan.com/jiaoben/">客服中心</a></li>   
				<li><a href="http://51qianduan.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://51qianduan.com/jiaoben">女装</a>
							<a href="http://51qianduan.com/jiaoben">男装</a>
							<a href="http://51qianduan.com/jiaoben">内衣</a>
							<a href="http://51qianduan.com/jiaoben">家居服</a>
							<a href="http://51qianduan.com/jiaoben">配件</a>
							<a href="http://51qianduan.com/jiaoben">羽绒</a>
							<a href="http://51qianduan.com/jiaoben">呢大衣</a>
							<a href="http://51qianduan.com/jiaoben">毛衣</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>鞋 箱包</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">女鞋</a>
							<a href="http://51qianduan.com/jiaoben">男鞋</a>
							<a href="http://51qianduan.com/jiaoben">箱包</a>
							<a href="http://51qianduan.com/jiaoben">女包</a>
							<a href="http://51qianduan.com/jiaoben">男包</a>
							<a href="http://51qianduan.com/jiaoben">旅行箱</a>
							<a href="http://51qianduan.com/jiaoben">钱包 </a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>珠宝、手表</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">饰品</a>
							<a href="http://51qianduan.com/jiaoben">项链</a>
							<a href="http://51qianduan.com/jiaoben">珠宝</a>
							<a href="http://51qianduan.com/jiaoben">钻石</a>
							<a href="http://51qianduan.com/jiaoben">手表</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>化妆品</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">护肤</a>
							<a href="http://51qianduan.com/jiaoben">彩妆</a>
							<a href="http://51qianduan.com/jiaoben">香水</a>
							<a href="http://51qianduan.com/jiaoben">男士</a>
							<a href="http://51qianduan.com/jiaoben">精油</a>
							<a href="http://51qianduan.com/jiaoben">假发</a>
							<a href="http://51qianduan.com/jiaoben">美体</a>
							<a href="http://51qianduan.com/jiaoben">试用服务</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>运动 户外</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">运动鞋</a>
							<a href="http://51qianduan.com/jiaoben">运动服</a>
							<a href="http://51qianduan.com/jiaoben">运动用品</a>
							<a href="http://51qianduan.com/jiaoben">户外</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>手机 数码</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">手机</a>
							<a href="http://51qianduan.com/jiaoben">笔记本</a>
							<a href="http://51qianduan.com/jiaoben">相机</a>
							<a href="http://51qianduan.com/jiaoben">平板电脑</a>
							<a href="http://51qianduan.com/jiaoben">配件</a>
							<a href="http://51qianduan.com/jiaoben">电脑硬件</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>家用电器</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">大家电</a>
							<a href="http://51qianduan.com/jiaoben">影音电器</a>
							<a href="http://51qianduan.com/jiaoben">生活电器</a>
							<a href="http://51qianduan.com/jiaoben">厨房电器</a>
							<a href="http://51qianduan.com/jiaoben">健康护理</a>
							<a href="http://51qianduan.com/jiaoben">剃须刀</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>家具 建材</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">家具</a>
							<a href="http://51qianduan.com/jiaoben">卫浴</a>
							<a href="http://51qianduan.com/jiaoben">地板</a>
							<a href="http://51qianduan.com/jiaoben">灯具</a>
							<a href="http://51qianduan.com/jiaoben">五金</a>
							<a href="http://51qianduan.com/jiaoben">开关</a>
							<a href="http://51qianduan.com/jiaoben">装修设计</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>家纺 居家</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">家纺</a>
							<a href="http://51qianduan.com/jiaoben">磨毛套件</a>
							<a href="http://51qianduan.com/jiaoben">羽绒被</a>
							<a href="http://51qianduan.com/jiaoben">枕头</a>
							<a href="http://51qianduan.com/jiaoben">软饰</a>
							<a href="http://51qianduan.com/jiaoben">居家</a>
							<a href="http://51qianduan.com/jiaoben">厨房</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>食品</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">零食</a>
							<a href="http://51qianduan.com/jiaoben">进口</a>
							<a href="http://51qianduan.com/jiaoben">茶叶</a>
							<a href="http://51qianduan.com/jiaoben">冲饮</a>
							<a href="http://51qianduan.com/jiaoben">酒水</a>
							<a href="http://51qianduan.com/jiaoben">粮油</a>
							<a href="http://51qianduan.com/jiaoben">干货</a>
							<a href="http://51qianduan.com/jiaoben">生鲜</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>医药保健</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">保健</a>
							<a href="http://51qianduan.com/jiaoben">滋补</a>
							<a href="http://51qianduan.com/jiaoben">蛋白粉</a>
							<a href="http://51qianduan.com/jiaoben">阿胶</a>
							<a href="http://51qianduan.com/jiaoben">药品</a>
							<a href="http://51qianduan.com/jiaoben">血压仪</a>
							<a href="http://51qianduan.com/jiaoben">计生</a>
							<a href="http://51qianduan.com/jiaoben">体检</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>母婴用品</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">玩具</a>
							<a href="http://51qianduan.com/jiaoben">宝宝食品</a>
							<a href="http://51qianduan.com/jiaoben">用品</a>
							<a href="http://51qianduan.com/jiaoben">童装</a>
							<a href="http://51qianduan.com/jiaoben">孕装</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>汽车 配件</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">新车</a>
							<a href="http://51qianduan.com/jiaoben">座垫</a>
							<a href="http://51qianduan.com/jiaoben">脚垫</a>
							<a href="http://51qianduan.com/jiaoben">GPS</a>
							<a href="http://51qianduan.com/jiaoben">车衣</a>
							<a href="http://51qianduan.com/jiaoben">洗车机</a>
							<a href="http://51qianduan.com/jiaoben">水枪</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>文化 玩乐</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">电子凭证</a>
							<a href="http://51qianduan.com/jiaoben">图书</a>
							<a href="http://51qianduan.com/jiaoben">乐器</a>
							<a href="http://51qianduan.com/jiaoben">旅游</a>
							<a href="http://51qianduan.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://51qianduan.com/jiaoben">女装</a>
							<a href="http://51qianduan.com/jiaoben">男装</a>
							<a href="http://51qianduan.com/jiaoben">内衣</a>
							<a href="http://51qianduan.com/jiaoben">家居服</a>
							<a href="http://51qianduan.com/jiaoben">配件</a>
							<a href="http://51qianduan.com/jiaoben">羽绒</a>
							<a href="http://51qianduan.com/jiaoben">呢大衣</a>
							<a href="http://51qianduan.com/jiaoben">毛衣</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>鞋 箱包</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">女鞋</a>
							<a href="http://51qianduan.com/jiaoben">男鞋</a>
							<a href="http://51qianduan.com/jiaoben">箱包</a>
							<a href="http://51qianduan.com/jiaoben">女包</a>
							<a href="http://51qianduan.com/jiaoben">男包</a>
							<a href="http://51qianduan.com/jiaoben">旅行箱</a>
							<a href="http://51qianduan.com/jiaoben">钱包 </a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>珠宝、手表</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">饰品</a>
							<a href="http://51qianduan.com/jiaoben">项链</a>
							<a href="http://51qianduan.com/jiaoben">珠宝</a>
							<a href="http://51qianduan.com/jiaoben">钻石</a>
							<a href="http://51qianduan.com/jiaoben">手表</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>化妆品</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">护肤</a>
							<a href="http://51qianduan.com/jiaoben">彩妆</a>
							<a href="http://51qianduan.com/jiaoben">香水</a>
							<a href="http://51qianduan.com/jiaoben">男士</a>
							<a href="http://51qianduan.com/jiaoben">精油</a>
							<a href="http://51qianduan.com/jiaoben">假发</a>
							<a href="http://51qianduan.com/jiaoben">美体</a>
							<a href="http://51qianduan.com/jiaoben">试用服务</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>运动 户外</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">运动鞋</a>
							<a href="http://51qianduan.com/jiaoben">运动服</a>
							<a href="http://51qianduan.com/jiaoben">运动用品</a>
							<a href="http://51qianduan.com/jiaoben">户外</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>手机 数码</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">手机</a>
							<a href="http://51qianduan.com/jiaoben">笔记本</a>
							<a href="http://51qianduan.com/jiaoben">相机</a>
							<a href="http://51qianduan.com/jiaoben">平板电脑</a>
							<a href="http://51qianduan.com/jiaoben">配件</a>
							<a href="http://51qianduan.com/jiaoben">电脑硬件</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>家用电器</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">大家电</a>
							<a href="http://51qianduan.com/jiaoben">影音电器</a>
							<a href="http://51qianduan.com/jiaoben">生活电器</a>
							<a href="http://51qianduan.com/jiaoben">厨房电器</a>
							<a href="http://51qianduan.com/jiaoben">健康护理</a>
							<a href="http://51qianduan.com/jiaoben">剃须刀</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>家具 建材</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">家具</a>
							<a href="http://51qianduan.com/jiaoben">卫浴</a>
							<a href="http://51qianduan.com/jiaoben">地板</a>
							<a href="http://51qianduan.com/jiaoben">灯具</a>
							<a href="http://51qianduan.com/jiaoben">五金</a>
							<a href="http://51qianduan.com/jiaoben">开关</a>
							<a href="http://51qianduan.com/jiaoben">装修设计</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>家纺 居家</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">家纺</a>
							<a href="http://51qianduan.com/jiaoben">磨毛套件</a>
							<a href="http://51qianduan.com/jiaoben">羽绒被</a>
							<a href="http://51qianduan.com/jiaoben">枕头</a>
							<a href="http://51qianduan.com/jiaoben">软饰</a>
							<a href="http://51qianduan.com/jiaoben">居家</a>
							<a href="http://51qianduan.com/jiaoben">厨房</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>食品</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">零食</a>
							<a href="http://51qianduan.com/jiaoben">进口</a>
							<a href="http://51qianduan.com/jiaoben">茶叶</a>
							<a href="http://51qianduan.com/jiaoben">冲饮</a>
							<a href="http://51qianduan.com/jiaoben">酒水</a>
							<a href="http://51qianduan.com/jiaoben">粮油</a>
							<a href="http://51qianduan.com/jiaoben">干货</a>
							<a href="http://51qianduan.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://51qianduan.com/jiaoben">女装</a>
							<a href="http://51qianduan.com/jiaoben">男装</a>
							<a href="http://51qianduan.com/jiaoben">内衣</a>
							<a href="http://51qianduan.com/jiaoben">家居服</a>
							<a href="http://51qianduan.com/jiaoben">配件</a>
							<a href="http://51qianduan.com/jiaoben">羽绒</a>
							<a href="http://51qianduan.com/jiaoben">呢大衣</a>
							<a href="http://51qianduan.com/jiaoben">毛衣</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>鞋 箱包</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">女鞋</a>
							<a href="http://51qianduan.com/jiaoben">男鞋</a>
							<a href="http://51qianduan.com/jiaoben">箱包</a>
							<a href="http://51qianduan.com/jiaoben">女包</a>
							<a href="http://51qianduan.com/jiaoben">男包</a>
							<a href="http://51qianduan.com/jiaoben">旅行箱</a>
							<a href="http://51qianduan.com/jiaoben">钱包 </a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>珠宝、手表</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">饰品</a>
							<a href="http://51qianduan.com/jiaoben">项链</a>
							<a href="http://51qianduan.com/jiaoben">珠宝</a>
							<a href="http://51qianduan.com/jiaoben">钻石</a>
							<a href="http://51qianduan.com/jiaoben">手表</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>化妆品</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">护肤</a>
							<a href="http://51qianduan.com/jiaoben">彩妆</a>
							<a href="http://51qianduan.com/jiaoben">香水</a>
							<a href="http://51qianduan.com/jiaoben">男士</a>
							<a href="http://51qianduan.com/jiaoben">精油</a>
							<a href="http://51qianduan.com/jiaoben">假发</a>
							<a href="http://51qianduan.com/jiaoben">美体</a>
							<a href="http://51qianduan.com/jiaoben">试用服务</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>运动 户外</span></h3>
						<p class="mcate-item-bd">
							<a href="http://51qianduan.com/jiaoben">运动鞋</a>
							<a href="http://51qianduan.com/jiaoben">运动服</a>
							<a href="http://51qianduan.com/jiaoben">运动用品</a>
							<a href="http://51qianduan.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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: flash导航菜单 flash导航条 flash导航 flash菜单 flash下拉菜单 flash下拉导航菜单 导航切换 菜单切换 右键菜单 滑动导航菜单 滑动导航 滑动菜单 滚动导航菜单 滚动菜单 滚动导航 收缩菜单 收缩导航 h5动画导航 h5动画菜单 html5动画导航 html5动画菜单 浮动菜单 浮动导航 滚动切换 滚动条切换 滑动选项卡 滑动切换 滑动手风琴 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动星星打分 导航菜单 导航条 菜单栏 导航栏 分类导航 响应式导航条 响应式导航 其他 导航切换 菜单切换 二级菜单 二级导航菜单 二级导航 下拉列表 下拉菜单 下拉导航 下拉导航菜单 下拉菜单导航 响应式下拉菜单 固定导航 固定菜单 导航菜单插件 导航插件 菜单插件 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到