twitter-bootstrap 如何使用jQuery和bootstrap css实现带有图标的展开折叠侧导航
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32289217/
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
How to achieve Expand collapse Side Nav with icon using jQuery and bootstrap css
提问by Mou
I have almost done my job for expand collapse side nav using jQuery and Bootstrap. here is my html and screen shot.
我几乎完成了使用 jQuery 和 Bootstrap 展开折叠侧导航的工作。这是我的 html 和屏幕截图。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
rel="stylesheet" type="text/css" />
<%--Add the css reference here--%>
<link href="../css/simple-sidebar.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$("#ToggleSideMenu").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
});
</script>
</head>
<body>
<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=".navbar-collapse">
<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 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>
</div>
</div>
</div>
<div class="container body-content">
</div>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand"><a href="#">Start Bootstrap </a></li>
<li><a href="#">Home</a> </li>
<li><a href="#">About</a> </li>
<li><a href="#">Contact</a> </li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<br />
<br />
<a href="#ToggleSideMenu" class="btn btn-default" id="ToggleSideMenu">Toggle Menu</a>
<hr />
<footer>
<p>© 2015 - My ASP.NET Application</p>
</footer>
</div>
<!-- /#page-content-wrapper -->
</div>
</body>
</html>
screen shot
截屏
in my case nav is getting expand and collapse by button by i want to do with icon which will be sticky with nav bar. here i am giving a url which looks same as per my requirement.
在我的情况下，导航正在通过按钮展开和折叠，因为我想使用将与导航栏粘在一起的图标。在这里，我提供了一个与我的要求看起来相同的网址。
http://www.keenthemes.com/preview/index.php?theme=conquer
just tell me what to change in my html and css to get a little icon stick with my left side nav. if possible please help me with code sample. thanks
只需告诉我在我的 html 和 css 中进行哪些更改，以便在我的左侧导航上粘贴一个小图标。如果可能，请帮助我提供代码示例。谢谢
采纳答案by Jef
Just move your button inside your navbar-header div, like this:
只需将按钮移动到导航栏标题 div 中，如下所示：
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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>
Then, in your css:
然后，在你的 css 中：
.navbar-header {
position: relative;
}
.navbar-toggle {
position: absolute; // this takes the button out of the regular document flow
left: 100%; // this will stick the button on the outside right edge -- reduce this if you want the button more inside of the navbar-header
top: 50%;
transform: translateY(-50%); // this & the rule above it will center the button vertically relative to the navbar-header
}
回答by Kevin Hufnagl
Here is a simple sidebar with a toggle button inside of it.
When you click on it, it toggles a class .sidebar-collapsed, which will apply attributes to hide the bar. Also, the button moves to the right to stay visible.
这是一个简单的侧边栏，里面有一个切换按钮。当您单击它时，它会切换一个 class .sidebar-collapsed，它将应用属性来隐藏栏。此外，按钮向右移动以保持可见。
http://jsfiddle.net/xpp5sgg8/2/
http://jsfiddle.net/xpp5sgg8/2/
CSS
CSS
.sidebar, .toggle {
transition:all .5s ease-in-out;
-webkit-transition:all .5s ease-in-out;
}
.sidebar {
background:lightgrey;
width:200px;
height:100vh;
position:absolute;
top:0;
left:0;
}
.toggle {
position:absolute;
right:5px;
top:5px;
width:30px;
height:30px;
background:black;
}
.sidebar-collapsed {
transform:translateX(-100%);
-webkit-transform:translateX(-100%);
}
.sidebar-collapsed .toggle {
right:-5px;
transform:translateX(100%);
-webkit-transform:translateX(100%);
}
