Hello Readers
In this article I will guide you how to create custom side bar with the help of jquery.

Here is the HTML

<section id="slideBox" class="open">
          <nav id="menu">
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">About Us</a></li>
                    <li><a href="">Gallery</a></li>
                    <li><a href="">Location</a></li>
                </ul>
            </nav>
            <div id="slideBar">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </section>

Here is the CSS

*{
        padding :0px;
    margin:0px;
    }
        #slideBox {
        height: 100%;
        width: 260px;
        float: right;
        position: fixed;
        z-index: 12333300;
        text-align: left;
        left: -215px;
        }

#menu{width:215px;height:100%; float:left;
border-top: solid;
border-color: #DDD;
border-width: 1px;
    color:white;
-webkit-box-shadow: 2px 0px 2px rgba(0,0,0,.5);
-moz-box-shadow: 2px 0px 2px rgba(0,0,0,.5);
box-shadow: 2px 0px 2px rgba(0,0,0,0.5);
background: #717171;
}



#slideBar {
width: 45px;
background-color: rgb(218, 218, 218);
float: right;
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;}


#slideBox li a {
color: white;
display: block;
padding:10px;
text-decoration: none;
}

#slideBox li a:hover {
color: #AAA;

}

#slideBox li {
list-style: none;
text-align: left;
border-top: solid;
border-color: #ddd;
border-width: 1px;
font-size: 20px;
width: 100%;
}

#slideBar span{
    display: block;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
    height: 3px;
  margin: 5px;
  padding: 2px;
  background: #000;
}

Here is the JS

$(document).ready(function(){
    $('#slideBar').on('click', function(){
          var $this = $("#slideBox");
          if ($this.hasClass('open')) {
                $this.animate({
                  left : '0px'
                }, 500).removeClass('open');
              } 
          else {
                $this.animate({
                  left : -215
                }, 500).addClass('open');
              }
            });
        });