Bootstrap 3 可折叠侧边栏
21
- Jeremie4zw
1
看起来是 Collapsing Sidebar with Bootstrap 3 的完全重复。 - Dan Dascalescu
4个回答
28
这是一个超级有用的Bootstrap 3插件/附加组件。它被称为Jasny Bootstrap，其中之一功能是侧边栏导航。它的外观和感觉非常类似于Bootstrap，所以如果你选择使用Bootstrap（就像我一样），我强烈推荐这个。
我在菜单中每次点击后自动关闭侧边栏遇到了一些问题，所以解决方法（如果需要）是将data-autohide =“false”添加到打开面板的按钮上。这样它会保持打开状态，直到用户点击“关闭”链接。
<a data-toggle="offcanvas" data-target=".navmenu" data-canvas="body" data-autohide="false">CLICK</a>
- no0ne
3
太完美了！正是我想要的，谢谢伙计。 - Jeremie4zw
我需要使用jQuery吗？ - Shardul
@Shardul 是的，你需要使用jQuery。 - Anwar
12
我找到了一个 JSFiddle 的链接，可能会对你有帮助：Demo
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
@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;
}
(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);
- 4dgaurav
3
1谢谢你的回答，但我将使用no0ne的插件。 - Jeremie4zw
@4dgaurav：jsfiddle不能扩展-有什么想法吗？-哦，不用担心-我已经搞定了... - Robert Achmann
@Josey 我只是没有正确复制信息。无论如何，他在顶部有一个链接到一个可工作版本的链接。 - Robert Achmann
7
编辑：我增加了一种用于 Bootstrap 侧边栏的选项。
实际上有三种方式可以制作 Bootstrap 3 侧边栏。我试图让代码尽可能简单。
固定侧边栏
在这里，您可以看到我开发的一个简单的固定侧边栏的演示，其高度与页面相同。
列中的侧边栏
我还开发了一个相当简单的列侧边栏，适用于容器内的两列或三列页面。它采用最长列的长度。在这里，您可以看到一个演示
仪表板
如果您搜索 Bootstrap 仪表板，可以找到多个合适的仪表板，例如这个。但是，大多数需要大量编码。我开发了一个仪表板，可以在不需要额外 JavaScript（除了 Bootstrap JavaScript）的情况下使用。这里是一个演示
对于所有三个示例，您当然需要包括 jquery、bootstrap css、js 和 theme.css 文件。
为了使侧边栏可调换，您需要一个简单的 JavaScript 文件来转置所需的侧边栏，例如在此页面上给出的其他答案或此处
滑动条
如果您希望通过按下按钮隐藏侧边栏，只需要很少量的 JavaScript 即可实现。这里是一个演示
- FabianW
5
这个解决方案仅适用于使用 Angular 的人。通过使用 Angular 的
ng-class，我们可以隐藏和显示侧边栏。
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;
}
}
- Razan Paul
2
有什么想法可以添加幻灯片动画吗？ - edgarpetrauskas
1你有没有看过https://dev59.com/fV8d5IYBdhLWcg3w8WFt？ - Razan Paul
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接