DIV CSS实现左边商品分类菜单

与某个电子商务网站的左边商品分类菜单类似的用div + css实现的分类菜单，具体的实现如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>左菜单分类显示</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
	$(function(){
		$(".listsum-1 dt").click(function(){
			//点击时切换样式
			$(this).parent().toggleClass("listhover");
			$(this).find("a").toggleClass("on");
		});
	});

</script>

<style type="text/css">

/*小类列表菜单*/
.listsum{
	width:188px;
	border:1px solid #dddddd; 
	padding:10px;
	border-top:2px solid #659a32;}
.listsum .tit{ 
	width:188px; 
	height:15px;
	font:400 14px/15px "微软雅黑";color:#000; 
	padding-bottom:10px; 
	border-bottom:1px solid #dddddd}
.listsum .listsum-1{ cursor:pointer;}
.listsum .listsum-1 dt{ 
	height:35px; 
	line-height:35px; 
	padding-left:15px; 
	font-size:12px; 
	color:#333; 
	background:url(open.gif) no-repeat 2px 13px;}
.listsum .listhover dt{/*设置分类菜单的展开收缩小图标*/
	height:35px; 
	line-height:35px; 
	padding-left:15px; 
	font-size:12px; 
	color:#333; 
	background:url(close.gif) no-repeat 2px 13px; 
	cursor:pointer;}
.listsum .listsum-1 dl dt .on {
	height:35px; 
	line-height:35px; 
	font-size:12px; 
	color:#EB6100; 
	text-decoration:none;}
.listsum .listsum-1 dl dt a:hover {color:#eb6100;}
.listsum .listsum-1 dd{ display:none; padding-left:16px;}
.listsum .listhover dd{ display:block;margin-left: 0;}
.listsum .listsum-1 dd ul{margin: 0;padding: 0;}/*设置ul的内边距外边距为0使得内部li能紧贴ul*/
.listsum .listsum-1 dd ul li{ 
	height:22px; 
	line-height:22px; 
	float:left; 
	width:86px; 
	margin:4px 0px; 
	display:inline;} 
.listsum .listsum-1 dd ul li a{ 
	height:22px; 
	line-height:22px;
	padding:0px 4px; 
	display:inline-block; 
	color:#8f8f8f;
	font-size: 14px;}
.listsum .listsum-1 dd ul li a:hover,.listsum .listsum-1 dd ul li a.onlinked{
	height:22px; line-height:22px; 
	padding:0px 4px; 
	display:inline-block; 
	color:#763e02; 
	background-color:#e6ca9a; 
	text-decoration:none;}
.listsum .listsum-1 dd .clear{clear: both;}
		
</style>

</head>
<body>
	<!-- 左边分类 -->
	<div class="listsum" id="categoryListSum">
		<div class="tit">粮油副食</div>
		<div class="listsum-1"
			data-link="#">
			<dl class="">
				<dt>
					<a class="" href="#"
						hidefocus="true">米面杂粮</a>
				</dt>
				<dd>
					<ul>
						<li><a href="#"
							class="" title="大米">大米</a>
						</li>
						<li><a href="#"
							class="" title="面粉">面粉</a>
						</li>
					</ul>
					<!--清除浮动，可以让dd的高度随着li的增多而增大，下同-->
					<div class="clear"></div>
				</dd>
			</dl>
		</div>
		<div class="listsum-1"
			data-link="#">
			<dl class="">
				<dt>
					<a class="" href="#"
						hidefocus="true">食用油</a>
				</dt>
				<dd>
					<ul>
						<li><a href="#"
							class="" title="花生油">花生油</a>
						</li>
						<li><a href="#"
							class="" title="橄榄油">橄榄油</a>
						</li>
					</ul>
					<div class="clear"></div>
				</dd>
			</dl>
		</div>
		<div class="listsum-1"
			data-link="#">
			<dl class="">
				<dt>
					<a class="" href="#"
						hidefocus="true">调味品</a>
				</dt>
				<dd>
					<ul>
						<li><a href="#"
							class="" title="酱油">酱油</a>
						</li>
						<li><a href="#"
							class="" title="醋">醋</a>
						</li>
					</ul>
					<div class="clear"></div>
				</dd>
			</dl>
		</div>
		<div class="listsum-1"
			data-link="#">
			<dl class="">
				<dt>
					<a class="" href="#"
						hidefocus="true">南北干货</a>
				</dt>
				<dd>
					<ul>
						<li><a href="#"
							class="" title="干菌菇类">干菌菇类</a>
						</li>
						<li><a href="#"
							class="" title="粉丝腐竹类">粉丝腐竹类</a>
						</li>
						<li><a href="#"
							class="" title="滋补类">滋补类</a>
						</li>
					</ul>
					<div class="clear"></div>
				</dd>
			</dl>
		</div>
		<div class="listsum-1"
			data-link="#">
			<dl class="">
				<dt>
					<a class="" href="#"
						hidefocus="true">酱菜.罐头</a>
				</dt>
				<dd>
					<ul>
						<li><a href="#"
							class="" title="腌菜">腌菜</a>
						</li>
					</ul>
					<div class="clear"></div>
				</dd>
			</dl>
		</div>
		<div class="listsum-1"
			data-link="#">
			<dl class="">
				<dt>
					<a class="" href="#"
						hidefocus="true">厨房用品</a>
				</dt>
				<dd>
					<ul>
						<li><a href="#"
							class="" title="烘焙良选">烘焙良选</a>
						</li>
					</ul>
					<div class="clear"></div>
				</dd>
			</dl>
		</div>
	</div>
	<!-- 左边分类结束 -->
</body>
</html>

实现效果：

虽然是挺简单的效果，但也用到一些技巧，比如样式的切换使用等。

上面利用到div和清除浮动样式：

<div class="clear"></div>   css: .clear:{clear:both;}

这样可以不设置Div高度，就能自适应高度，背景色或背景图也能自动延伸，当点击展开时<dd>就能自动根据li的高度而自动增加高度。

2）对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。

#outer:after{ 

　　 content:"."; 

　　 height:0; 

　　 visibility:hidden; 

　　 display:block; 

　　 clear:both; 

　　}

3）设置overflow为hidden或者auto

　　这种做法就是将父容器的overflow设为hidden或auot就可以在标准兼容浏览器中闭合浮动元素.

4）浮动外部元素，float-in-float

　　这种做法就是让父容器也浮动，这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素

相关文章：

你感兴趣的文章：

标签云：