现在位置首页 / 生活多美好 /正文

jquery仿天猫左侧菜单-可伸缩支持二级分类

作者: IT小兵 | 2013年8月5日| 热度:℃ | 评论: |参与:

今天给大家分享一个仿天猫的左侧菜单的jquery代码和css样式。

如图:

image

1.支持鼠标滚动

2.支持耳机菜单。二级菜单样式可以自定义

3.支持全部折叠和滚动折叠

DEMO下载:Jquery 仿天猫左侧菜单

预览地址:http://www.bluesdream.com/case/jquery/jQuery-tmall-menu/


CSS样式:

<style type="text/css">	
*{ margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{ font-size:100%;}
a{ text-decoration:none;}
ul,ol,li{list-style-type:none;}
img,input,textarea{border:0;}
em{ font-style:normal;}
body{ font:12px/1.5 'Lucida Grande',tahoma,arial; background:url(images/body_bg.jpg); height:3000px;}
.hide{ display:none;}
#header{ height:90px; background:#B20000;}
#nav{ height:30px; background:#8E0000; line-height:30px; text-align:right; padding-right:2%; color:white;}
#nav a{ color:white; text-decoration:none;}
.categoryHd i,.categoryBd .itemHd i,.categoryBd .itemBottom i,.categoryBd .itemHd a,.categoryBd .itemIcon{ background:url(images/script.png) no-repeat;}
.mallMain{ width:85%; margin:0 auto; position:relative;}
.mallLeft{ width:240px; background:white; position:absolute; top:-30px; left:0; z-index:10;}
.mallLeft h2,.mallLeft h3,.mallLeft h4{ font-family:'\5FAE\8F6F\96C5\9ED1';}
.category{ width:240px; background:white; position:relative; z-index:20;}
.categoryHd { height:30px; line-height:30px; font-size:14px; color:white; padding:0 15px; background:#A21C1D; position:relative; z-index:100;}
.categoryHd i{ display:block; width:21px; height:19px; border:1px solid #780000; background-color:#BE0000; position:absolute; top:5px; cursor:pointer;}
.categoryHd i.expand{ right:27px; border-radius:2px 0 0 2px; background-position:0 0;}
.categoryHd i.simple{ right:5px; border-radius:2px 2px 0 0; background-position:-22px 0;}
.categoryHd i.selected{ background-color:#850000; cursor:default;}
.categoryHd i.hide{ display:none;}
.categoryBd{ border:1px solid #E6E6E6; border-top:none;}
.categoryBd .item,.categoryBd .itemBottom{ padding:8px 0; position:relative; overflow:hidden;}
.categoryBd .item2,.categoryBd .item4,.categoryBd .item6,.categoryBd .item8,.categoryBd .item10,.categoryBd .item12,.categoryBd .item14,.itemBottom{ background:#F1F1F1;}
.categoryBd .itemIcon,.categoryBd .itemBottom .itemIcon{ display:block; width:5px; height:9px; background-position:-50px -4px; position:absolute; top:40%; right:10px; visibility:hidden;}
.categoryBd .itemHd{ height:14px; line-height:14px; padding:0 10px 0 38px; position:relative;}
.categoryBd .itemHd a{ display:inline-block; width:44px; height:16px; line-height:16px; color:white; font-size:12px; font-weight:normal; padding-left:10px; margin:-3px 0 0 5px; background-position:0 -100px; vertical-align:middle;}
.categoryBd .itemHd i{ display:block; width:16px; height:16px; position:absolute; top:-1px; left:15px;}
.categoryBd .itemHd1 i{ background-position:0 -20px;}
.categoryBd .itemHd2 i{ background-position:0 -40px;}
.categoryBd .itemHd3 i{ background-position:-21px -20px;}
.categoryBd .itemHd4 i{ background-position:-21px -40px;}
.categoryBd .itemHd5 i{ background-position:-42px -20px;}
.categoryBd .itemHd6 i{ background-position:-42px -40px;}
.categoryBd .itemHd7 i{ background-position:-63px -20px;}
.categoryBd .itemHd8 i{ background-position:-63px -40px;}
.categoryBd .itemHd9 i{ background-position:-84px -20px;}
.categoryBd .itemHd10 i{ background-position:-84px -40px;}
.categoryBd .itemHd11 i{ background-position:-105px -20px;}
.categoryBd .itemHd12 i{ background-position:-105px -40px;}
.categoryBd .itemHd13 i{ background-position:-126px -20px;}
.categoryBd .itemHd14 i{ background-position:-126px -40px;}
.categoryBd .itemHd15 i{ background-position:-147px -20px;}
.categoryBd .itemBottom a{ display:block; color:black;}
.categoryBd .itemBottom i{ background-position:-147px -40px;}
.categoryBd .itemCol{ height:21px; line-height:21px; padding:0 15px; overflow:hidden;
-webkit-transform: perspective(700px) translateY(0px) translateZ(0px) rotateX(0deg);
-moz-transform: perspective(700px) translateY(0px) translateZ(0px) rotateX(0deg);
-ms-transform: perspective(700px) translateY(0px) translateZ(0px) rotateX(0deg);
-o-transform: perspective(700px) translateY(0px) translateZ(0px) rotateX(0deg);
transform: perspective(700px) translateY(0px) translateZ(0px) rotateX(0deg);
-webkit-transform-origin:50% 0;
-moz-transform-origin:50% 0;
-ms-transform-origin:50% 0;
-o-transform-origin:50% 0;
transform-origin:50% 0;
-webkit-transition: all 600ms ease-in-out;
-moz-transition: all 600ms ease-in-out;
-ms-transition: all 600ms ease-in-out;
-o-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}
.categoryBd .itemCol a{ color:#848484; margin-right:5px;}
.categoryBd .itemCol a:hover{ text-decoration:underline;}
.categoryBd .itemCol_sp{ padding-top:6px;}
.categoryBd .selected{ background-color:#88766E;}
.categoryBd .selected .itemHd1 i{ background-position:0 -60px;}
.categoryBd .selected .itemHd2 i{ background-position:0 -80px;}
.categoryBd .selected .itemHd3 i{ background-position:-21px -60px;}
.categoryBd .selected .itemHd4 i{ background-position:-21px -80px;}
.categoryBd .selected .itemHd5 i{ background-position:-42px -60px;}
.categoryBd .selected .itemHd6 i{ background-position:-42px -80px;}
.categoryBd .selected .itemHd7 i{ background-position:-63px -60px;}
.categoryBd .selected .itemHd8 i{ background-position:-63px -80px;}
.categoryBd .selected .itemHd9 i{ background-position:-84px -60px;}
.categoryBd .selected .itemHd10 i{ background-position:-84px -80px;}
.categoryBd .selected .itemHd11 i{ background-position:-105px -60px;}
.categoryBd .selected .itemHd12 i{ background-position:-105px -80px;}
.categoryBd .selected .itemHd13 i{ background-position:-126px -60px;}
.categoryBd .selected .itemHd14 i{ background-position:-126px -80px;}
.categoryBd .selected .itemHd15 i{ background-position:-147px -60px;}
.categoryBd .selected .itemHd16 i{ background-position:-147px -80px;}
.categoryBd .selected .itemHd,.categoryBd .selected .itemCol a{ color:white;}
.categoryBd .selected .itemHd a{ color:#88766E; background-position:-54px -100px;}
.categoryBd .selected .itemIcon{ visibility:visible;}
.itemSelected .itemCol{
-webkit-transform: perspective(700px) translateY(0px) translateZ(-21px) rotateX(90deg);
-moz-transform: perspective(700px) translateY(0px) translateZ(-21px) rotateX(90deg);
-ms-transform: perspective(700px) translateY(0px) translateZ(-21px) rotateX(90deg);
-o-transform: perspective(700px) translateY(0px) translateZ(-21px) rotateX(90deg);
transform: perspective(700px) translateY(0px) translateZ(-21px) rotateX(90deg);
-webkit-transform-origin:50% 0;
-moz-transform-origin:50% 0;
-ms-transform-origin:50% 0;
-o-transform-origin:50% 0;
transform-origin:50% 0;
-webkit-box-shadow:0 2px 2px #AAA;
-moz-box-shadow:0 2px 2px #AAA;
box-shadow:0 2px 2px #AAA;
background:#EBEBEB;
padding-top:0;
line-height:0;
height:0;
*font-size:0;
}
.itemSelected .itemCol_sp{
-webkit-transform: perspective(700px) translateY(0px) translateZ(-21px) rotateX(-90deg);
-moz-transform: perspective(700px) translateY(0px) translateZ(-21px) rotateX(-90deg);
-ms-transform: perspective(700px) translateY(0px) translateZ(-21px) rotateX(-90deg);
-o-transform: perspective(700px) translateY(0px) translateZ(-21px) rotateX(-90deg);
transform: perspective(700px) translateY(0px) translateZ(-21px) rotateX(-90deg);
-webkit-transform-origin:50% 100%;
-moz-transform-origin:50% 100%;
-ms-transform-origin:50% 100%;
-o-transform-origin:50% 100%;
transform-origin:50% 100%;
-webkit-box-shadow:0 -2px 2px #AAA;
-moz-box-shadow:0 -2px 2px #AAA;
box-shadow:0 -2px 2px #AAA;
}
/* 子类 */
.subCategory{ width:0; position:absolute; left:240px; top:20px; overflow:hidden;}
.subCategory a:hover{ text-decoration:underline;}
.subCategory .subView{ width:744px; height:auto; margin:10px 10px 10px 0; border:1px solid #E6E6E6; border-left:none; background:white; box-shadow:5px 5px 5px rgba(0, 0, 0, 0.2),1px -3px 5px rgba(0, 0, 0, 0.2);}
.subCategory ul{ width:218px; display:inline-block; *display:inline; *zoom:1; margin:10px 0 15px 20px; _margin:10px 0 15px 8px; vertical-align:top; overflow:visible;}
.subCategory .subItem{ width:218px; overflow:hidden;}
.subCategory .subItem_hd{ height:34px; line-height:34px; font-size:15px; border-bottom:2px solid black; margin-bottom:6px;}
.subCategory .subItem_hd a{ color:black;}
.subCategory .subItem_cat{ margin-bottom:6px;}
.subCategory .subItem_title{ height:15px; line-height:15px; padding:7px 0 4px 0; border-top:1px dotted black; margin-right:1px;}
.subCategory .subItem_brand{ margin-bottom:15px;}
.subCategory .subItem p{ margin-left:-11px;}
.subCategory .subItem p a{ display:inline-block; height:15px; line-height:15px; color:#646464; border-left:1px solid #EAEAEA; padding:0 5px 0 10px; margin:2px 0 4px 0;}
.cateFixed{ position:fixed; top:0;}
.browserTip{ height:22px; line-height:22px; text-align:center; color:white; border-bottom:1px solid #8E0000; background:#810539;}
</style>

js脚本:

/*!
 * jQuery左侧浮动折叠菜单 仿天猫
 * Copyright (c) 2013, 梦幻神化 
 * http://www.bluesdream.com
 *
 * Create: 2013.01.09
 * Version: 1.2
 * 
 * 请保留此信息,如果您有修改或意见可通过网站给我留言,也可以通过邮件形式联系本人。
 * Mail: hello@bluesdream.com
 */
(function($) {
	$(function(){
		var nav = $("#nav");
		var category = $(".category");
		var categoryHd = $(".categoryHd");
		var categoryBtn = categoryHd.find("i");
		var categoryBd = $(".categoryBd");
		var subCategory = $(".subCategory");
		var catItem = categoryBd.find(".item");
		var subView = subCategory.find(".subView");
		var s_space = 80; //滚动间距,每滚动多少时,折叠下一个菜单
		var isIE = !!window.ActiveXObject;
		var isIE6 = isIE&&!window.XMLHttpRequest;
		if (isIE) {
			$("body").prepend("<div class=\"browserTip\">亲~你肿么还在使用IE6? 用它上网,不但安全性无法很好保障,还丢失了很多乐趣,为了您和家人的健康请抛弃他~</div>");
		};
		function cancelBubble(event) {
			event.stopPropagation();
		};
		catItem.mouseenter(function(){
			var i = catItem.index(this); //获得当前元素的位置(序列)
			var cur_c = catItem.eq(i);
			var cur_s = subView.eq(i);
			cur_c.addClass("selected").siblings().removeClass('selected');
			cur_s.removeClass('hide').siblings().addClass('hide');
			var subView_w = cur_s.outerWidth(true);
			var subView_h = cur_s.outerHeight(true);
			var subCat_t = catItem.eq(i).offset().top - categoryBd.offset().top + 20;
			var subCat_t2 = $(window).height() -  cur_s.outerHeight(true) - catItem.eq(i).outerHeight(true);
			var subCat_t3 = $(document).scrollTop() - catItem.eq(i).outerHeight(true);
			subCategory.css({'height':subView_h});
			if (!isIE6) {
				if ( subView_h+ subCat_t >= $(window).height() ) {
					if ( subCat_t2 < 0 ) {
						subCategory.stop(true,false).animate({'width':subView_w,'top':'20'},150);
					}else{
						subCategory.stop(true,false).animate({'width':subView_w,'top':subCat_t2},150);
					};
				}else{
					subCategory.stop(true,false).animate({'width':subView_w,'top':subCat_t},150);
				};
			}else{
				if( subCat_t3 > 0 && subCat_t3 + cur_s.outerHeight(true)>$(window).height() ){
					subCategory.stop(true,false).animate({'width':subView_w,'top':subCat_t3},150);
				}else{
					subCategory.stop(true,false).animate({'width':subView_w,'top':'20'},150);
				}
			};
		});
		function closeCat() {
			catItem.removeClass('selected');
			subCategory.stop(true,false).animate({'width':'0'},150);
		}
		categoryHd.mouseenter(function(){ closeCat() });
		category.mouseleave(function(){ closeCat() });
		$(".itemBottom").hover(function(){
			$(this).addClass("selected");
		},function(){
			$(this).removeClass("selected");
		});
		if ( !isIE6 ) {
			/* 菜单折叠 */
			var expand = $(".expand"),simple = $(".simple");
			expand.click(function(){ //展开
				$(this).addClass("selected");
				simple.removeClass("selected");
				catItem.removeClass("itemSelected")
			});
			simple.click(function(){ //折叠
				if ( category.css("position") != "fixed" ) {
					$(this).addClass("selected");
					expand.removeClass("selected");
					catItem.addClass("itemSelected");
				}else{
					$(this).addClass("selected");
					expand.removeClass("selected");
					catItem.addClass("itemSelected");
					categoryBtn.addClass("hide");
				};
			});
			/* 滚动折叠 */
			function s_switch(s_cur) {
				for( var i = 0; i < s_cur; i++ ) {
					if( i < catItem.length) {
						catItem.eq(i).addClass("itemSelected");
					}
					if ( i >= catItem.length ) {
						categoryBtn.addClass("hide");
					};
				}
				for( var i = catItem.length-1; i >= s_cur ; i-- ) {
					if( i >= 0 ) {
						catItem.eq(i).removeClass("itemSelected");
					}
				}
			};
			$(window).scroll(function() {
				var nav_t = nav.offset().top; //判断滚动多少值时,菜单折叠,并切换成浮动状态
				var s_top = $(document).scrollTop();
				var s_cur = parseInt((s_top - nav_t)/ 20 );
				var scrollTimeOut;
				clearTimeout(scrollTimeOut);
				if( s_top > nav_t ){
					if ( simple.attr("class") != "simple selected" ) {
						scrollTimeOut = setTimeout(function() {
							s_switch(s_cur);
						},200);
					};
					category.addClass("cateFixed");
				}else{
					category.removeClass("cateFixed");
					if ( simple.attr("class") != "simple selected" ) {
						scrollTimeOut = setTimeout(function() {
							s_switch(s_cur);
							categoryBtn.removeClass("hide");
						},200);
					};
				};
			});
		};
	});
})(jQuery);

 

Htmldemo:

<div id="content">	
<div class="mallMain">
<div class="mallLeft">
<div class="category">
<h2 class="categoryHd">
<a>所有商品分类</a>
<i class="expand selected" title="扩展视图"></i>
<i class="simple" title="精简视图"></i>
</h2>
<div class="categoryBd">
<ul>
<li class="item item1">
<h3 class="itemHd itemHd1"><i></i>服装/内衣/配件</h3>
<p class="itemCol itemCol_sp">
<a href="#">女装</a>
<a href="#">男装</a>
<a href="#">内衣</a>
<a href="#">羽绒</a>
<a href="#">呢大衣</a>
</p>
<p class="itemCol">
<a href="#">毛衣</a>
<a href="#">保暖</a>
<a href="#">睡衣</a>
<a href="#">男羽绒</a>
<a href="#">男毛衣</a>
</p>
<i class="itemIcon"></i>
</li>
                             <i class="itemIcon"></i>	
</li>
</ul>

建议下载demo。


转发注明来自:IT分享 http://suchso.com

点击阅读本文所属分类的更多文章: 生活多美好 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询