HTML floating sidebar/nav bar

Question

I'm using bootstrap3. Having said that, I'm open to implementing my requirement in pure javascript or Jquery or any other similar frameworks.

I'm looking to implement a sidebar on the left hand side of the page. The sidebar needs to be invisible. However a handle like picture to show that something can be clicked is a must. When the user clicks on this handle type image, the sideber needs to float out. The sidebar will have a bunch of options on it which the user can choose which will later act as a filter to the contents on the page. Once the work is done, if the user clicks anywhere outside of the sidebar, the sidebar needs to slide back into it's place.

I like the example here - http://startbootstrap.com/template-overviews/simple-sidebar/ However, it doesn't float on top of the existing content, instead, pushes out the content & also doesn't have a handle type stuff I'm after, instead uses a button.

Could I please request some guidance here?

Answer 1

First off there are several different off-canvas menu plugins for jquery. Here is one that may be helpful jquery off canvas push navigation . Or you can check out this page with multiple plugins Jquery off canvas menus .

If you don't want to use a plugin you can do this with a very tiny jquery code and some css. First you need to create a menu button and a menu and give the menu a negative margin so it is hidden. Then you should wrap you body content in a div so that you can easily move it over when the menu is open. Then you just need to use jquery toggleClass to toggle the body to have a class of menu-open when when your button is clicked, a nav link is clicked and when the menu is open your main content is clicked.

Fiddle demo Fiddle

Here is the jquery:

$( document ).on( "click", ".menu-button, .menu ul li a, .menu-open .content-wrapper", function() {
    $( 'body' ).toggleClass( "menu-open" );
});

The html:

<div class="menu-button">
  <span class="menu-layer first"></span>
  <span class="menu-layer second"></span>
  <span class="menu-layer third"></span>
</div>
<nav class="menu">
  <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</nav>
<div class="content-wrapper">
  <h1>Body Content</h1>
  <p>Here is you main content</p>
</div>

And the css:

body{
  overflow-x: hidden;
}
.menu{
  width: 300px;
  height: 100%;
  position: fixed;
  left: -300px;
  top: 0;
  background: #000;
  z-index: 99;
  -ms-transition: all 500ms ease-in-out;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}
.menu ul{
  list-style-type:none;
  padding: 0;
  margin: 0;
}
.menu ul li{
  width: 100%;
  margin: 1px 0;
}
.menu ul li a {
  width: 100%;
  display: block;
  padding: 15px;
  background: #111;
  color: #fff;
  font-size: 16px;
}
.content-wrapper {
  padding: 20px;
  padding-top: 80px;
  width: 100%;
  min-height: 100vh;
  -ms-transition: all 500ms ease-in-out;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}
/*menu button styles*/
.menu-button { 
  width: 100px;
  height:75px;
  text-align:center;
  position:fixed;
  left:0;
  top:0;
  z-index: 99;
  background: #111;
  -ms-transition: all 500ms ease-in-out;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}
.menu-button:hover {
  cursor:pointer;
  cursor: hand;
}
.menu-button .menu-layer {
  border-radius: 1px;
  display: block;
  height: 1px;
  position: absolute;
  width:50%;
  left:25%;
  background:#fff;
  -ms-transition: all 300ms ease-in-out;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.menu-button .menu-layer.first { top: 25%;}
.menu-button:hover .menu-layer.first {top:30%; }
.menu-open .menu-button .menu-layer.first { 
  top: 50%;
  left: 35%;
  width:30%;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.menu-button .menu-layer.second { top: 45%;}
.menu-open .menu-button .menu-layer.second {
  opacity: 0;
  left: 0;
}
.menu-button .menu-layer.third { top: 67%;}
.menu-button:hover .menu-layer.third {top:62%; }
.menu-open .menu-button .menu-layer.third { 
  top: 50%;
  left: 35%;
  width:30%;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
/*menu open styles */
.menu-open .menu{
  left: 0;
}
.menu-open .menu-button {
  left: 300px;
}
.menu-open .content-wrapper {
  margin-left: 300px;
}