<nav>
  <a href="#" data-menu="A" data-title="I am a drawer"></a>
  <a href="#" data-menu="B" data-title="I am also a drawer"></a>
  <a href="#" data-menu="C" data-title="And I am a drawer too!"></a>
</nav>
body {
  font: 16px/1 serif;
  margin: 0;
}

nav a {
  font: 0/0 serif;
  font-family: 'Oswald', serif;
  text-align: center;
  text-decoration: none;
  display: block;
  position: relative;
  width: 60px;
  height: 60px;
}

nav a::before {
  color: #fff;
  font: 30px/60px serif;
  font-family: 'Oswald', serif;
  background-color: rgba(33,150,243,1);
  width: 60px;
  height: 60px;
  z-index: 99;
  display: block;
  position: absolute;
}

nav a::before {
  content: "\A"attr(data-menu);
}

nav a::after {
  color: #fff;
  font: 15px/1 sans-serif;
  font-family: 'Oswald', serif;
  text-align: left;
  white-space: pre-wrap;
  background-color: rgba(33,150,243,0.7);
  padding: 8px 10px;
  top: 0;
  bottom: 0;
  right: 0;
  width: 290px;
  z-index: 0;
  display: block;
  position: absolute;
  transition: all .3s ease-out;
}

nav a::after {
  content: "\A"attr(data-title);
}

nav a:hover::after {
  right: -310px;
}
/*
  Developed with love by Blu Frame

  http://blufra.me  
*/
Rerun