Bootstrap 3 滑入菜单/移动导航栏
[英] Bootstrap 3 Slide in Menu / Navbar on Mobile
本文介绍了Bootstrap 3 滑入菜单/移动导航栏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在构建一个基于浏览器的移动应用程序，我决定使用 Bootstrap 3 作为设计的 css 框架.Bootstrap 3 在导航栏中提供了一个很棒的响应式"功能，如果它检测到与浏览器分辨率有关的特定断点"，它会自动折叠.它适用于很多情况.
但是您最近是否注意到许多基于浏览器的移动应用程序将主导航隐藏在屏幕左侧，并且当按下(切换)右上角的切换图标时，主导航向右滑出大约 2/3 的方式进入屏幕?这是一种越来越流行的解决方案，用于在移动设备上浏览基于浏览器的应用程序，我认为理论上修改 bootstrap css/js 以适应此版本的导航折叠功能应该很容易.
如何实现这些功能?似乎不应该进行太多修改.我真的很想听听您对此事的想法/解决方案.此外，我认为将 Bootstrap 作为内置功能实现是一个很好的长期解决方案.
不幸的是，我没有尝试创建此功能，因为虽然我熟悉这些技术，但我主要是一名 PHP/MySQL 开发人员，并且我相信一个有用的功能应该由具有洞察力的专家构建，我不知道没有作为前端开发人员.
解决方案
这是我自己的项目，我也在这里分享.
这个在 3.2 之后有问题，所以下面的可能更适合你:
CSS
/* 菜单打开时调整 body */body.slide-active {溢出-x:隐藏}/*#page-content 的第一个孩子所以它不会移动*/.no-margin-top {边距顶部:0px！重要}/*如果不是固定的顶部，则将整个页面内容但不是导航包裹在此div中，不要添加任何顶部填充*/#页面内容{位置:相对；填充顶部:70px；左:0；}#page-content.slide-active {填充顶部:0}/* 将切换条放在左侧 :: 不使用按钮 */#slide-nav .navbar-toggle {光标:指针；位置:相对；行高:0；向左飘浮;边距:0；宽度:30px；高度:40px；填充:10px 0 0 0；边框:0；背景:透明；}/* 图标栏美化 - 可选 */#slide-nav .navbar-toggle >.icon-bar {宽度:100%；显示:块；高度:3px；边距:5px 0 0 0；}#slide-nav .navbar-toggle.slide-active .icon-bar {背景:橙色}.navbar-header {位置:相对}/* 修复激活时的导航栏，以便所有菜单项都可以访问 */.navbar.navbar-fixed-top.slide-active {位置:相对}/* 写重要的东西和狗屎，只要把它粘在最大宽度上，因为这些类在大小之间不共享*/@media(最大宽度:767px){#slide-nav .container {边距:0；填充:0！重要；}#slide-nav .navbar-header {边距:0 自动；填充:0 15px；}#slide-nav .navbar.slide-active {位置:绝对；宽度:80%；顶部:-1px；z-索引:1000；}#slide-nav #slidemenu {背景:#f7f7f7；左:-100%；宽度:80%；最小宽度:0；位置:绝对；填充左:0;z-索引:2；顶部:-8px；边距:0；}#slide-nav #slidemenu .navbar-nav {最小宽度:0；宽度:100%；边距:0；}#slide-nav #slidemenu .navbar-nav .dropdown-menu li a {最小宽度:0；宽度:80%；空白:正常；}#幻灯片导航{边界顶部:0}#slide-nav.navbar-inverse #slidemenu {背景:#333}/* 这是在导航后面，但导航不在里面，所以导航是可访问的并且可以滚动*/#slide-nav #navbar-height-col {位置:固定；顶部:0；高度:100%；宽度:80%；左:-80%；背景:#eee;}#slide-nav.navbar-inverse #navbar-height-col {背景:#333；z-索引:1；边框:0；}#slide-nav .navbar-form {宽度:100%；边距:8px 0；文本对齐:居中；溢出:隐藏；/*快速清除固定器*/}#slide-nav .navbar-form .form-control {文本对齐:居中}#slide-nav .navbar-form .btn {宽度:100%}}@media(最小宽度:768px){#页面内容{左:0！重要}.navbar.navbar-fixed-top.slide-active {位置:固定}.navbar-header {左:0！重要}}
HTML
<div class="container"><div class="navbar-header"><a class="navbar-toggle"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><a class="navbar-brand";href=#">项目名称</a>
<div id="幻灯片菜单"><form class="navbar-form navbar-right";角色=形式"><div class="form-group"><输入类型=搜索"占位符=搜索"class =表单控件">
<按钮类型=提交"class=btn btn-primary">搜索</button></表单><ul class="nav navbar-nav"><li class="active"><a href="#">Home</a></li><li><a href=#about">关于</a></li><li><a href=#contact">联系方式</a></li>
<a href="#";类=下拉切换"；data-toggle="dropdown">Dropdown <b class="caret"></b></a><ul class="下拉菜单"><li><a href=#">动作</a></li><li><a href=#">另一个动作</a></li><li><a href=#">这里还有别的东西</a></li><li class="divider"></li><li class="dropdown-header">Nav header</li><li><a href=#">分隔链接</a></li><li><a href=#">另外一个单独的链接</a></li><li><a href=#">动作</a></li><li><a href=#">另一个动作</a></li><li><a href=#">这里还有别的东西</a></li><li class="divider"></li><li class="dropdown-header">Nav header</li><li><a href=#">分隔链接</a></li><li><a href=#">另外一个单独的链接</a></li><li><a href=#">动作</a></li><li><a href=#">另一个动作</a></li><li><a href=#">这里还有别的东西</a></li><li class="divider"></li><li class="dropdown-header">Nav header</li><li><a href=#">单独的链接测试长标题放在这里</a></li><li><a href=#">另外一个单独的链接</a></li> jQuery
$(document).ready(function () {//固定在导航栏后面的 100% 高度，但不要包裹它$('#slide-nav.navbar .container').append($('<div id="navbar-height-col"></div>'));//输入您的 ID 或类var toggler = '.navbar-toggle';var pagewrapper = '#page-content';var navigationwrapper = '.navbar-header';var menuwidth = '100%';//幻灯片菜单中的菜单本身var 幻灯片宽度 = '80%';var menuneg = '-100%';var slideneg = '-80%';$("#slide-nav").on("click", toggler, function (e) {var selected = $(this).hasClass('slide-active');$('#slidemenu').stop().animate({左:选择?菜单:'0px'});$('#navbar-height-col').stop().animate({左:选择?幻灯片:'0px'});$(pagewrapper).stop().animate({左:选择?'0px' : 幻灯片宽度});$(navigationwrapper).stop().animate({左:选择?'0px' : 幻灯片宽度});$(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');}});});
I am building a browser-based mobile app and I've decided to use Bootstrap 3 as the css framework for the design. Bootstrap 3 comes with a great "responsive" feature in the navigation bar where it collapses automatically if it detects a specific "break point" regarding the resolution of the browser. It works in a lot of situations.
But have you noticed lately how a lot of browser-based mobile apps have the primary navigation hidden out of the left of the screen, and when the toggle icon is pressed (toggled) in the top-right corner, the primary navigation slides out to the right about 2/3 of the way into the screen? This is an increasingly popular solution for navigating through browser-based apps on mobile devices and I think in theory it should be pretty easy to modify bootstrap css/js to accommodate this version of the navigation collapse feature.
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.
Unfortunately I have not made any attempts to create this feature because while I am familiar with these technologies, I am predominantly a PHP/MySQL developer and I believe a feature as useful as this should be built by experts with insight that I don't have as a front-end developer.
解决方案
This was for my own project and I'm sharing it here too.
This one had trouble after 3.2, so the one below may work better for you:
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 3 滑入菜单/移动导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
