jQuery简易左侧分类栏，仿国际版阿里巴巴。

最新推荐文章于 2024-03-23 21:19:22 发布
最新推荐文章于 2024-03-23 21:19:22 发布
阅读量819 收藏
点赞数
分类专栏： CSS JavaScript 文章标签： jquery class function div stylesheet 阿里巴巴
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiancm2001/article/details/6792313
版权

为什么是简易版？

因为没有加入国际版阿里巴巴分类栏根据窗口大小调整位置的功能。



style.css

#sorts-list {
	position: absolute;
	width: 150px;
	border:1px solid #aaa;
}

#sorts-list .fore {
	height:40px;
	line-height:40px;
	background:#eee;
}

#sorts-list .fore a {
	text-decoration:none;
	color:#03c;
	padding-left: 20px;
	font-size:18px;
	font-weight:400;
	font-family:Tahoma;
}

#sorts-list .item {
	width: 150px;
	height: 30px;
	margin:0;
	padding:0;
	border: solid #eee;
	border-width:1px 0 0 0;
}

#sorts-list .item span {
	position:relative;
	top:4px;
	height:20px;
	display:block;
	width: 140px;
	background:#fff;
	
}

#sorts-list .item .background-img {
	width:8px;
	height:20px;
	float:right;
	margin-right:0px;
	background-image:url(images/other.png);
	background-repeat:no-repeat;
	background-attachment:scroll;
}

#sorts-list .item a {
	width: 150px;
	height: 20px;
	padding-left: 20px;
	line-height: 20px;
	text-decoration:none;
	color:#333;
	font-size:12px;
	font-family:Tahoma;
}

#sorts-list .item .sorts-subs {
	display:none;
	position: absolute;
	left: 140px;
	top: 0;
	width: 160px;
	border:solid #aaa;
	border-width:1px 1px 1px 1px;
	background:#fff;
}

#sorts-list .item .sorts-subs div {
	height: 20px;
}

#sorts-list .hover span {
	z-index:3;
	border:#aaa solid;
	border-width:1px 0 1px 1px;
}

#sorts-list .hover span a {
	color:#3a91e7;
	text-decoration:underline;
}

#sorts-list .hover .background-img {
	margin-right:5px;;
}

#sorts-list .hover .sorts-subs {
	z-index:2;
}

#sorts-list .hover .sorts-subs a:hover {
	color:#3a91e7;
	text-decoration:underline;
}


index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
<link rel=stylesheet href="style.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
</head>

<body>
<div id="left-banner">
    <div id="sorts-list">
		<div class="fore">
	    	<a href="#">Categories</a>
		</div>
    
		<div class="item">
			<span>
				<div class="background-img"></div>
				<a href="#">Agriculture</a>
			</span>
			<div class="sorts-subs" style="top:45px">
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
			</div>
   		</div>    
        
		<div class="item">
			<span>
				<div class="background-img"></div>
				<a href="#">Agriculture</a>
			</span>
			<div class="sorts-subs" style="top:76px">
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
			</div>
   		</div>
    
		<div class="item">
			<span>
				<div class="background-img"></div>
				<a href="#">Agriculture</a>
			</span>
			<div class="sorts-subs" style="top:107px">
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
			</div>
   		</div>
    
		<div class="item">
			<span>
				<div class="background-img"></div>
				<a href="#">Agriculture</a>
			</span>
			<div class="sorts-subs" style="top:138px">
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
			</div>
   		</div>
    
		<div class="item">
			<span>
				<div class="background-img"></div>
				<a href="#">Agriculture</a>
			</span>
			<div class="sorts-subs" style="top:169px">
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
			</div>
   		</div>
    
		<div class="item">
			<span>
				<div class="background-img"></div>
				<a href="#">Agriculture</a>
			</span>
			<div class="sorts-subs" style="top:200px">
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
			</div>
   		</div>
    
		<div class="item">
			<span>
				<div class="background-img"></div>
				<a href="#">Agriculture</a>
			</span>
			<div class="sorts-subs" style="top:231px">
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
				<div>
					<a href="#">Agriculture</a>
				</div>
			</div>
   		</div>

	</div>
