Почему не работает меню?

Question

[Skrolea]

Добрый день. При нажатии на элемент меню (и добавлению, соответственно, класса "active") меню исчезает. Не срабатывает span. В чем дело?

<div class="grid__menu">
                <div class="menu__button" id="menu_button">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>

.menu__button span {
    display: block;
    position: absolute;
    height: 9px;
    width: 100%;
    background: #ff4081;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}
.menu__button span:nth-child(1) {
  top: 0px;
}

.menu__button span:nth-child(2) {
  top: 18px;
}
.menu__button span:nth-child(3) {
  top: 36px;
}
.menu__button--active span:nth-child(1) {
  top: 18px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

.menu__button--active span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

.menu__button--active span:nth-child(3) {
  top: 18px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

Пример кода

Answer 1

[Aleksandr]

А куда делся класс menu__button ? вместо того, чтобы добавить класс, вы его заменяете.

Comments

[Skrolea]

Да, спасибо. Мне надо как-то переписать css, чтобы относилось к замененному классу

[Aleksandr]

Skrolea: Просто замените селектор

[Aleksandr]

Skrolea: например на div[class^="menu__button"]

[Skrolea]

Да, но я сделал вот так codepen.io/TsarS/pen/pbRMNv .menu__button span,.menu__button--active span

Answer 2

[Олег]

Скинь код на https://jsfiddle.net/

Comments

[Skrolea]

Он в конце вопроса, "Пример кода"