БЛОГ НА HUSL


Как передать в onChange label с классом

Автор вопроса: Aleksus

Вот так выдаёт ошибку Uncaught TypeError: Cannot read property 'toggle' of undefined. Насколько я понял, то id я могу передать. А как быть label.hamburger > i?

function myFunction(x) {
    x.classList.toggle('blue');
}
/* Hamburger
   ========================================================================== */
body {background-color: #2F3133}
.drawer-list {
    position: fixed;
    left: 0;
    top: 0;
    height: 110vh;
    width: 100vw;
    transform: translate(-100vw, 0);
    -ms-transform: translatex(-100vw);
    box-sizing: border-box;
    pointer-events: none;
    transition: width 475ms ease-out, transform 450ms ease, border-radius .8s .1s ease;
    background-color: #3d88ce;
    background-color: #f49c09;
}

@media (min-width: 768px) {
    .drawer-list {
        width: 100%;
    }
}

.proposal-hamburger-menu {
    background-color: black;
    padding-top: 20px;
    padding-bottom: 23px;
}

.proposal-hamburger-menu p {
    color: #F8F8F8;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 25px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

.proposal-hamburger-menu {
    background-color: black;
    transition: 0.3s linear;
    margin-top: 39px;
}

.proposal-hamburger-menu:hover {
    background-color: #2F3133;
}

.drawer-list ul {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
    overflow-x: hidden;
    pointer-events: auto;
}

.drawer-list li {
    list-style: none;
    text-transform: capitalize;
    pointer-events: auto;
    white-space: nowrap;
    box-sizing: border-box;
    transform: translatex(100vw);
    -ms-transform: translatex(-100vw);
}

.drawer-list li:last-child {
    margin-bottom: 2em;
}

.drawer-list li a {
    text-decoration: none;
    color: white;
    text-align: center;
    display: block;
    padding: 18px;
    font-size: 24px;
}

@media (min-width: 768px) {
    .drawer-list li a {
        text-align: center;
        padding: 1.5rem;
    }
}

@media (max-width: 375px) {
    .drawer-list li a {
        font-size: calc(28px - 1.3vw);
    }
}

.drawer-list li a:hover {
    cursor: pointer;
    background-color: #88c2f8;
    background-color: #c58a52;
}


input.hamburger {
    display: none;
}

input.hamburger:checked ~ .drawer-list {
    transform: translatex(0);
    border-bottom-left-radius: 0;
}

input.hamburger:checked ~ .drawer-list li {
    transform: translatex(0);
}

input.hamburger:checked ~ .drawer-list li:nth-child(1) {
    transition: transform 1s 0.08s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(2) {
    transition: transform 1s 0.16s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(3) {
    transition: transform 1s 0.24s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(4) {
    transition: transform 1s 0.32s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(5) {
    transition: transform 1s 0.4s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(6) {
    transition: transform 1s 0.48s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(7) {
    transition: transform 1s 0.56s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(8) {
    transition: transform 1s 0.64s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(9) {
    transition: transform 1s 0.72s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(10) {
    transition: transform 1s 0.8s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(11) {
    transition: transform 1s 0.88s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(12) {
    transition: transform 1s 0.96s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(13) {
    transition: transform 1s 1.04s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(14) {
    transition: transform 1s 1.12s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(15) {
    transition: transform 1s 1.2s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(16) {
    transition: transform 1s 1.28s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(17) {
    transition: transform 1s 1.36s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(18) {
    transition: transform 1s 1.44s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(19) {
    transition: transform 1s 1.52s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(20) {
    transition: transform 1s 1.6s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(21) {
    transition: transform 1s 1.68s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(22) {
    transition: transform 1s 1.76s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(23) {
    transition: transform 1s 1.84s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(24) {
    transition: transform 1s 1.92s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(25) {
    transition: transform 1s 2s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(26) {
    transition: transform 1s 2.08s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(27) {
    transition: transform 1s 2.16s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(28) {
    transition: transform 1s 2.24s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(29) {
    transition: transform 1s 2.32s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(30) {
    transition: transform 1s 2.4s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(31) {
    transition: transform 1s 2.48s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(32) {
    transition: transform 1s 2.56s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(33) {
    transition: transform 1s 2.64s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(34) {
    transition: transform 1s 2.72s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(35) {
    transition: transform 1s 2.8s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(36) {
    transition: transform 1s 2.88s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(37) {
    transition: transform 1s 2.96s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(38) {
    transition: transform 1s 3.04s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(39) {
    transition: transform 1s 3.12s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(40) {
    transition: transform 1s 3.2s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(41) {
    transition: transform 1s 3.28s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(42) {
    transition: transform 1s 3.36s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(43) {
    transition: transform 1s 3.44s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(44) {
    transition: transform 1s 3.52s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(45) {
    transition: transform 1s 3.6s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(46) {
    transition: transform 1s 3.68s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(47) {
    transition: transform 1s 3.76s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(48) {
    transition: transform 1s 3.84s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(49) {
    transition: transform 1s 3.92s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li:nth-child(50) {
    transition: transform 1s 4s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked ~ .drawer-list li a {
}

input.hamburger:checked ~ label > i {
    background-color: transparent;
    transform: rotate(90deg);
}

input.hamburger:checked ~ label > i:before {
    transform: translate(-50%, -50%) rotate(315deg);
}

input.hamburger:checked ~ label > i:after {
    transform: translate(-50%, -50%) rotate(-315deg);
}

input.hamburger:checked ~ label close {
    color: #292929;
    width: 100%;
}

input.hamburger:checked ~ label open {
    color: transparent;
    width: 0;
}

label.hamburger {
    z-index: 9999;
    position: relative;
    display: block;
    height: 50px;
    width: 65px;
}

label.hamburger:hover {
    cursor: pointer;
}

label.hamburger text close,
label.hamburger text open {
    text-transform: uppercase;
    font-size: .6em;
    align-text: center;
    position: absolute;
    transform: translateY(50px);
    text-align: center;
    overflow: hidden;
    transition: width .25s .35s, color .45s .35s;
}

label.hamburger text close {
    color: transparent;
    right: 0;
    width: 0;
}

label.hamburger text open {
    color: black;
    width: 100%;
}

.blue {
    background-color: #00f !important;
}

label.hamburger > i {
    position: absolute;
    width: 60%;
    height: 1px;
    top: 50%;
    background-color: white;
    pointer-events: auto;
    transition-duration: .35s;
    transition-delay: .35s;
}

label.hamburger > i:before, label.hamburger > i:after {
    position: absolute;
    display: block;
    width: 80%;
    height: 1px;
    left: 50%;
    background-color: white;
    content: "";
    transition: transform 0.35s;
    transform-origin: 50% 50%;
}

label.hamburger > i:before {
    transform: translate(-50%, -7px);
}

label.hamburger > i:after {
    transform: translate(-50%, 7px);
}

label.hamburger {
    position: absolute;
    top: 25px;
    right: 60px;
}

@media screen and (min-width: 768px) {
    label.hamburger {
        display: none;
    }
}

@media screen and (max-width: 1200px) {
    label.hamburger {
        top: 26px;
        right: 10px;
    }
}

@media screen and (max-width: 540px) {
    label.hamburger {
        top: 15px;
        right: 0;
    }
}

.monogram {
    padding: 20px 0 0 15px;
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="style.css" rel="stylesheet" type="text/css">

</head>
<body>

<input id="hamburger" class="hamburger" onChange="myFunction(label.hamburger > i, this)" type="checkbox"/>
<label class="hamburger" for="hamburger">
    <i class=""></i>
    <text>

    </text>
</label>

<section class="drawer-list">
</section>

</body>
</html>


Источник

Ответы (2 шт):

Автор решения: Pilaton 

function myFunction(x) {
  document.querySelector(x).classList.toggle('blue');
}
label.hamburger>i {
  /*position: absolute;*/
  width: 60%;
  height: 1px;
  top: 50%;
  background-color: white;
  pointer-events: auto;
  transition-duration: .35s;
  transition-delay: .35s;
}

.blue {
  color: red;
}
<input id="hamburger" class="hamburger" onChange="myFunction('label.hamburger > i')" type="checkbox" />

<label class="hamburger">
  <i>текст</i>
</label>

→ Ссылка
Автор решения: Pilaton

Тогда вот так.
Я добавил некоторые новые стили сверху и закомментил некоторые ваши.

function myFunction(x) {
  document.querySelector(x).classList.toggle('blue');
}
/* Hamburger
   ========================================================================== */


/* My custom style */

label.hamburger {
  display: block !important;
  margin-top: 30px;
}

label.hamburger>i.blue,
label.hamburger>i.blue:before,
label.hamburger>i.blue:after {
  background-color: blue;
}


/* My custom style */

body {
  background-color: #2F3133
}

.drawer-list {
  position: fixed;
  left: 0;
  top: 0;
  height: 110vh;
  width: 100vw;
  transform: translate(-100vw, 0);
  -ms-transform: translatex(-100vw);
  box-sizing: border-box;
  pointer-events: none;
  transition: width 475ms ease-out, transform 450ms ease, border-radius .8s .1s ease;
  background-color: #3d88ce;
  background-color: #f49c09;
}

@media (min-width: 768px) {
  .drawer-list {
    width: 100%;
  }
}

.proposal-hamburger-menu {
  background-color: black;
  padding-top: 20px;
  padding-bottom: 23px;
}

.proposal-hamburger-menu p {
  color: #F8F8F8;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 25px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

.proposal-hamburger-menu {
  background-color: black;
  transition: 0.3s linear;
  margin-top: 39px;
}

.proposal-hamburger-menu:hover {
  background-color: #2F3133;
}

.drawer-list ul {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;
  overflow-x: hidden;
  pointer-events: auto;
}

.drawer-list li {
  list-style: none;
  text-transform: capitalize;
  pointer-events: auto;
  white-space: nowrap;
  box-sizing: border-box;
  transform: translatex(100vw);
  -ms-transform: translatex(-100vw);
}

.drawer-list li:last-child {
  margin-bottom: 2em;
}

.drawer-list li a {
  text-decoration: none;
  color: white;
  text-align: center;
  display: block;
  padding: 18px;
  font-size: 24px;
}

@media (min-width: 768px) {
  .drawer-list li a {
    text-align: center;
    padding: 1.5rem;
  }
}

@media (max-width: 375px) {
  .drawer-list li a {
    font-size: calc(28px - 1.3vw);
  }
}

.drawer-list li a:hover {
  cursor: pointer;
  background-color: #88c2f8;
  background-color: #c58a52;
}

input.hamburger {
  display: none;
}

input.hamburger:checked~.drawer-list {
  transform: translatex(0);
  border-bottom-left-radius: 0;
}

input.hamburger:checked~.drawer-list li {
  transform: translatex(0);
}

input.hamburger:checked~.drawer-list li:nth-child(1) {
  transition: transform 1s 0.08s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(2) {
  transition: transform 1s 0.16s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(3) {
  transition: transform 1s 0.24s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(4) {
  transition: transform 1s 0.32s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(5) {
  transition: transform 1s 0.4s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(6) {
  transition: transform 1s 0.48s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(7) {
  transition: transform 1s 0.56s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(8) {
  transition: transform 1s 0.64s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(9) {
  transition: transform 1s 0.72s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(10) {
  transition: transform 1s 0.8s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(11) {
  transition: transform 1s 0.88s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(12) {
  transition: transform 1s 0.96s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(13) {
  transition: transform 1s 1.04s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(14) {
  transition: transform 1s 1.12s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(15) {
  transition: transform 1s 1.2s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(16) {
  transition: transform 1s 1.28s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(17) {
  transition: transform 1s 1.36s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(18) {
  transition: transform 1s 1.44s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(19) {
  transition: transform 1s 1.52s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(20) {
  transition: transform 1s 1.6s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(21) {
  transition: transform 1s 1.68s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(22) {
  transition: transform 1s 1.76s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(23) {
  transition: transform 1s 1.84s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(24) {
  transition: transform 1s 1.92s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(25) {
  transition: transform 1s 2s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(26) {
  transition: transform 1s 2.08s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(27) {
  transition: transform 1s 2.16s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(28) {
  transition: transform 1s 2.24s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(29) {
  transition: transform 1s 2.32s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(30) {
  transition: transform 1s 2.4s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(31) {
  transition: transform 1s 2.48s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(32) {
  transition: transform 1s 2.56s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(33) {
  transition: transform 1s 2.64s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(34) {
  transition: transform 1s 2.72s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(35) {
  transition: transform 1s 2.8s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(36) {
  transition: transform 1s 2.88s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(37) {
  transition: transform 1s 2.96s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(38) {
  transition: transform 1s 3.04s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(39) {
  transition: transform 1s 3.12s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(40) {
  transition: transform 1s 3.2s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(41) {
  transition: transform 1s 3.28s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(42) {
  transition: transform 1s 3.36s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(43) {
  transition: transform 1s 3.44s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(44) {
  transition: transform 1s 3.52s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(45) {
  transition: transform 1s 3.6s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(46) {
  transition: transform 1s 3.68s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(47) {
  transition: transform 1s 3.76s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(48) {
  transition: transform 1s 3.84s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(49) {
  transition: transform 1s 3.92s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li:nth-child(50) {
  transition: transform 1s 4s cubic-bezier(0.29, 1.4, 0.44, 0.96);
}

input.hamburger:checked~.drawer-list li a {}

input.hamburger:checked~label>i {
  background-color: transparent;
  transform: rotate(90deg);
}

input.hamburger:checked~label>i:before {
  transform: translate(-50%, -50%) rotate(315deg);
}

input.hamburger:checked~label>i:after {
  transform: translate(-50%, -50%) rotate(-315deg);
}

input.hamburger:checked~label close {
  color: #292929;
  width: 100%;
}

input.hamburger:checked~label open {
  color: transparent;
  width: 0;
}

label.hamburger {
  z-index: 9999;
  position: relative;
  display: block;
  height: 50px;
  width: 65px;
}

label.hamburger:hover {
  cursor: pointer;
}

label.hamburger text close,
label.hamburger text open {
  text-transform: uppercase;
  font-size: .6em;
  align-text: center;
  position: absolute;
  transform: translateY(50px);
  text-align: center;
  overflow: hidden;
  transition: width .25s .35s, color .45s .35s;
}

label.hamburger text close {
  color: transparent;
  right: 0;
  width: 0;
}

label.hamburger text open {
  color: black;
  width: 100%;
}


/*.blue {
  background-color: #00f !important;
}*/

label.hamburger>i {
  position: absolute;
  width: 60%;
  height: 1px;
  top: 50%;
  background-color: white;
  pointer-events: auto;
  transition: transform 0.35s;
}

label.hamburger>i:before,
label.hamburger>i:after {
  position: absolute;
  display: block;
  width: 80%;
  height: 1px;
  left: 50%;
  background-color: white;
  content: "";
  transition: transform 0.35s;
  transform-origin: 50% 50%;
}

label.hamburger>i:before {
  transform: translate(-50%, -7px);
}

label.hamburger>i:after {
  transform: translate(-50%, 7px);
}

label.hamburger {
  position: absolute;
  top: 25px;
  right: 60px;
}

@media screen and (min-width: 768px) {
  label.hamburger {
    display: none;
  }
}

@media screen and (max-width: 1200px) {
  label.hamburger {
    top: 26px;
    right: 10px;
  }
}

@media screen and (max-width: 540px) {
  label.hamburger {
    top: 15px;
    right: 0;
  }
}

.monogram {
  padding: 20px 0 0 15px;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

  <input id="hamburger" class="hamburger" onChange="myFunction('label.hamburger > i')" type="checkbox" />
  <label class="hamburger" for="hamburger">
    <i class=""></i>
    <text>
    </text>
</label>

  <section class="drawer-list">
  </section>

</body>

</html>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.