Bootstrap 3 Slide in Menu/Navbar on Mobile

我正在建立一个基于浏览器的移动应用程序，我已经决定使用 Bootstrap 3作为 css 框架的设计。Bootstrap 3在导航栏中有一个很棒的“响应”特性，如果它检测到浏览器的分辨率有一个特定的“断点”，它就会自动折叠。在很多情况下都管用。

但是你有没有注意到最近很多基于浏览器的移动应用程序的主导航都隐藏在屏幕的左侧，当切换图标被按下(切换)在右上角时，主导航会滑到屏幕右侧的2/3处？这是一个在移动设备上浏览基于浏览器的应用程序时越来越流行的解决方案，我认为从理论上来说，修改 bootstrap css/js 以适应这个版本的导航折叠功能应该是非常容易的。

How can these feature be implemented? It seems like it shouldn't take too much modification. I'd really like to hear your thoughts/solutions on this matter. Also, I think it would be a great long-term solution for Bootstrap to implement as a built-in feature.

不幸的是，我并没有尝试创建这个特性，因为尽管我对这些技术很熟悉，但我主要是一个 PHP/MySQL 开发人员，我相信像这样有用的特性应该由有洞察力的专家来创建，而我作为一个前端开发人员是没有的。

411319 次浏览
小开

这是我自己的项目，我也在这里分享。

DEMO: http://jsbin.com/OjOTIGaP/1/edit

This one had trouble after 3.2, so the one below may work better for you:

Https://jsbin.com/seqola/2/edit ——-更好的版本，稍微

CSS

/* adjust body when menu is open */
body.slide-active {
overflow-x: hidden
}
/*first child of #page-content so it doesn't shift around*/
.no-margin-top {
margin-top: 0px!important
}
/*wrap the entire page content but not nav inside this div if not a fixed top, don't add any top padding */
#page-content {
position: relative;
padding-top: 70px;
left: 0;
}
#page-content.slide-active {
padding-top: 0
}
/* put toggle bars on the left :: not using button */
#slide-nav .navbar-toggle {
cursor: pointer;
position: relative;
line-height: 0;
float: left;
margin: 0;
width: 30px;
height: 40px;
padding: 10px 0 0 0;
border: 0;
background: transparent;
}
/* icon bar prettyup - optional */
#slide-nav .navbar-toggle > .icon-bar {
width: 100%;
display: block;
height: 3px;
margin: 5px 0 0 0;
}
#slide-nav .navbar-toggle.slide-active .icon-bar {
background: orange
}
.navbar-header {
position: relative
}
/* un fix the navbar when active so that all the menu items are accessible */
.navbar.navbar-fixed-top.slide-active {
position: relative
}
/* screw writing importants and shit, just stick it in max width since these classes are not shared between sizes */
@media (max-width:767px) {
#slide-nav .container {
margin: 0;
padding: 0!important;
}
#slide-nav .navbar-header {
margin: 0 auto;
padding: 0 15px;
}
#slide-nav .navbar.slide-active {
position: absolute;
width: 80%;
top: -1px;
z-index: 1000;
}
#slide-nav #slidemenu {
background: #f7f7f7;
left: -100%;
width: 80%;
min-width: 0;
position: absolute;
padding-left: 0;
z-index: 2;
top: -8px;
margin: 0;
}
#slide-nav #slidemenu .navbar-nav {
min-width: 0;
width: 100%;
margin: 0;
}
#slide-nav #slidemenu .navbar-nav .dropdown-menu li a {
min-width: 0;
width: 80%;
white-space: normal;
}
#slide-nav {
border-top: 0
}
#slide-nav.navbar-inverse #slidemenu {
background: #333
}
/* this is behind the navigation but the navigation is not inside it so that the navigation is accessible and scrolls*/
#slide-nav #navbar-height-col {
position: fixed;
top: 0;
height: 100%;
width: 80%;
left: -80%;
background: #eee;
}
#slide-nav.navbar-inverse #navbar-height-col {
background: #333;
z-index: 1;
border: 0;
}
#slide-nav .navbar-form {
width: 100%;
margin: 8px 0;
text-align: center;
overflow: hidden;
/*fast clearfixer*/
}
#slide-nav .navbar-form .form-control {
text-align: center
}
#slide-nav .navbar-form .btn {
width: 100%
}
}
@media (min-width:768px) {
#page-content {
left: 0!important
}
.navbar.navbar-fixed-top.slide-active {
position: fixed
}
.navbar-header {
left: 0!important
}
}

