1、HTML部分
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>左侧下拉菜单列表示例</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="container">
<div class="left_box">
<dl class="system_log">
<dt>系统记录
<img src="images/select_xl01.png" />
</dt>
<dd><a href="#">充值记录</a></dd>
<dd><a href="#">消费记录</a></dd>
<dd><a href="#">操作记录</a></dd>
</dl>
<dl class="custom">
<dt>客户管理
<img src="images/select_xl01.png" />
</dt>
<dd><a href="#">成交客户</a></dd>
<dd><a href="#">未成交客户</a></dd>
<dd><a href="#">即将到期客户</a></dd>
</dl>
<dl class="channel">
<dt>渠道管理
<img src="images/select_xl01.png" />
</dt>
<dd><a href="#">渠道主页</a></dd>
<dd><a href="#">渠道标准</a></dd>
<dd><a href="#">渠道商管理</a></dd>
</dl>
<dl class="system_management">
<dt>系统管理
<img src="images/select_xl01.png" />
</dt>
<dd><a href="#">用户管理</a></dd>
<dd><a href="#">角色管理</a></dd>
<dd><a href="#">栏目管理</a></dd>
</dl>
</div>
<div class="right_box"></div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
2、CSS部分
body{
margin:0;
padding:0;
height:100%;
}
dl,dt,dd{
display: block;
margin:0;
}
.container{
margin:0 auto;
width:100%;
height:100%;
position:relative;
}
.left_box{
width: 160px;
position: fixed;
height: 100%;
background-color: #3992d0;
}
.left_box dt {
padding-left: 40px;
padding-right: 10px;
background-repeat: no-repeat;
background-position: 10px center;
color: #f5f5f5;
font-size: 14px;
position: relative;
line-height: 48px;
cursor: pointer;
}
.system_log dt{
background-image: url(../images/system.png);
}
.custom dt{
background-image: url(../images/custom.png);
}
.channel dt{
background-image: url(../images/channel.png);
}
.system_management dt{
background-image: url(../images/syetem_management.png);
}
.left_box dt img{
right:10px;
top:20px;
position:absolute;
}
.left_box dd{
background-color:#317eb4;
padding-left:40px;
}
.left_box dd a{
color: #f5f5f5;
line-height: 24px;
font-size:12px;
text-decoration: none;
}
3、JS部分
$(function(){
$(".left_box dd").hide();
$(".left_box dt").click(function(){
$(".left_box dt").css({"background-color":"#3992d0"});
$(this).css({"background-color": "#317eb4"});
$(".left_box dt img").attr("src","images/select_xl01.png");
$(this).parent().find('img').attr("src","images/select_xl.png");
$(this).parent().find('dd').removeClass("menu_chioce");
$(".menu_chioce").slideUp();
$(this).parent().find('dd').slideToggle();
$(this).parent().find('dd').addClass("menu_chioce");
})
});
4、效果图