javascript - 将现有的 Bootstrap 侧边栏修改为可折叠

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 添加一个命令即可将内容部分(可见部分)移动与边栏移动相同的量。