194
rated 0 times
[
197]
[
3]
/ answers: 1 / hits: 106767
/ 9 Years ago, tue, september 1, 2015, 12:00:00
I have a great reference here as a side-bar for Bootstrap in designing web form applications:
http://startbootstrap.com/template-overviews/simple-sidebar/
and here's its code:
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content=IE=edge>
<meta name=viewport content=width=device-width, initial-scale=1>
<meta name=description content=>
<meta name=author content=>
<title>Simple Sidebar - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href=css/bootstrap.min.css rel=stylesheet>
<!-- Custom CSS -->
<link href=css/simple-sidebar.css rel=stylesheet>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src=https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js></script>
<script src=https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js></script>
<![endif]-->
</head>
<body>
<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=#>Dashboard</a>
</li>
<li>
<a href=#>Shortcuts</a>
</li>
<li>
<a href=#>Overview</a>
</li>
<li>
<a href=#>Events</a>
</li>
<li>
<a href=#>About</a>
</li>
<li>
<a href=#>Services</a>
</li>
<li>
<a href=#>Contact</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id=page-content-wrapper>
<div class=container-fluid>
<div class=row>
<div class=col-lg-12>
<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
<a href=#menu-toggle class=btn btn-default id=menu-toggle>Toggle Menu</a>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src=js/jquery.js></script>
<!-- Bootstrap Core JavaScript -->
<script src=js/bootstrap.min.js></script>
<!-- Menu Toggle Script -->
<script>
$(#menu-toggle).click(function(e) {
e.preventDefault();
$(#wrapper).toggleClass(toggled);
});
</script>
</body>
</html>
How do I hide the side-bar navigation first using jquery when the page loads up and only show the side-bar when the button is click Toggle Menu. The sidebar in this code is showed when the page loads up.
Here is the jquery function for toggle:
<!-- Menu Toggle Script -->
<script>
$(#menu-toggle).click(function(e) {
e.preventDefault();
$(#wrapper).toggleClass(toggled);
});
</script>
More From » jquery