HTML

 <div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="slide-nav">
<div class="container">
<div class="navbar-header">
<a class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="slidemenu">
     

<form class="navbar-form navbar-right" role="form">
<div class="form-group">
<input type="search" placeholder="search" class="form-control">
</div>
<button type="submit" class="btn btn-primary">Search</button>
</form>
     

<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link test long title goes here</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
          

</div>
</div>
</div>

JQuery

$(document).ready(function () {




//stick in the fixed 100% height behind the navbar but don't wrap it
$('#slide-nav.navbar .container').append($('<div id="navbar-height-col"></div>'));


// Enter your ids or classes
var toggler = '.navbar-toggle';
var pagewrapper = '#page-content';
var navigationwrapper = '.navbar-header';
var menuwidth = '100%'; // the menu inside the slide menu itself
var slidewidth = '80%';
var menuneg = '-100%';
var slideneg = '-80%';




$("#slide-nav").on("click", toggler, function (e) {


var selected = $(this).hasClass('slide-active');


$('#slidemenu').stop().animate({
left: selected ? menuneg : '0px'
});


$('#navbar-height-col').stop().animate({
left: selected ? slideneg : '0px'
});


$(pagewrapper).stop().animate({
left: selected ? '0px' : slidewidth
});


$(navigationwrapper).stop().animate({
left: selected ? '0px' : slidewidth
});




$(this).toggleClass('slide-active', !selected);
$('#slidemenu').toggleClass('slide-active');




$('#page-content, .navbar, body, .navbar-header').toggleClass('slide-active');




});




var selected = '#slidemenu, #page-content, body, .navbar, .navbar-header';




$(window).on("resize", function () {


if ($(window).width() > 767 && $('.navbar-toggle').is(':hidden')) {
$(selected).removeClass('slide-active');
}




});


});
小开

Bootstrap 5 Beta 3(2021年更新)

介绍新的 引导5离线画布组件

鞋带4

创建一个响应导航栏侧边栏“抽屉”在引导4？
自举水平菜单折叠到侧边菜单

Bootstrap 3

我认为你要找的是一种通常被称为“画布外”的布局。下面是来自官方 Bootstrap 文档的标准离线示例: http://getbootstrap.com/examples/offcanvas/

The "official" example uses a right-side sidebar the toggle off and on separately from the top navbar menu. I also found these off-canvas variations that slide in from the left and may be closer to what you're looking for..

Http://www.bootstrapzero.com/bootstrap-template/off-canvas-sidebar Http://www.bootstrapzero.com/bootstrap-template/facebook

小开

没有插件，我们可以做到这一点; 引导多级响应手机菜单与幻灯片切换手机:

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


$(".menu-overlay").click(function(event) {
$(".navbar-toggle").trigger("click");
$(".menu-overlay").fadeOut(500);
});


// if ($(window).width() >= 767) {
//     $('ul.nav li.dropdown').hover(function() {
//         $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
//     }, function() {
//         $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
//     });


//     $('ul.nav li.dropdown-submenu').hover(function() {
//         $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
//     }, function() {
//         $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
//     });




//     $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
//         event.preventDefault();
//         event.stopPropagation();
//         $(this).parent().siblings().removeClass('open');
//         $(this).parent().toggleClass('open');
//         $('b', this).toggleClass("caret caret-up");
//     });
// }


