Как работает toggle?

Question

[slavkapiyavka]

Имеем следующий примерный кусок кода: https://codepen.io/slavka_piyavka/pen/yLyVPNJ
В js закомментирована шестая строчка кода - таким образом срабатывает анимация бургера, но меню не появляется.
Если раскомментировать строчку - анимация не срабатывает, но меню появляется.
Почему так? В js только начал, банальных вещей могу не знать.
Требуется чтобы при нажатии на бургер срабатывала анимация самого бургера, реализованная посредством css и появлялся список. Как это делается?

Comments

[Ankhena]

Потому что это дурацкий код, смесь решения на чистом css да еще и с кривым html и потом еще на js.

[Ankhena]

Простейшая реализация: https://jsfiddle.net/fjq934vc/
Дальше можно менять свои эффекты поведения.
Класс можно менять как у меню и кнопки, так и у их общего родителя в зависимости от макета.

[slavkapiyavka]

Ankhena, спасибо, ваш пример помог мне.

[Ankhena]

honeydrums, хорошо, главное в кучу не мешайте костылик на чекбоксах и js. Либо туда либо туда.
Для бургера и меню разумнее js.
И про семантику не забывайте. Бургер это кнопка, т.е. button,не смотря на то, что js обработает клик по любому элементу.

Answer 1

[profesor08]

Checkbox не поможет сделать меню нормальным и удобным для использования. Любой элемент на странице можно сделать фокусируемым. Тем самым можно сделать некое меню, которое будет выезжать по нажатию на кнопку и прятаться при клике вне. Использовав эти знания можно написать js скрипт в пару строк кода, которые будет творить магию. Открытие/закрытие меню по нажатию на кнопку и закрытие при клике вне меню.

Comments

[slavkapiyavka]

спасибо! ориентировался на ваш пример