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;
}