js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:js代码_js特效免费下载_JS特效代码网 > 网页特效 > JS常用代码 > 导航菜单

jquery仿天猫左侧导航菜单分类列表

发布时间:2015-08-30 20:25:22    您是第0位浏览者

本js特效代码兼容:ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jquery仿天猫左侧导航菜单分类列表

jquery仿天猫左侧导航菜单分类列表、仿天猫二级、三级左侧导航菜单筛选分类滑动特效代码效果、模仿天猫二级导航栏,天猫左侧楼梯特效,天猫二级筛选菜单实现,模仿天猫的下拉菜单,天猫分类导航栏代码,天猫左侧悬浮导航js代码,jquery仿天猫商城三级联动,jq仿天猫的商品导航效果,商城左边导航点击样式,jquery大型购物网站分类导航特效代码,仿天猫分类滑动特效,jquery 商城边导航条,仿天猫商城左侧分类导航下拉菜单,联动菜单特效

(function($) {
	var Z_TMAIL_SIDE_DATA = new Array(); // 用来存放列表数据,暂时没有用到
	
	$.fn.Z_TMAIL_SIDER = function(options) {
		var opts = $.extend( {}, $.fn.Z_TMAIL_SIDER.defaults, options);
		var base = this;
		var target = opts.target;
		var Z_MenuList = $(base).find('.Z_MenuList');
		var Z_SubList = $(base).find('.Z_SubList');
		
		initPosition();

		var isIE = navigator.userAgent.indexOf('MSIE') != -1;
	    var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == '6');

	 	// 重新定位
		$(window).resize(function() {
			initPosition();
		});
		
	    //if(isIE6) return;
	    
		$(Z_MenuList).find('li').live('mouseover', function(e, index) {
			var thisLi = this;
			var timeOut = setTimeout(function() {
				showSubList(thisLi);
			},200);
			$(Z_SubList).hover(function() {
				clearTimeout(timeOut);
			},function() {
				hideSubList(thisLi);
			});
			e.stopPropagation();
		}).live('mouseout', function(e) {
			var thisLi = this;
			var timeOut = setTimeout(function(){
				hideSubList(thisLi);
			}, 200);
			$(Z_SubList).hover(function() {
				clearTimeout(timeOut);
			},function() {
				hideSubList(thisLi);
			});
			e.stopPropagation();
		});
		
		if(!isIE6) {
			$(base).find('.title').append('<s class="btn_group bright"><a class="bleft"></a><a class="bright"></a></s>');
			$(base).find('.title .btn_group a').click(function() {
				if($(this).attr('class') == 'bleft' && $(this).parent().attr('class') == 'btn_group bleft') {
					$(base).find('.title .btn_group').attr('class', 'btn_group bright');
					OpenOrCloseMenu(0);
					opts.autoExpan = true;
				}
				if($(this).attr('class') == 'bright' && $(this).parent().attr('class') == 'btn_group bright') {
					$(base).find('.title .btn_group').attr('class', 'btn_group bleft');
					OpenOrCloseMenu(100);
					opts.autoExpan = false;
				}
			});
		}
		
		if(!isIE6) {
			$(Z_MenuList).find('li').click(function() {
				$(this).find('p').slideToggle(500);
			});
		}

		function showSubList(thisLi) {
			if(!isIE6) {
				$(thisLi).append('<s class="menuIcon"></s>');
				$(thisLi).addClass('curr');
			}
			var thisIndex = $(Z_MenuList).find('li').index($(thisLi));
			var subExList = $(Z_SubList).find('div');
			if(thisIndex > subExList.length - 1) return;
			
			var winHeight = $(window).height();
			var subTop = $(thisLi).offset().top - $(window).scrollTop();
			var subBottom = winHeight - subTop - $(Z_SubList).height();
			
			var absTop = $(thisLi).offset().top - $(window).scrollTop() - opts.fTop;
			if(isIE6) {
				absTop = $(thisLi).offset().top - opts.fTop;
			}
			var absLeft = $(target).offset().left - $(base).offset().left;
			if(subBottom < 40) {
				absTop = absTop + subBottom - 40;
			}
			
			$(subExList).each(function(index) {
				if(index == thisIndex) {
					$(this).show();
				} else {
					$(this).hide();
				}
			});
			
			$(Z_SubList).show().stop().animate({
				top: absTop,
				left: absLeft
			}, 100);
		};

		function hideSubList(thisLi) {
			if(!isIE6) {
				$(thisLi).find('.menuIcon').remove();
				$(thisLi).removeClass('curr');
			}
			$(Z_SubList).hide();
		};
		
		// 定位
		function initPosition() {
			if($(base).css('position') == 'absolute') {
				$(base).css({
					top: $(target).offset().top, 
					left: $(target).offset().left - $(base).width()
				}).show();

				$(Z_SubList).css({
					top: $(target).offset().top - 60,
					left: $(target).offset().left - $(base).offset().left
				});
			}
			if($(base).css('position') == 'fixed') {
				$(base).css({
					top: opts.fTop, 
					left: $(target).offset().left - $(base).width()
				}).show();

				$(Z_SubList).css({
					top: opts.cTop - 60,
					left: $(target).offset().left - $(base).offset().left
				});
			}
		};

		// 折叠
		function OpenOrCloseMenu(l) {
			var mList = $(Z_MenuList).find('ul li');
			for(var i = 0; i < l; i++) {
				if(i < mList.length) {
					var thisLi = $(mList[i]);
					$(thisLi).find('p').slideUp(500, function (){
						$(this).hide();
					});
				}
			}
			
			for(var i = mList.length - 1; i >= l; i--) {
				if(i >= 0) {
					var thisLi = $(mList[i]);
					$(thisLi).find('p').slideDown(500, function (){
						$(this).show();
					});
				}
			}
		};
		
		// 滚定折叠
		var scrollTimeOut;
		$(window).scroll(function() {
			if(!opts.autoExpan) return;
			if(isIE6) return;
			clearTimeout(scrollTimeOut);
			var sTop = $(window).scrollTop();
			if(sTop >= opts.cTop) {
				var l = parseInt((sTop - opts.fTop - opts.cTop)/opts.unitHeight);
				scrollTimeOut = setTimeout(function() {
					OpenOrCloseMenu(l);
				},200);
			} else {
				scrollTimeOut = setTimeout(function() {
					OpenOrCloseMenu(0);
				},200);
			}
		});
	};
	
	// 默认配置项
	$.fn.Z_TMAIL_SIDER.defaults = {
		target: $('#Z_RightSide'),
		fTop: 60, // 距离顶部距离
		cTop: 100, // 滚动条滚动多少像素后开始折叠的高度
		unitHeight: 80, // 每滚动多少距离折叠一个
		autoExpan: true
	};
})(jQuery);



