简单的。更改默认行为
<button ... data-toggle="collapse" data-target="#my-navbar-collapse">
to slide-collapse
我们现在要实现的功能
<button ... data-toggle="slide-collapse" data-target="#my-navbar-collapse">
菜单所在的位置div
有 id 的my-navbar-collapse
。请注意,使用 id 而不是类选择器将提高可访问性,因为引导程序会将 ARIA 状态(展开/折叠)附加到菜单
自动地。
<div id="my-navbar-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
...
</ul>
</div>
Class .collapse
在引导程序中确保菜单最初是隐藏的。
代码:
然后将以下 Javascript 粘贴到页脚中的某个位置:
// mobile menu slide from the left
$('[data-toggle="slide-collapse"]').on('click', function() {
$navMenuCont = $($(this).data('target'));
$navMenuCont.animate({'width':'toggle'}, 350);
});
以及以下 CSS 属性:
#my-navbar-collapse {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 280px; /*example + never use min-width with this solution */
height: 100%;
}
一些提示:
- 好主意还在于进行响应式查询,其中智能手机的菜单宽度为 100%,而不是始终为 280 像素。它就像一个魅力。
- 如果您有适用于桌面的水平菜单,并且仅适用于较小设备的滑块,那么您可以轻松利用@grid-float-breakpoint and @grid-float-breakpoint-max https://stackoverflow.com/a/27094073/722036Bootstrap LESS 变量