如何让导航菜单从Bootstrap的小屏幕侧面滑入？

我有一个非常正常的布局，导航在左边的侧边栏，以及右边的主要内容。 Bootstrap的工作方式是，当屏幕太窄时，导航菜单出现在顶部，而下面的内容则出现在顶部。如何让导航菜单从Bootstrap的小屏幕侧面滑入？

但我觉得非常难看。当我有实际的内容展示时，我不想在导航上浪费太多空间。我想要的是在左侧有一个非常窄的条形或按钮，当你触摸它时，模态导航菜单从左侧滑出。

我找不到任何有关如何在bootstrap中完成该操作的任何信息。没有示例或教程，但也没有其他文档。

我遇到的一些问题：当我将它作为网格的一部分时，它会在小屏幕上流向顶端，而我显然不希望这样。当我把它作为主要内容的一部分时，它离屏幕边缘太远;我希望它在屏幕的边缘。另外，它会滚动显示主要内容，并且我希望它保持在原来的位置。绝对定位，我猜。

然后存在的问题是，这应该只发生在小屏幕上。在大屏幕上，现在它是完美的。因此，通常在大屏幕上可见的边栏应该隐藏起来，并以小屏幕上的模式滑动。我甚至没有看到任何横向滑动或折叠组件。

那么你如何做到这一点？ Bootstrap有可能吗？

来源

2013-01-21 mcv

是的，这确实是可能的。有是一个jQuery插件叫做jPanelMenu：

http://jpanelmenu.com/

它是开源的，并在GitHub上！

希望这会有所帮助！

来源

2013-02-11 05:44:57

媒体查询是不是这里的问题，它的侧身滑。我的确有一种解决方案，但它还不是很漂亮。我正计划研究jQuery Mobile，看看它是否有很好的解决方案。 – mcv

我完全理解你正在努力完成什么。例如，像这个网站：http://foodsense.is/ < - 媒体查询您可以让导航为下拉菜单，或者任何您想要的东西。这比jQuery解决方案简单得多（至少对我来说），并且肯定比jQuery Mobile更快。但是，如果你愿意，你可以将jQuery和媒体查询结合起来，以确定你想要的结果。顺便说一句，bootstrap已经有一个媒体查询，导致你的导航做它做的事情。只需看看我在说什么，进入你的导航栏，并输入一个“查询测试”的ID –

然后去媒体查询较小的视口，并使用＃query-test {display：none;}菜单将在较小的视口上消失。然后，您可以为您喜爱的移动设备创建一个全新的菜单设计，然后执行相反的操作：＃nav-menu-for-mobile {display：block;}。如果这对你还没有意义，让我知道，我会更好地解释。无论如何，我自己也在努力实现同一个目标，即响应式设计，对我而言，这是实现它的方法。 –

可以使用像本实施例所示的偏离帆布菜单：http://bootply.com/94838

当浏览器宽度窄，边栏崩塌，并且可以通过点击左侧的箭头进行扩展。

来源

2013-11-18 12:47:23 ZimSystem

没有任何插件，你可以这样做。

https://jsfiddle.net/syamacl45/mcekfnpt/

$('[data-toggle="slide-collapse"]').on('click', function() { 
    $navMenuCont = $($(this).data('target')); 
    $navMenuCont.animate({ 
     'width': 'toggle' 
    }, 350); 
});

来源

2017-08-06 17:57:50

如何让导航菜单从Bootstrap的小屏幕侧面滑入？

回答

相关问题