Bootstrap 侧边抽屉菜单效果

效果图：

navibar(1).gif

HTML代码：

<div class="page-sidebar ">
        <ul class="page-sidebar-menu">
            <li>
                <a id="drawer"  href="javascript:void(0);" data-state="close" onclick="drawerCollapse()" style="color: white">
                    <span class="glyphicon glyphicon-th-list" style="color: white;font-size: 20px;margin:14px 27px"></span>
                </a>

            </li>
            <li>
                <a  href="" >
                    ![](asset/images/new/首页图标.png)
                    <p class="menu-p" style="display: none">主页</p>
                </a>
            </li>
            <li>
                <a href="">
                    ![](asset/images/new/信息管理.png)
                    <p class="menu-p" style="display: none">信息管理</p>
                </a>
            </li>
            <li>
                <a href="">
                    ![](asset/images/new/能耗.png)
                    <p class="menu-p" style="display: none">能耗管理</p>
                </a>
            </li>
            <li>
                <a href="">
                    ![](asset/images/new/碳排放图标.png)
                    <p class="menu-p" style="display: none">碳排放</p>
                </a>
            </li>
            <li>
                <a href="">
                    ![](asset/images/new/审计.png)
                    <p class="menu-p" style="display: none">在线审计</p>
                </a>
            </li>
            <li>
                <a href="">
                    ![](asset/images/new/监控.png)
                    <p class="menu-p" style="display: none">监控管理</p>
                </a>
            </li>
            <li>
                <a href="">
                    ![](asset/images/new/计量数据.png)
                    <p class="menu-p" style="display: none">计量数据</p>
                </a>
            </li>

            <li>
                <a class="change" id="collapseListGroupHeading1" data-toggle="collapse" data-target="#collapseListGroup1" role="tab" >
                    ![](asset/images/new/服务平台.png)
                    <p class="menu-p" style="display: none">服务平台</p>
                    <span class="glyphicon glyphicon-chevron-up right arrow" style="display: none"></span>
                </a>
                <!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 -->
                <div id="collapseListGroup1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading1" style="display: none">
                    <ul class="list-menu">
                        <li>
                            <a href="">信息公告管理</a>
                        </li>
                        <li>
                            <a href="">待办事项管理</a>
                        </li>
                        <li>
                            <a href="">产品信息管理</a>
                        </li>
                        <li>
                            <a href="">能源系数设置</a>
                        </li>
                    </ul>
                </div>
            </li>

            <li>
                <a href="">
                    ![](asset/images/new/设置.png)
                    <p class="menu-p" style="display: none">系统设置</p>
                </a>
            </li>

        </ul>
    </div>

js代码：

<script>
    $(function(){
        $(".change").click(function(e){
            /*切换折叠指示图标*/
            $(this).find("span").toggleClass("glyphicon-chevron-up");
            $(this).find("span").toggleClass("glyphicon-chevron-down");
        });
    });


    function drawerCollapse(){
        var state = $("#drawer").attr("data-state");
        if (state == 'close'){
            //设置打开
            $(".page-sidebar").css("width","225px");
            $(".page-content").css("margin-left","225px");
            $("#drawer").attr("data-state",'open');
            $(".menu-p").css("display","");
            $(".collapse").css("display","");
            $(".arrow").css("display","");
        }else{
            //设置关闭
            $(".page-sidebar").css("width","75px");
            $(".page-content").css("margin-left","75px");
            $("#drawer").attr("data-state",'close');
            $(".menu-p").css("display","none");
            $(".collapse").css("display","none");
            $(".arrow").css("display","none");
        }
    }
</script>