// $(window).resize(function() {
//     if( $(this).width() >= 767) {
//         $('ul.nav li.dropdown').hover(function() {
//             $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
//         }, function() {
//             $(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
//         });
//     }
// });


var windowWidth = $(window).width();
if (windowWidth > 767) {
// $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
//     event.preventDefault();
//     event.stopPropagation();
//     $(this).parent().siblings().removeClass('open');
//     $(this).parent().toggleClass('open');
//     $('b', this).toggleClass("caret caret-up");
// });


$('ul.nav li.dropdown').hover(function() {
$(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});


$('ul.nav li.dropdown-submenu').hover(function() {
$(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('>.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});




$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
// $('b', this).toggleClass("caret caret-up");
});
}
if (windowWidth < 767) {
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
// $('b', this).toggleClass("caret caret-up");
});
}


// $('.dropdown a').append('Some text');
@media only screen and (max-width: 767px) {
#slide-navbar-collapse {
position: fixed;
top: 0;
left: 15px;
z-index: 999999;
width: 280px;
height: 100%;
background-color: #f9f9f9;
overflow: auto;
bottom: 0;
max-height: inherit;
}
.menu-overlay {
display: none;
background-color: #000;
bottom: 0;
left: 0;
opacity: 0.5;
filter: alpha(opacity=50);
/* IE7 & 8 */
position: fixed;
right: 0;
top: 0;
z-index: 49;
}
.navbar-fixed-top {
position: initial !important;
}
.navbar-nav .open .dropdown-menu {
background-color: #ffffff;
}
ul.nav.navbar-nav li {
border-bottom: 1px solid #eee;
}
.navbar-nav .open .dropdown-menu .dropdown-header,
.navbar-nav .open .dropdown-menu>li>a {
padding: 10px 20px 10px 15px;
}
}


.dropdown-submenu {
position: relative;
}


.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}


li.dropdown a {
display: block;
position: relative;
}


li.dropdown>a:before {
content: "\f107";
font-family: FontAwesome;
position: absolute;
right: 6px;
top: 5px;
font-size: 15px;
}


li.dropdown-submenu>a:before {
content: "\f107";
font-family: FontAwesome;
position: absolute;
right: 6px;
top: 10px;
font-size: 15px;
}


ul.dropdown-menu li {
border-bottom: 1px solid #eee;
}


.dropdown-menu {
padding: 0px;
margin: 0px;
border: none !important;
}


li.dropdown.open {
border-bottom: 0px !important;
}


li.dropdown-submenu.open {
border-bottom: 0px !important;
}


li.dropdown-submenu>a {
font-weight: bold !important;
}


li.dropdown>a {
font-weight: bold !important;
}


.navbar-default .navbar-nav>li>a {
font-weight: bold !important;
padding: 10px 20px 10px 15px;
}


li.dropdown>a:before {
content: "\f107";
font-family: FontAwesome;
position: absolute;
right: 6px;
top: 9px;
font-size: 15px;
}


@media (min-width: 767px) {
li.dropdown-submenu>a {
padding: 10px 20px 10px 15px;
}
li.dropdown>a:before {
content: "\f107";
font-family: FontAwesome;
position: absolute;
right: 3px;
top: 12px;
font-size: 15px;
}
}
<!DOCTYPE html>
<html lang="en">


<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


</head>


<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="slide-collapse" data-target="#slide-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="slide-navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
<li class="dropdown-submenu">
<a href="#" data-toggle="dropdown">SubMenu 1</span></a>
<ul class="dropdown-menu">
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
<li class="dropdown-submenu">
<a href="#" data-toggle="dropdown">SubMenu 2</span></a>
<ul class="dropdown-menu">
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Link</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="menu-overlay"></div>
<div class="col-md-12">
<h1>Resize the window to see the result</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique
ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo
dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,
condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique
ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo
dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,
condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique
ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo
dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,
condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique
ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo
dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,
condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique
ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo
dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,
condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.
</p>
</div>


</body>


</html>

参考 JS 小提琴


提交答案