如何使用jQuery和bootstrap css实现带有图标的展开折叠侧导航
[英]How to achieve Expand collapse Side Nav with icon using jQuery and bootstrap css
问题描述
I have almost done my job for expand collapse side nav using jQuery and Bootstrap.
我几乎完成了使用 jQuery 和 Bootstrap 展开折叠侧导航的工作。 here is my html and screen shot.这是我的 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.只需告诉我在我的 html 和 css 中进行哪些更改，以便在我的左侧导航上粘贴一个小图标。 if possible please help me with code sample.如果可能，请帮助我提供代码示例。 thanks谢谢
2 个解决方案
解决方案1
3 2015-08-29 18:35:28
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.当你点击它时，它会切换一个类.sidebar-collapsed ，它将应用属性来隐藏栏。 Also, the button moves to the right to stay visible.此外，按钮向右移动以保持可见。
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%);
}
解决方案2
2 已采纳 2015-08-29 18:24:31
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
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.