twitter-bootstrap 引导响应侧菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25238817/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap responsive sidemenu
提问by Tim
I've been trying to get my site which has a sidemenu to override the normal functionality for the top menu when mobile view is operated.
我一直在尝试让我的网站有一个侧边菜单，以便在操作移动视图时覆盖顶部菜单的正常功能。
i.e. i want the menuitems to be full width.
即我希望菜单项是全宽的。
<div class="col-md3 pull-left">
<div class="bs-sidebar hidden-print affix-top" id="sidemenu">
<ul class="nav bs-sidenav">
<li class="nav-header">
<a data-toggle="collapse" data-parent="#sidemenu" href="#Admincontainer" class=""><span>Admin</span><i class=" pull-right glyphicon glyphicon-chevron-down"></i></a>
<ul style="list-style-type: none; margin-left:10px" id="Admincontainer" class="nav collapse ">
<li class="">
<a href="lnk" title="">
Manage Members
<i class=" glyphicon glyphicon-chevron-right pull-right">
</i>
</a>
</li>
<li>
<a href="/Admin/Member/addnew" title="">
Add A New Member
<i class=" glyphicon glyphicon-chevron-right pull-right">
</i>
</a>
</li>
</ul>
</li>
<li class="nav-header">
<a data-toggle="collapse" data-parent="#sidemenu" href="#Publiccontainer" class=""><span>Committee</span><i class=" pull-right glyphicon glyphicon-chevron-down"></i></a>
<ul style="list-style-type: none; margin-left:10px" id="Publiccontainer" class="nav collapse ">
<li>
<a href="/Public" title="">
Home
<i class=" glyphicon glyphicon-chevron-right pull-right">
</i>
</a>
</li>
<li>
<a href="/Public/Contact" title="">
Contact Us
<i class=" glyphicon glyphicon-chevron-right pull-right">
</i>
</a>
</li>
</ul>
</li>
</div>
</div>
I've tried and failed with a few approaches so ive created a "vanilla" template of how my menu looks before i try and "fix" it. I basically want the sidemenu to become that fullwidth top menu when the viewport becomes too small to accommodate both sidemenu and main content side by side.
我尝试了一些方法但都失败了，所以在我尝试“修复”它之前，我创建了一个关于我的菜单外观的“香草”模板。当视口变得太小而无法并排容纳侧边菜单和主要内容时，我基本上希望侧边菜单成为全宽顶部菜单。
I've hacked an example from a default bootstrap template below.
我从下面的默认引导程序模板中破解了一个示例。
Default template
默认模板
Default template's in mobile with vertically stacked menu
带有垂直堆叠菜单的移动设备中的默认模板
Example showing the sidemenu i want to replace the vertically stacked menu in previous image.
显示侧边菜单的示例我想替换上一张图像中的垂直堆叠菜单。
采纳答案by mccannf
You need two navbars (one at the top and one at the side) and then use JQuery to move the side navbar to the top of the page.
您需要两个导航栏（一个在顶部，一个在侧面），然后使用 JQuery 将侧面导航栏移动到页面顶部。
So if you have two navbars like so:
因此，如果您有两个这样的导航栏：
<div class="navbar navbar-inverse navbar-fixed-top ">
<div class="container ">
<div class="navbar-header ">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topmenu">
<span class="icon-bar "></span>
<span class="icon-bar "></span>
<span class="icon-bar "></span>
</button>
<a class="navbar-brand " href="/ ">Application name</a>
</div>
<div id="topmenu" class="navbar-collapse collapse ">
<ul class="nav navbar-nav ">
<li>
<a href="/ ">Home</a>
</li>
<li>
<a href="/Home/About ">About</a>
</li>
<li>
<a href="/Home/Contact ">Contact</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right ">
<li>
<a href="/Account/Register " id="registerLink ">Register</a>
</li>
<li>
<a href="/Account/Login " id="loginLink ">Log in</a>
</li>
</ul>
</div>
</div>
</div>
<div id="navbar" class="navbar navbar-inverse navbar-fixed-top">
<ul class="nav nav-stacked" id="menu-bar">
<li class="panel dropdown">
<a data-toggle="collapse" data-parent="#menu-bar" href="#collapseOne">
Admin
</a>
<ul id="collapseOne" class="panel-collapse collapse">
<li><a href="#">Manage Members</a></li>
<li><a href="#">Add a new Member</a></li>
</ul>
</li>
<li class="panel dropdown">
<a data-toggle="collapse" data-parent="#menu-bar" href="#collapseTwo">
Committee
</a>
<ul id="collapseTwo" class="panel-collapse collapse">
<li><a href="#">Home</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
<div class="clearfix"></div>
<div class="content">
<div class="container bodycontent">
<div class="jumbotron">
<h1>Testing Responsive sidemenu</h1>
<p class="lead">Trying to get my side menu to replace the top menu when the size goes too small.
</p>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<article>
<h1>Content</h1>
<p>Content here</p>
</article>
</div>
</div>
</div>
</div>
</div>
The JQuery is as follows:
JQuery 如下：
var $window = $(window),
$html = $('#menu-bar');
$window.resize(function resize(){
if ($window.width() < 768) {
// When the side bar is moved to the top, this stops it being fixed in place
$("#navbar").removeClass('navbar-fixed-top');
return $html.removeClass('nav-stacked');
}
$("#navbar").addClass('navbar-fixed-top');
$html.addClass('nav-stacked');
}).trigger('resize');
And CSS:
和 CSS：
/* CSS used here will be applied after bootstrap.css */
@media (max-width: 767px) {
.content {
padding: 15px;
margin-top: 10px;
}
}
@media (min-width: 768px) {
#menu-bar .panel {
margin-bottom: 0;
background-color: rgba(0,0,0,0);
border: none;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu-bar li a {
color: #fff;
font-size: 16px;
font-weight: bold;
}
#navbar {
float: left;
width: 200px;
height: 100%;
}
.content {
margin-left: 200px;
min-height: 100%;
margin-top: 60px;
}
.container {
margin-left: 10px;
padding-right: 150px;
}
}
.navbar-brand > h3 {
margin-top: 0;
margin-bottom: 0;
}
.body-content {
padding-left: 15px;
padding-right: 15px;
}
#navbar {
margin-top: 50px
}
If you want the left hand side bar to have certain CSS, you should specify the CSS like so:
如果您希望左侧栏具有特定的 CSS，您应该像这样指定 CSS：
@media (min-width: 768px) {
#menu-bar {
/* Put your CSS here. It will not apply to the menu-bar when it moves to the top */
}
}
