菜单伸缩改变导航栏思路

1、

#collapse-sidebar 为菜单伸缩的按钮，当点击这个按钮时html中body的css会进行切换，如：

$('#collapse-sidebar').click(function () {
            $('#page-sidebar, #page-content-wrapper, #header-logo').removeClass('rm-transition');
            $('body').toggleClass('sidebar-collapsed');
            $('.glyph-icon', this).toggleClass('icon-chevron-right').toggleClass('icon-chevron-left');


        });

当菜单展开时body的css没有元素sidebar-collapsed，而菜单收起来以后有元素sidebar-collapsed，这样就可以通过是否有sidebar-collapsed来控制菜单展开和收缩的样式了，例如

菜单展开时#header-logo-txt的样式为

#header-logo-txt {
    color:#20B2AA;
    margin-left: 40px;
    font-family: KaiTi;
    font-weight: bold;
}

菜单收缩时可以改变#header-logo-txt的样式中左边框的距离：

.sidebar-collapsed #header-logo-txt{
    margin-left: 0px;
}