<div id="nav">
  <div>
    <ul class="trigger">
      <li><a href="#nav"><i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
      <li><a href="#"><i class="fa fa-chevron-left" aria-hidden="true"></i></a></li>
    </ul>
  </div>
  <div class="panel">
    sample
  </div>
</div>

ul.trigger {
  list-style-type: none;
  position: absolute;
  top: 0;
  z-index: 1;
  li:first-child {
    display: block;
  }
  li:last-child {
    display: none;
  }
  a {
    display: block;
    padding: 10px 15px;
    background: red;
    border-radius: 40px;
    text-decoration: none;
    color: white;
    font-size: 30px;
   }
}
.panel {
  background-color: green;
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100px;
  overflow: hidden;
  transition: width .3s linear;
}

#nav:target {
  li:first-child {
    display: none;
  }
  li:last-child {
    display: block;
  }
  .panel {
    width: 500px;
  }
}