example

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> example for http://stackoverflow.com/questions/16658910/javascript-sliding-side-panel </title>
  <script type="text/javascript" src="anim.min.js"></script>
  <!-- download anim-master.zip/anim.min.js (3KB) at https://github.com/relay/anim -->

  <style type="text/css">
    #menu {
      position:absolute;
      top: 30px;
      left: -150px;
      width:200px;
      background-color: #fdf;
    }
    #clickme {
      cursor:pointer;
    }
  </style>

  <script type="text/javascript">//<![CDATA[
var addEvent = document.addEventListener ?
  function (element, type, callback) {
    return element.addEventListener(type, callback);
  }
  : function (element, type, callback) {
    element.attachEvent('on'+type, callback);
  };
addEvent(window, 'load', function(){
  var el1 = document.getElementById('menu');
  var el2 = document.getElementById('clickme');
  var dir = true;
  addEvent(el2, 'click', function(){
    dir = !dir;
    anim(el1, {left: (dir?"-150px":"10px") }, 0.7, "linear"); //stretching
  });
});
//]]>
</script>
</head>
<body>
  <div id="menu">
    <p>menu</p>
    <a href="#">link</a>
    <span id="clickme" style="position:absolute;right:2px; top:1em;">click</span>
  </div>
</body>
</html>