如何使用 Bootstrap 创建类似于 Facebook mobile 的响应式菜单答案

【问题标题】：How to use Bootstrap to create a responsive menu similar to Facebook mobile如何使用 Bootstrap 创建类似于 Facebook mobile 的响应式菜单
【发布时间】：2014-04-09 19:27:04
【问题描述】：

如何创建一个与 Facebook 移动版非常相似的移动菜单按钮？我有 Bootstrap 3 设置和移动部分的响应菜单。唯一的问题是菜单从顶部下降而不是从左侧进入。 Bootstrap 是否有内置选项？

这是我目前的身体：

<body>
    <div class="navbar navbar-default">
        <div class="navbar-inner">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="navbar-brand">Brand</div>
            <div class="container">
                <div class="collapse navbar-collapse navHeaderCollapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Page 1</a></li>
                        <li><a href="#">Page 2</a></li>
                        <li><a href="#">Page 3</a></li>
                        <li><a href="#">Page 4</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

这是可以用 Bootstrap 完成的，还是需要一个不同的插件与 Bootstrap 一起工作？如果有，是哪个插件？

【问题讨论】：

标签： jquery html css facebook twitter-bootstrap

【解决方案1】：

您可以使用 jQuery 插件，http://www.berriart.com/sidr/。它是响应式的、开源的、已实现的 facebook 菜单、有据可查。

【讨论】：

如何将 Sidr 与现有的 Bootstrap 代码集成？他们似乎不想好好相处。
Sidr 已经有了两个样式表。您可以根据您的要求对其进行编辑。如果我理解你，你想创建左/右侧边栏导航，对吧？为此，您无需从引导程序添加任何内容到 Sidr 的 css。只需按照您的要求使用 Sidr 的样式表即可。
但是 Sidr 的响应式设置与 Bootstrap 的响应式设置完全不同。在正文代码中的某处必须有两者的混合。
你在做什么？您是否尝试实现侧边栏菜单或从标题菜单切换折叠？你知道，facebook mobile 就像 windows phone 上的 sidr。
两者兼而有之。我正在尝试设置该站点，以便在桌面模式下从引导程序获得导航栏。然后当窗口像在移动模式下一样变小时，会出现带有三行的菜单按钮。然后用户可以单击和按钮，菜单从左到右滑入。当窗口较小时，Sidr 网站正在使用我正在寻找的东西，只是左上角的一个不同的按钮。

【解决方案2】：

是的，您可以使用 Swagata 回答的 sidr 插件...

你可以参考下面解释相同的帖子。

Create a responsive menu similar to facebook mobile with Bootstrap using Sidr plugin

【讨论】：