Слайд-панель на чистом CSS

Выдвигающаяся фиксированная боковая панель на скрытых чекбоксах

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<input type="checkbox" id="asruk-tkilasun" aria-hidden="true">
<nav class="mudsarulopas">
  <label for="asruk-tkilasun" class="asruk-tkilasun" onclick></label>
  <section>
     <p>Здесь отлично смотрится заголовок</p>
     <p>Это уже делаем под описание, смотря какой характер работы задействован.</p>
  </section>
</nav>

CSS

.mudsarulopas {
    width: 349px;
    position: fixed;
    padding: 0;
    top: 49.7%;
    margin-top: -99.7px;
    right: 0;
    background: #2b99bb;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: 0.34s;
    -moz-transition: 0.34s;
    transition: 0.34s;
    z-index: 9998;
}
.mudsarulopas:hover {background: #3c8eaf;}
.mudsarulopas > section {
  padding: 15px;
  color: #f5f5f5 
}
.asruk-tkilasun {
    position: absolute;
    right: 99.8%;
    top: 41%;
    margin-top: -24px;
    left: -24px;
    padding: 1em 0;
    background: inherit;
    border-bottom-left-radius: 7px;
    border-top-left-radius: 7px;
    color: #f7f3f1;
    font-size: 1.4em;
    line-height: 1;
    text-align: center;
}
.asruk-tkilasun:after {
  content: '\f003';
  font: normal 18px/1 'FontAwesome';
  text-decoration: inherit;
}
.asruk-tkilasun:hover{
  cursor: pointer;
  color:#fff;
}

[id='asruk-tkilasun'] {
  position: absolute;
  right:0;
  display:none;
}

[id='asruk-tkilasun']:checked ~ .mudsarulopas {
   -webkit-transform: translateX(0);
   -moz-transform: translateX(0);
   transform: translateX(0);
}

[id='asruk-tkilasun']:checked ~ .mudsarulopas > .asruk-tkilasun:after {
  content:'\f2b7';
  font: normal 18px/1 'FontAwesome';
}
body { 
  -webkit-animation: bugfix infinite 1s;
  animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix { 
  to { padding: 0; } 
}

@media (max-width: 350px) {
  .mudsarulopas {
    width: 100%;
  }
}