Выезжающие кнопки боковой навигации

Пример

<div id="mySidenav" class="sidenav">
  <a href="#" id="about">О нас</a>
  <a href="#" id="blog">Блог</a>
  <a href="#" id="projects">Проекты</a>
  <a href="#" id="contact">Контакты</a>
</div>

Пример

/* Стили ссылок в системе навигации */
#mySidenav a {
  position: absolute; /* Позиция относительно окна браузера */
  left: -100px; /* Позиция на экране */
  transition: 0.3s; /* Добавляем трансформацию при наведении */
  padding: 15px; /* Отступы 15px */
  width: 120px; /* Задаем ширину */
  text-decoration: none; /* Убираем подчеркивание */
  font-size: 20px; /* Размер шрифта */
  color: white; /* Белый цвет текста */
  border-radius: 0 5px 5px 0; /* Закругленные углы в верхней и нижней части справа */
}

#mySidenav a:hover {
  left: 0; /* При наведении курсора элементы выезжают на всю ширину */
}

/* Ссылка "О нас": 20px от верха, зеленый фон */
#about {
  top: 20px;
  background-color: #04AA6D;
}

#blog {
  top: 80px;
  background-color: #2196F3; /* Синий */
}

#projects {
  top: 140px;
  background-color: #f44336; /* Красный */
}

#contact {
  top: 200px;
  background-color: #555 /* Сероватый */
}