</div>
<script>
	$(document).ready(function() {
		$(".item span").hover(
		function() {
			$(this).next().css("display","block");
			$(this).parent().addClass("hover");
		},
		function() {
			$(this).next().css("display","none");
			$(this).parent().removeClass("hover");
		});

		$(".sorts-subs").hover(
		function() {
			$(this).css("display","block");
			$(this).parent().addClass("hover");
		},
		function() {
			$(this).css("display","none");
			$(this).parent().removeClass("hover");
		});	
	});
</script>
</body>
</html>


简生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
天猫整站（简易版）SSM（六）无需登录即可使用的功能——首页
lyj2018gyq的博客
09-28 1231
目录 一、所需的数据 二、Category 三、ProductService 四、ProductServiceImpl 五、ForeController 六、home.jsp 6.1 包含的页面 6.2 header.jsp 6.3 top.jsp 6.4 search.jsp 6.5 fotter.jsp 6.6 homePage.jsp 6.6.1 包含关系 6.6...
天猫网页前端实现
ZhuangXuward
05-10 1万+
文章目录前言公共页面置顶导航栏效果图布局搜索框效果布局页脚效果布局首页导航轮播效果布局关于背景颜色关于轮播图 前言 学习了jQuery和boostrap4的教程，苦于没有项目练手，于是决定模仿天猫网页，纯前端实现。 首先先把天猫网页规划一下，大致可以分为： 公共页面 首页 每一部分逐步完成，最后整合在一起。 公共页面 公共页面就是每个页面都有的内容，包括页头位置的置顶导航栏，紧接着页头的搜索框...
最流行的android组件大全
混魔MJM的博客
08-19 1365
原文链接：http://blog.csdn.net/smallnest/article/details/38658593/ Android 是目前最流行的移动操作系统之一。 随着新版本的不断发布， Android的功能也日益强大， 涌现了很多流行的应用程序， 也催生了一大批的优秀的组件。 本文试图将目前流行的组件收集起来以供参考， 如果你发现本文还没有列出的组件，欢迎在评论中贴出来，我会定
JAVA面试总结（初版）
weixin_44995668的博客
04-13 1554
前端 1.HTML 2.方法 2.CSS 3.JS 4.JQuery 4.1.jquery的事件绑定和事件委派的区别是什么 事件绑定：将事件直接与元素进行绑定 事件委派：多用于很多元元素都要绑定事件的情况下，通过子节点绑定的元素传给父节点，来同一管理全部后代子元素，避免了很多重复的事件绑定 4.2、说出10个jquery的选择器 4.3.哪种方式更加高效document.getElementID(‘id’)还是$(‘#ID’) 第一种，因为它直接调用了JavaScript引擎。T…公社7十
Java超强面试题
下雨天_不打伞的博客
08-19 1446
Java程序员面试题集（1-50） 一、Java基础部分 1、面向对象的特征有哪些方面? 答：面向对象的特征主要有以下几个方面： 1)抽象：抽象是将一类对象的共同特征总结出来构造类的过程，包括数据抽象和行为抽象两方面。抽象只关注对象有哪些属性和行为，并不关注这些行为的细节是什么。 2)继承：继承是从已有类得到继承信息创建新类的过程。提供继承信息的类被称为父类（超类、基类）；得到继承信息的类被称为子...
Java面试八股文 很详细了！！！
最新发布
做一个善良的人，做好自己的事，如果愿意，再发一份光。
03-23 1612
Java面试八股文，很全面了！
Java程序员面试题
热门推荐
mrdu_somefun的博客
03-08 1万+
下面的内容是对网上原有的Java面试题集及答案进行了全面修订之后给出的负责任的题目和答案，原来的题目中有很多重复题目和无价值的题目，还有不少的参考答案也是错误的，修改后的Java面试题集参照了JDK最新版本，去掉了EJB 2.x等无用内容，补充了数据结构和算法相关的题目、经典面试编程题、大型网站技术架构、操作系统、数据库、软件测试、设计模式、UML等内容，同时还对很多知识点进行了深入的剖析，例
仿阿里巴巴首页jQuery幻灯片切换代码.zip
07-11
【标题】中的“仿阿里巴巴首页jQuery幻灯片切换代码”是指一种使用JavaScript库jQuery实现的网页动态效果，这种效果常用于网站的首页，用来展示一系列图片或内容，以吸引用户的注意力并提供良好的用户体验。...
jQuery阿里巴巴顶部导航栏下拉菜单特效代码
03-20
【jQuery阿里巴巴顶部导航栏下拉菜单特效代码】是一种在网页设计中常见的交互功能，它能够提升用户界面的可操作性和用户体验。此特效是基于JavaScript库jQuery实现的，jQuery以其简洁的API和强大的功能，被广泛应用...
jQuery阿里巴巴顶部导航栏下拉菜单.zip
05-24
在本项目中，“jQuery阿里巴巴顶部导航栏下拉菜单.zip”是一个包含实现阿里巴巴风格的顶部导航栏及下拉菜单功能的代码资源。这个压缩包主要针对前端网页开发，特别是那些希望在自己的网站上创建类似阿里巴巴首页的...
仿阿里巴巴首页jQuery焦点图.zip
11-25
【标题】"仿阿里巴巴首页jQuery焦点图.zip"的项目是一个前端开发示例，旨在实现类似阿里巴巴官方网站首页的焦点图效果。这种效果通常用于网站的头部，展示一系列动态切换的图片或内容，提升用户体验，吸引用户的注意...
仿阿里巴巴首页jQuery焦点图
04-07
总结来说，仿阿里巴巴首页的jQuery焦点图是一个集成了动画效果、图片轮播和交互控制的复杂组件，它展示了jQuery在网页动态效果中的强大能力，同时也体现了优秀网页设计的诸多要素。理解和掌握这些知识点，对于任何...
利用 turnjs 做的相簿效果.
简生的代码备忘录
02-09 9379
turnjs 是一个基于HTML5和jQuery实现模拟真实翻页效果的库. 翻页的效果做得很出色,并且:    +支持硬件加速    +支持跨平台    +使用简单    +体积仅15k 下载地址: 压缩版:http://www.turnjs.com/turn.min.js 完整版:https://github.com/blasten/turn.js 顺便
<高性能JavaScript>笔记 [1~3]
简生的代码备忘录
02-26 6530
这是一本很好的书,主要讨论实际js开发时要注意的性能问题. 也算是一本JS的进阶读物,如果要看此书,建议先看 一:加载和执行 主要讲述了如何更高效的载入JavaScript脚本文件,解决浏览器的阻塞问题. 其中最简单的解决方法就是把导入的js文件的标签写在  前,而且不需要使用 onload 事件. 尽量把js文件进行压缩和合并,因为每次加载一个外链js文件都需要发送
信息反馈页
简生的代码备忘录
06-30 3815
1.加了类新浪微博的闪烁提醒； 2.正则判断内容是否空格； body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,ul,li{margin:0;padding:0;}table{border-collapse:collapse;bor
<高性能JavaScript>笔记 [4~6]
简生的代码备忘录
03-04 3633
四:算法和流程控制 - for, while 和 do-while 循环性能特性相似,所以没有一种循环类型明显快于或慢于其他类型. - 避免使用 for-in 循环,除非你需要遍历一个属性数量未知的对象.(因为会对原型链进行循环,产生不必要的性能损耗) - 改善循环性能的最佳方式是减少每次迭代的运算量和减少循环迭代次数. - 通常来说, switch 总是比 if-else 快
一些有意思的JavaScript题目.
简生的代码备忘录
02-15 3585
在博客园 汤姆大叔的博客 看到的一些有意思的JavaScript题目. 在  中: 判断下面代码弹出的结果. Q1: if (!("a" in window)) { var a = 1; } alert(a);Q2: var a = 1, b = function a(x) { x && a(--x); }; alert(a);
解决img对大部分CSS样式不支持的问题
简生的代码备忘录
09-14 3568
主要参考： http://webdesignerwall.com/demo/css3-image-styles/ http://www.qianduan.net/css3-image-styles.html 详情到上面两个连接看。 主要自己整理一下，顺便把jQuery的代码专为JavaScript，做个备忘。 DEMO:http://jsfiddle.net/QkRKC/
15天速成jQuery：简易上手与高性能应用
"15天学会jQuery(完整版)教程深入介绍了这款流行的JavaScript库，旨在帮助读者在短时间内掌握其核心功能和优势。jQuery以其简洁、高效的特点，让开发者能够用少量代码实现复杂的网页交互和动态效果，从而提升网页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值