jquery实现左侧下拉菜单列表

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、效果图

jquery实现左侧下拉菜单列表

猜你喜欢