Cacher is the code snippet organizer for pro developers

*,*:after,*:before{
  box-sizing:border-box;
}
html,body{
  position:relative;
  height:100%;
}
body{
  background:url('http://tinyurl.com/mxos9no') no-repeat center center fixed;
  background-size:cover;
  -moz-background-size:cover;
  font-size:14px;
  line-height:1.2;
  margin:0;
  padding:0;
}

.info{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  width:20em;
  height:9em;
  padding:1em 0.5em;
  font-size: 1em;
  font-family: sans-serif;
  text-align:center;
  background: #8F00FF;
  color:#1ABC9C;
}
h1,.info > h1 {
  margin:0;
  padding:0;
  font-size: 3em;
  font-family: sans-serif;
  font-weight: bold;
  line-height:1;
  text-align: center;
  color:#ECF0F1;
}
.info h2{
  margin:0;
  padding:0;
  font-size:2em;
  font-family: sans-serif;
  font-weight: normal;
  color:#BDC3C7;
}


/* menu */
.box{
  position:fixed;
  top:0;
  left:-11em;
  display:block;
  width:6em;
  min-height:30em;
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#000;
  background: rgba(0, 0, 0, 0.67);
  color:#ECF0F1;
  transition:left 0.5s ease;
}
.box .logo img {
  display: block;
  width: 100%;
}
.box ul{
  list-style:none;
  margin:0;
  padding:0;
}
.box li{
  display:block;
  width:100%;
}
.box a {
  display: block;
  width: 100%;
  padding: 1em 1em;
  text-align: center;
  text-decoration: none;
  color: #999;
}
.box a:hover {
  background: #fff;
  background: rgba(250, 250, 250, 0.1);
  text-decoration: none;
  color: #ECF0F1;
}
.box .icon {
  display: block;
  width: 100%;
  font-size: 3em;
}
.date {
  position: absolute;
  bottom: 3em;
  right: 3em;
  min-width:22em; 
  padding:1em 0.5em;
  line-height: 2em;
  text-align: center;
  opacity:0;
  visibility: hidden;
  background: #000;
  background: rgba(0, 0, 0, 0.6);
  color: #eee;
  transition: all 1s ease;
  overflow: hidden;
}
.clock {
  font-size: 4em;
  display:inline-block; 
  padding: 0.5em;
  float:left;
}
.day {
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
  margin-top: 1em;
  text-align:center;
}
.day li{
  font-size:1.5em;
}
.showClock{
  opacity:1;
  visibility:visible;
  transition:opacity 1s ease;
}
.show{
  left:0;
  transition:left 0.5s ease;
}

var b = document.querySelector('.box'),
    d = document.querySelector('.date');

// clock and date
function clock(){
  var cT = new Date(),
      cD = cT.getDate(),
      cH = cT.getHours(),
      cM = cT.getMinutes(),
      cS = cT.getSeconds(),
      cA = cT.getFullYear();

  cM = (cM < 10 ? '0' : '') + cM;
  cS = (cS < 10 ? '0' : '') + cS;
  cH = (cH > 12) ? cH - 12 : cH;
  cH = (cH === 0) ? 12 : cH;
  // get Clock
  var clk = cH + ':' + cM;
  
  // array  days
  var w = new Array(7);
  w = [
    'Sunday','Monday','Tuesday',
    'Wednesday','Thursday','Friday','Saturday'];
  
  // get day
  var day = w[cT.getDay()];
  
  // array months
  var m = new Array(12);
  m =[
    'January','February','March',
    'April','May','June','July',
    'August','September','October',
    'November','December'];
  // get Month
  var month = m[cT.getMonth()];

  // Render html
  d.innerHTML = 
    '<div class="clock">'+clk+'</div>'+
    '<ul class="day">'+
      '<li>'+day+'</li>'+
      '<li>'+cD+' of '+month+'</li>'+
    '</ul>';
}

// menu 
function menu(e){
  // left = 20px
  if (e.clientX < '20'){
    b.classList.add('show');
    d.classList.add('showClock');
    // show clock
    clock();
  // left = 150px
  }else if(e.clientX > '100'){
    b.classList.remove('show');
    d.classList.remove('showClock');
  }
}
// get function on mouse move
document.onmousemove = menu; 

<div class="box">
  <div class="logo">
    <img src="http://tinyurl.com/om39tud" alt="" />
  </div>
<nav role='navigation'>
  <ul>
    <li>
      <a href="#">
        <i class="fa fa-search fa-fw icon"></i>
        Search
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fa fa-book fa-fw icon"></i>
        Library
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fa fa-codepen fa-fw icon"></i>
        Snippets
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fa fa-cog fa-spin icon"></i>
        Settings
      </a>
    </li>
  </ul>
</nav>   
</div>


<!-- date -->
<div class="date"> </div>



<!--- info panel -->
<div class="info">
  <h1>Menu Effect</h1>
  <h2>Like windows 8</h2>
  <p>Please move the mouse to the left zone </p>
</div>