jquery - Sliding a div without moving neighbouring content -

i'm trying create side bar slide in , show content when user clicks button.

the problem i'm having when clicked content on header, body , footer being moved.

i want sliding div slide on top of menu , content without moving it, creating overlay when clicked

check fiddle http://jsfiddle.net/livewirerules/tsmpraym/9/

below have tried far

jquery(document).ready(function($) {      $("#side").click(function() {          $('#slidable').animate({              width: 'toggle'          });      });  })

#menu {      background-color: green;      height: 100px;  }    #footer {      background-color: blue;      height: 100px;  }    #content {      background-color: red;      height: 400px;  }    #side {      float: left;      width: 50px;      height: 50px;      background: #bbb;  }    .hide {      display: none;  }    #slidable {      float: left;      height: 200px;      background: #888;      width: 200px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>  <div id="slidable" class="hide">foobar</div>  <div id="side">+</div>    <div id="menu">      menu  </div>  <div id="content">      content  </div>    <div id="footer">      footer  </div>

jquery(function($) { // yep. dom ready        $("#side").click(function() {      $('#slidable').toggleclass("open");    });      })

body{margin:0;} /* yey? */    #menu {    background-color: green;    height: 100px;  }  #footer {    background-color: blue;    height: 100px;  }  #content {    background-color: red;    height: 400px;  }  #side {    /*float: left; huh? */    position:absolute; /* add */    left:100%;         /* add */    width: 50px;    height: 50px;    background: #bbb;  }  /*.hide { display: none;} */  #slidable {    /*float: left; why why */    position: fixed; /* add */    top:0;    height: 100vh;    background: #888;    width: 200px;    right: 100%; /* add */    transition: 0.4s;  }  #slidable.open{    right: calc(100% - 200px);  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>    <div id="slidable">    foobar    <div id="side">+</div>  </div>      <div id="menu">    menu  </div>  <div id="content">    content  </div>    <div id="footer">    footer  </div>