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代码应该再次显示侧边栏，并将其带到一个可见范围（左：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移动内容分区（可见部分）与侧边栏移动的数量相同。

将退出的引导程序侧栏修改为可折叠

1 个答案: