注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery导航tab,缓慢弹出下拉效果

jQuery插件 fishcity 2391浏览

jQuery导航

jQuery tab式导航菜单,缓慢弹出下拉效果,二级导航自动收缩高度,代码简洁,功能实用且兼容所有浏览器,可说是制作门站不可以多得的一款jquery插件,嘿嘿,说错了,它不是插牛,只是几行代码而已。

使用方法:

引入jquery库和样式表

<link type="text/css" href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

构建html

<div class="nav_menu">
	<div class="nav">
		<div class="list" id="navlist">
			<ul id="navfouce">
				<li><a href="http://www.jqcool.net/">公司概况</a></li>   
				<li><a href="http://www.jqcool.net/">产品展示</a></li>   
				<li><a href="http://www.jqcool.net/">新闻动态</a></li>
				<li><a href="http://www.jqcool.net/">营销网络</a></li>
				<li><a href="http://www.jqcool.net/">照明知识</a></li>   
				<li><a href="http://www.jqcool.net/">人力资源</a></li>   
				<li><a href="http://www.jqcool.net/">客服中心</a></li>   
				<li><a href="http://www.jqcool.net/">联系我们</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.jqcool.net">女装</a>
							<a href="http://www.jqcool.net">男装</a>
							<a href="http://www.jqcool.net">内衣</a>
							<a href="http://www.jqcool.net">家居服</a>
							<a href="http://www.jqcool.net">配件</a>
							<a href="http://www.jqcool.net">羽绒</a>
							<a href="http://www.jqcool.net">呢大衣</a>
							<a href="http://www.jqcool.net">毛衣</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>鞋 箱包</span></h3>
						<p class="mcate-item-bd">
							<a href="http://www.jqcool.net">女鞋</a>
							<a href="http://www.jqcool.net">男鞋</a>
							<a href="http://www.jqcool.net">箱包</a>
							<a href="http://www.jqcool.net">女包</a>
							<a href="http://www.jqcool.net">男包</a>
							<a href="http://www.jqcool.net">旅行箱</a>
							<a href="http://www.jqcool.net">钱包 </a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>珠宝、手表</span></h3>
						<p class="mcate-item-bd">
							<a href="http://www.jqcool.net">饰品</a>
							<a href="http://www.jqcool.net">项链</a>
							<a href="http://www.jqcool.net">珠宝</a>
							<a href="http://www.jqcool.net">钻石</a>
							<a href="http://www.jqcool.net">手表</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>化妆品</span></h3>
						<p class="mcate-item-bd">
							<a href="http://www.jqcool.net">护肤</a>
							<a href="http://www.jqcool.net">彩妆</a>
							<a href="http://www.jqcool.net">香水</a>
							<a href="http://www.jqcool.net">男士</a>
							<a href="http://www.jqcool.net">精油</a>
							<a href="http://www.jqcool.net">假发</a>
							<a href="http://www.jqcool.net">美体</a>
							<a href="http://www.jqcool.net">试用服务</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>运动 户外</span></h3>
						<p class="mcate-item-bd">
							<a href="http://www.jqcool.net">运动鞋</a>
							<a href="http://www.jqcool.net">运动服</a>
							<a href="http://www.jqcool.net">运动用品</a>
							<a href="http://www.jqcool.net">户外</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>手机 数码</span></h3>
						<p class="mcate-item-bd">
							<a href="http://www.jqcool.net">手机</a>
							<a href="http://www.jqcool.net">笔记本</a>
							<a href="http://www.jqcool.net">相机</a>
							<a href="http://www.jqcool.net">平板电脑</a>
							<a href="http://www.jqcool.net">配件</a>
							<a href="http://www.jqcool.net">电脑硬件</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>家用电器</span></h3>
						<p class="mcate-item-bd">
							<a href="http://www.jqcool.net">大家电</a>
							<a href="http://www.jqcool.net">影音电器</a>
							<a href="http://www.jqcool.net">生活电器</a>
							<a href="http://www.jqcool.net">厨房电器</a>
							<a href="http://www.jqcool.net">健康护理</a>
							<a href="http://www.jqcool.net">剃须刀</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>家具 建材</span></h3>
						<p class="mcate-item-bd">
							<a href="http://www.jqcool.net">家具</a>
							<a href="http://www.jqcool.net">卫浴</a>
							<a href="http://www.jqcool.net">地板</a>
							<a href="http://www.jqcool.net">灯具</a>
							<a href="http://www.jqcool.net">五金</a>
							<a href="http://www.jqcool.net">开关</a>
							<a href="http://www.jqcool.net">装修设计</a>
						</p>
					</li>
					
					<li>
						<h3 class="mcate-item-hd"><span>食品</span></h3>
						<p class="mcate-item-bd">
							<a href="http://www.jqcool.net">零食</a>
							<a href="http://www.jqcool.net">进口</a>
							<a href="http://www.jqcool.net">茶叶</a>
							<a href="http://www.jqcool.net">冲饮</a>
							<a href="http://www.jqcool.net">酒水</a>
							<a href="http://www.jqcool.net">粮油</a>
							<a href="http://www.jqcool.net">干货</a>
							<a href="http://www.jqcool.net">生鲜</a>
						</p>
					</li>
				
					<li>
						<h3 class="mcate-item-hd"><span>母婴用品</span></h3>
						<p class="mcate-item-bd">
							<a href="http://www.jqcool.net">玩具</a>
							<a href="http://www.jqcool.net">宝宝食品</a>
							<a href="http://www.jqcool.net">用品</a>
							<a href="http://www.jqcool.net">童装</a>
							<a href="http://www.jqcool.net">孕装</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.jqcool.net">女装</a>
							<a href="http://www.jqcool.net">男装</a>
							<a href="http://www.jqcool.net">内衣</a>
							<a href="http://www.jqcool.net">家居服</a>
							<a href="http://www.jqcool.net">配件</a>
							<a href="http://www.jqcool.net">羽绒</a>
							<a href="http://www.jqcool.net">呢大衣</a>
							<a href="http://www.jqcool.net">毛衣</a>
						</p>
					</li>
				
					<li>
						<h3 class="mcate-item-hd"><span>家用电器</span></h3>
						<p class="mcate-item-bd">
							<a href="http://www.jqcool.net">大家电</a>
							<a href="http://www.jqcool.net">影音电器</a>
							<a href="http://www.jqcool.net">生活电器</a>
							<a href="http://www.jqcool.net">厨房电器</a>
							<a href="http://www.jqcool.net">健康护理</a>
							<a href="http://www.jqcool.net">剃须刀</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.jqcool.net">女装</a>
							<a href="http://www.jqcool.net">男装</a>
							<a href="http://www.jqcool.net">内衣</a>
							<a href="http://www.jqcool.net">家居服</a>
							<a href="http://www.jqcool.net">配件</a>
							<a href="http://www.jqcool.net">羽绒</a>
							<a href="http://www.jqcool.net">呢大衣</a>
							<a href="http://www.jqcool.net">毛衣</a>
						</p>
					</li>
					
					
					<li>
						<h3 class="mcate-item-hd"><span>化妆品</span></h3>
						<p class="mcate-item-bd">
							<a href="http://www.jqcool.net">护肤</a>
							<a href="http://www.jqcool.net">彩妆</a>
							<a href="http://www.jqcool.net">香水</a>
							<a href="http://www.jqcool.net">男士</a>
							<a href="http://www.jqcool.net">精油</a>
							<a href="http://www.jqcool.net">假发</a>
							<a href="http://www.jqcool.net">美体</a>
							<a href="http://www.jqcool.net">试用服务</a>
						</p>
					</li>
					<li>
						<h3 class="mcate-item-hd"><span>运动 户外</span></h3>
						<p class="mcate-item-bd">
							<a href="http://www.jqcool.net">运动鞋</a>
							<a href="http://www.jqcool.net">运动服</a>
							<a href="http://www.jqcool.net">运动用品</a>
							<a href="http://www.jqcool.net">户外</a>
						</p>
					</li>
				</ul>
			</div>
			
		</div>
	</div>
</div>

写入JS实现效果

<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>

转载请注明:jQ酷 » jQuery导航tab,缓慢弹出下拉效果

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。