与某个电子商务网站的左边商品分类菜单类似的用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的高度而自动增加高度。
这种方法是向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。一下还有三种方法可以实现:
2) 对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。
#outer:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
3)设置overflow为hidden或者auto
这种做法就是将父容器的overflow设为hidden或auot就可以在标准兼容浏览器中闭合浮动元素.
4)浮动外部元素,float-in-float
这种做法就是让父容器也浮动,这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素