/* Наше меню:
Главные параметры – это width и left. Они должны иметь одинаковое значение, но left при этом является отрицательным
Тем самым мы прячем нашу меню слева от экрана. Также добавил анимацию transition: left .2s для красоты процесса выезда */

.hidden-menu {
  display: block;
  position: fixed;
  list-style:none;
  padding: 5px;
  margin: 0;
  box-sizing: border-box;
  width: 220px;
  background-color: #666;
  height: 100%;
  top: 0;
  left: -220px;
  transition: left .2s;
  z-index: 2;
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}

/* Наш чекбокс: */
.hidden-menu-ticker { display: none; }
.ok-box { width: 5px; height: 5px; display: block; }

/* Кнопка-бургер: */
.btn-menu { color: #000; background-color: #fff; border-radius: 4px; padding: 2px 5px; position: fixed; top: 5px; left: 5px; cursor: pointer; transition: left .23s; z-index: 3; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; }

.btn-menu span { display: block; height: 5px; background-color: #fff; margin: 5px 0 0; transition: all .1s linear .23s; position: relative; }
.btn-menu span.first { margin-top: 0; }
.btn-menu p { margin: 0px; text-align: center; font-size: 11px; }
.btn-menu p small { font-size: 10px; }


/* CSS3-селекторы позволяют нам определять состояние чекбокса и применять, 
в зависимости от этого те или иные свойства для соседних элементов :checked ~.
В данном примере мы при «чекнутом» инпуте сдвигаем кнопку меню .hidden-menu-ticker:checked ~ .btn-menu влево на 160 пикселей, 
меню до левого края .hidden-menu-ticker:checked ~ .hidden-menu. 
Остальные стили написаны для полосок кнопки меню, чтобы они при нажатии превращались в крестик и наоборот. */

.hidden-menu-ticker:checked ~ .btn-menu { left: 220px; background-color: #fff; color:#000; }
.hidden-menu-ticker:checked ~ .hidden-menu { left: 0; }
.hidden-menu-ticker:checked ~ .ok-box { background-color: green; }

/*
.hidden-menu-ticker:checked ~ .btn-menu span.first { -webkit-transform: rotate(45deg); top: 10px; }
.hidden-menu-ticker:checked ~ .btn-menu span.second { opacity: 0; }
.hidden-menu-ticker:checked ~ .btn-menu span.third { -webkit-transform: rotate(-45deg); top: -10px; }
*/