jquery 导航菜单 菜单 左侧菜单 菜单列表 分类

jQuery左侧分类导航特效_jquery商城左侧分类菜单导航_橙色导航菜单特效代码

jquery选项卡切换,版块鼠标跟随边框变色特效

jquery带缩略图焦点滚动图特效代码

仿红木之家官网首页jquery焦点全屏大图切换特效

jQuery二级图文平滑下拉菜单特效代码

jquery顶部导航菜单下拉,左侧分类切换特效

jQuery实现固定顶部导航,点触全屏滚动特效代码

jQuery仿腾讯云全屏下拉导航菜单特效代码

一款jQuery跨平台并且带触摸移动端焦点图特效

jQuery四屏焦点图网站特效代码

jquery双重切换的tab选项卡特效代码

jquery仿360音乐搜索主页歌手切换选项卡特效

jquery tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等特效

jquery SuperSlide仿京东首页促销产品tab选项卡切换特效

jquery图片相册特效,切换上下页,还带对话框提醒特效

jquery实现右下角浮动返回顶部并且带微信二维码特效

jquery实现带微信二维码,qq客服,联系电话的返回顶部特效

jQuery右侧浮动客服特效,点击弹出窗口显示更多在线QQ客服

仿OPPO官方商城jquery焦点图特效

jquery绿色的按栏目下拉,信息搜索输入框特效代码

jQuery左侧分类导航特效_jquery商城左侧分类菜单导航_橙色导航菜单特效代码

仿美图秀秀官网,纯CSS二级下拉导航菜单特效

jquery顶部导航菜单下拉,左侧分类切换特效

jQuery仿腾讯云全屏下拉导航菜单特效代码

jquery实现顶部固定、二级栏目之间相互滑动的导航菜单特效

jquery仿海信官网带缩略图下拉导航菜单特效

js实现竖直收缩导航菜单,点击展开折叠菜单特效

jquery导航菜单可拖动特效

jquery实现新闻门户网站二级导航菜单特效

jquery实现中英文字切换导航条,鼠标悬停滑动下拉二级导航菜单

jquery仿马可波罗左侧商品列表导航菜单特效

jquery仿京东商城左侧商品分类导航菜单样式特效_模仿京东二级导航栏_商品分类代码

jquery实现鼠标滚动的时候,导航菜单大小可自动调整的特效

kissy仿阿里云滑动下拉导航菜单特效

jQuery黑色竖直多级导航菜单特效

jquery实现左侧导航菜单滚动特效

jquery仿天猫分类导航通栏底部banner切换代码_jquery仿天猫商城左侧商品分类导航菜单样式特效_模仿天猫二级导航栏

jquery实现垂直多级导航菜单展开收缩特效

CSS实现导航菜单下拉特效代码

js实现风格清新的三级下拉导航菜单特效

友荐云推荐
大家说 此评论不代表本站观点