How to achieve Expand collapse Side Nav with icon using jQuery and bootstrap css
Question
I have almost done my job for expand collapse side nav using jQuery and Bootstrap. here is my html and screen shot.
<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
2 answers
solution1
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. Also, the button moves to the right to stay visible.
http://jsfiddle.net/xpp5sgg8/2/
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%);
}
solution2
2 ACCPTED 2015-08-29 18:24:31
Just move your button inside your navbar-header div, like this:
<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:
.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
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.