将现有的引导侧边栏修改为可折叠

Question

我在 bootstrap 中构建了我的项目，它有一个顶部导航栏和一个侧边栏。

现在我需要制作侧边栏，可以像这样折叠：

http://www.makerstudios.com/

但我项目中的侧边栏位于页面左侧。如何以尽可能少的更改使此侧边栏可折叠？

HTML：

<div class="col-md-3">
    <div class="navbar-default sidebar" role="navigation">
        <div class="sidebar-nav">
            <ul class="nav" id="side-menu">
                <li>...</li>
                <li>...</li>
            </ul>
        </div>
    </div>
</div>

Answer 1

您可以使用一个简单的 jquery。

首先，您需要将侧边栏设置为不在屏幕上。这可以通过添加一个

.sidebar {
    left: -300px // For example
}

然后您需要编写一个 jquery 代码，该代码会监听您想要显示菜单的按钮的点击。

当按钮被按下时，jquery 代码应该使侧边栏再次显示，并将其带到一个可见范围（left:0;）

<script>


$(function(){
    $("#menu").click(function open(){
        $('.sidebar').animate({ left: '0'}, 500);
        });//opening it
    $("#close").click(function close(){
        $('.sidebar').animate({ left: '-200px'}, 500);
    });// 'Closing it'. Takin it back off -screen within the timewindow of 500ms
    });


</script>

所以你现在要做的就是在屏幕外设置栏，然后为你的打开/关闭创建一个按钮。

此解决方案将使侧边栏位于现有正文的顶部，但如果您希望它与您链接的网站上的方式相同，您只需向 jquery 添加一个命令即可移动内容分区（可见部分）与侧边栏移动的量相同。