左侧导航效果

html

<div id="leftNavContainer">
        <!-- 头部  -->
        <header>xxx系统</header>

        <!-- 左侧列表 -->
        <div id="leftNavListMain" ng-controller="leftNavController">
            <div class="navTitle">Menu管理</div>
            <ul class="left-list clearfix">
                <li class="navLists">
                    <div class="left-list-title leftNavHigh">menu1</div>
                    <ul class="left-list-details clearfix" style="display: block;">
                        <li class="listDetailsHigh">菜单一</li>
                        <li>菜单一</li>
                        <li>菜单一</li>
                    </ul>                   
                </li>
                <li class="navLists">
                    <div class="left-list-title">menu2</div>
                    <ul class="left-list-details clearfix">
                        <li>菜单二</li>
                        <li>菜单二</li>
                        <li>菜单二</li>
                    </ul>
                </li>
                <li class="navLists" >
                    <div class="left-list-title">menu3</div>
                    <ul class="left-list-details clearfix">
                        <li>菜单三</li>
                        <li>菜单三</li>
                        <li>菜单三</li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- 左侧列表 end-->
    </div>

css

@charset "utf-8";
*{
    box-sizing: border-box;
}
#leftNavContainer{
    width: 100%;
    background: #f1f5f8;
    position: relative;
}
/* header */
header{
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: #509de1;
    color: #fff;
    font-size: 18px;
    font-weight: 600px;
    padding-left: 20px; 
}
/* 左侧列表 */
#leftNavListMain{
    position: fixed;
    top: 50px;
    left: 0;
    width: 200px;
    height: 100%;
    background: #f1f5f8;
    border-right: 1px solid #e6ecf0;
}
#leftNavListMain .navTitle{
    width: 100%;
    height: 60px;
    line-height: 60px;
    padding-left: 20px;
    font-size: 16px;

}
/* 高亮 */
.leftNavHigh{
    background: #509de1;
    color: #fff;
}
.listDetailsHigh{
    border-bottom: 1px solid #509de1;
    color: #509de1;
}

#leftNavListMain .left-list{
    width: 200px;
    height: 100%;
}
#leftNavListMain .left-list .left-list-title{
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-bottom: 1px solid #e6ecf0;
    border-top: 1px solid #e6ecf0;
    cursor: pointer;
}
.left-list-details{
     display: none; 
    padding: 0 45px;
    background: #fff;
}
.left-list-details li{
    float: left;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    background: #fff;
}

js

$(function(){
//左侧导航效果
    $(".navLists .left-list-title").click(function() {
        $(this).addClass('leftNavHigh').next().slideToggle('slow');											 $(this).parent().siblings().children('div').removeClass('leftNavHigh').next().slideUp('slow');
    });

    //左侧菜单详情
    $(".left-list-details li").click(function() {
        $(this).addClass('listDetailsHigh').siblings().removeClass('listDetailsHigh');
    });
})

效果如下：