CSS Bootstrap 3 可折叠侧边栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23455820/
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 3 collapsible sidebar
提问by Jeremie4zw
Who could please tell me what would be the simplest and cleanest way to do exactly the same sidebar navigation as this website : http://www.makerstudios.com/(but on the left side)
谁能告诉我做与本网站完全相同的侧边栏导航的最简单和最干净的方法是什么：http: //www.makerstudios.com/（但在左侧）
Using bootstrap 3
使用引导程序 3
Thanks.
谢谢。
回答by no0ne
Here is a super useful plugin / add-on for Bootstrap 3. It is called Jasny Bootstrapand among the many features, one is an off-canvas navigation. The looks and feels of it is very much like Bootstrap, so if that is your framework of choice (like for me), I highly recommend this.
这是 Bootstrap 3 的一个非常有用的插件/附加组件。它被称为Jasny Bootstrap，在众多功能中，一个是画布导航。它的外观和感觉非常像 Bootstrap，所以如果这是你选择的框架（就像我一样），我强烈推荐这个。
I had some issue with the sidebar closing automatically after each click in the menu, so the fix for that (if you need it) was to add data-autohide="false"to the button that opens the panel. This way it stays open until the user clicks on a 'CLOSE' link.
每次单击菜单后侧边栏都会自动关闭，我遇到了一些问题，因此解决方法（如果需要）是添加data-autohide="false"到打开面板的按钮中。这样它会一直保持打开状态，直到用户点击“关闭”链接。
<a data-toggle="offcanvas" data-target=".navmenu" data-canvas="body" data-autohide="false">CLICK</a>
回答by 4dgaurav
I found this fiddle it may help you as well Demo
我发现这个小提琴它也可以帮助你 Demo
HTML
HTML
<body>
<nav class='sidebar sidebar-menu-collapsed'> <a href='#' id='justify-icon'>
<span class='glyphicon glyphicon-align-justify'></span>
</a>
<ul class='level1'>
<li class='active'> <a class='expandable' href='#' title='Dashboard'>
<span class='glyphicon glyphicon-home collapsed-element'></span>
<span class='expanded-element'>Dashboard</span>
</a>
<ul class='level2'>
<li> <a href='#' title='Traffic'>Traffic</a>
</li>
<li> <a href='#' title='Conversion rate'>Conversion rate</a>
</li>
<li> <a href='#' title='Purchases'>Purchases</a>
</li>
</ul>
</li>
<li> <a class='expandable' href='#' title='APIs'>
<span class='glyphicon glyphicon-wrench collapsed-element'></span>
<span class='expanded-element'>APIs</span>
</a>
</li>
<li> <a class='expandable' href='#' title='Settings'>
<span class='glyphicon glyphicon-cog collapsed-element'></span>
<span class='expanded-element'>Settings</span>
</a>
</li>
<li> <a class='expandable' href='#' title='Account'>
<span class='glyphicon glyphicon-user collapsed-element'></span>
<span class='expanded-element'>Account</span>
</a>
</li>
</ul> <a href='#' id='logout-icon' title='Logout'>
<span class='glyphicon glyphicon-off'></span>
</a>
</nav>
</body>
css
css
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css");
body {
background: none repeat scroll 0 0 white;
}
nav.sidebar-menu-collapsed {
width: 44px;
}
nav.sidebar-menu-expanded {
width: auto;
}
nav.sidebar {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
background: none repeat scroll 0 0 #0099ff;
color: white;
padding: 20px 10px;
}
nav.sidebar a#justify-icon {
outline: 0;
color: white;
font-size: 24px;
font-style: normal;
}
nav.sidebar a#logout-icon {
outline: 0;
color: white;
font-size: 24px;
font-style: normal;
position: absolute;
bottom: 10px;
left: 10px;
}
nav.sidebar ul.level1 {
margin: 0;
padding: 0;
margin-top: 60px;
}
nav.sidebar ul.level1 li {
margin: 0;
padding: 0;
margin-top: 20px;
list-style-type: none;
}
nav.sidebar ul.level1 li a.expandable {
outline: 0;
display: block;
position: relative;
width: 100%;
height: 30px;
color: white;
text-decoration: none;
text-align: left;
padding: 4px 4px 4px 0px;
font-size: 20px;
}
nav.sidebar ul.level1 li a.expandable:hover {
color: #bbbbbb;
}
nav.sidebar ul.level1 li a.expandable span.expanded-element {
display: none;
font-size: 11px;
position: relative;
bottom: 5px;
}
nav.sidebar ul.level1 li.active {
margin-left: -4px;
}
nav.sidebar ul.level1 li.active a.expandable {
background: none repeat scroll 0 0 black;
border-radius: 4px;
color: white !important;
width: 30px;
padding: 4px;
}
nav.sidebar ul.level1 li.active a.expandable:hover {
color: white !important;
}
nav.sidebar ul.level1 ul.level2 {
margin: 20px 6px 20px 30px;
padding: 0;
display: none;
}
nav.sidebar ul.level1 ul.level2 li {
margin: 0;
padding: 0;
margin-top: 10px;
padding-bottom: 10px;
list-style-type: none;
border-bottom: solid white 1px;
}
nav.sidebar ul.level1 ul.level2 li:last-child {
border-bottom: none;
}
nav.sidebar ul.level1 ul.level2 li a {
text-decoration: none;
outline: 0;
color: white;
text-decoration: none;
font-size: 11px;
}
jQuery
jQuery
(function () {
$(function () {
var SideBAR;
SideBAR = (function () {
function SideBAR() {}
SideBAR.prototype.expandMyMenu = function () {
return $("nav.sidebar").removeClass("sidebar-menu-collapsed").addClass("sidebar-menu-expanded");
};
SideBAR.prototype.collapseMyMenu = function () {
return $("nav.sidebar").removeClass("sidebar-menu-expanded").addClass("sidebar-menu-collapsed");
};
SideBAR.prototype.showMenuTexts = function () {
return $("nav.sidebar ul a span.expanded-element").show();
};
SideBAR.prototype.hideMenuTexts = function () {
return $("nav.sidebar ul a span.expanded-element").hide();
};
SideBAR.prototype.showActiveSubMenu = function () {
$("li.active ul.level2").show();
return $("li.active a.expandable").css({
width: "100%"
});
};
SideBAR.prototype.hideActiveSubMenu = function () {
return $("li.active ul.level2").hide();
};
SideBAR.prototype.adjustPaddingOnExpand = function () {
$("ul.level1 li a.expandable").css({
padding: "1px 4px 4px 0px"
});
return $("ul.level1 li.active a.expandable").css({
padding: "1px 4px 4px 4px"
});
};
SideBAR.prototype.resetOriginalPaddingOnCollapse = function () {
$("ul.nbs-level1 li a.expandable").css({
padding: "4px 4px 4px 0px"
});
return $("ul.level1 li.active a.expandable").css({
padding: "4px"
});
};
SideBAR.prototype.ignite = function () {
return (function (instance) {
return $("#justify-icon").click(function (e) {
if ($(this).parent("nav.sidebar").hasClass("sidebar-menu-collapsed")) {
instance.adjustPaddingOnExpand();
instance.expandMyMenu();
instance.showMenuTexts();
instance.showActiveSubMenu();
$(this).css({
color: "#000"
});
} else if ($(this).parent("nav.sidebar").hasClass("sidebar-menu-expanded")) {
instance.resetOriginalPaddingOnCollapse();
instance.collapseMyMenu();
instance.hideMenuTexts();
instance.hideActiveSubMenu();
$(this).css({
color: "#FFF"
});
}
return false;
});
})(this);
};
return SideBAR;
})();
return (new SideBAR).ignite();
});
}).call(this);
回答by Razan Paul
This solution is only for people who use Angular. Using ng-classof Angular, we can hide and show the side bar.
此解决方案仅适用于使用 Angular 的人。使用ng-classAngular，我们可以隐藏和显示侧边栏。
http://jsfiddle.net/DVE4f/359/
http://jsfiddle.net/DVE4f/359/
<div class="container" style="width:100%" ng-app ng-controller="AppCtrl">
<div class="row">
<div ng-class="showgraphSidebar ? 'col-xs-3' : 'hidden'" id="colPush" >
Sidebar
</div>
<div ng-class="showgraphSidebar ? 'col-xs-9' : 'col-xs-12'" id="colMain" >
<button ng-click='toggle()' >Sidebar Toggle</a>
</div>
</div>
</div>
.
.
function AppCtrl($scope) {
$scope.showgraphSidebar = false;
$scope.toggle = function() {
$scope.showgraphSidebar = !$scope.showgraphSidebar;
}
}
回答by FabianW
EDIT: I've added one more option for bootstrap sidebars.
编辑：我为引导侧边栏添加了另一个选项。
There are actually three manners in which you can make a bootstrap 3 sidebar. I tried to keep the code as simple as possible.
实际上，您可以通过三种方式制作 bootstrap 3 侧边栏。我尽量保持代码简单。
Fixed sidebar
固定侧边栏
Here you can see a demoof a simple fixed sidebar I've developed with the same height as the page
在这里你可以看到我开发的一个简单的固定侧边栏的演示，它与页面高度相同
Sidebar in a column
列中的侧边栏
I've also developed a rather simple column sidebar that works in a two or three column page inside a container. It takes the length of the longest column. Here you can see a demo
我还开发了一个相当简单的列侧边栏，可在容器内的两列或三列页面中使用。它需要最长列的长度。在这里你可以看到一个演示
Dashboard
仪表盘
If you google bootstrap dashboard, you can find multiple suitable dashboard, such as this one. However, most of them require a lot of coding. I've developed a dashboard that works without additional javascript (next to the bootstrap javascript). Here is a demo
如果你谷歌引导仪表板，你可以找到多个合适的仪表板，比如这个。但是，它们中的大多数都需要大量编码。我开发了一个无需额外 javascript 即可工作的仪表板（在引导程序 javascript 旁边）。这是一个演示
For all three examples you off course have to include the jquery, bootstrap css, js and theme.css files.
对于所有三个示例，您当然必须包括 jquery、bootstrap css、js 和 theme.css 文件。
For making the sidebar transposable you need a simple javascript file that transposes the desired sidebar, such as given in other answers on this page or here
为了使侧边栏可转置，您需要一个简单的 javascript 文件来转置所需的侧边栏，例如在本页或此处的其他答案中给出
Slidebar
滑动条
If you want the sidebar to hide on pressing a button this is also possible with only a little javascript.Here is a demo
如果您希望侧边栏在按下按钮时隐藏，这也可以只使用一点 javascript。这是一个演示
