Как реализовать самое простое бургер меню?

Question

[Кристина]

Как реализовать самое простое бургер меню?
Чтобы на мобильном меню открывалось вертикально на высоту 100vh.

Answer 1

[ValeraValera]

jquery toggle

Answer 2

[arsenty]

Реализация на HTML и CSS: https://codepen.io/liptonicetea/pen/ggxREm
Статья автора: https://habrahabr.ru/post/320668/

Comments

[Molder84]

по первой ссылке классное меню, но оно открывается не только по клику на гамбургер но по клику в любой точке сайта, как этого избежать ?

[arsenty]

Molder84, да, там кажется, недоработка автора.
Следующую часть:

.nav__back {
    position: fixed;
    top: 0;
    right: 0;  
    bottom: 0;
    left: 0;
    transition: background-color .3s;
}

нужно поменять на это:

.nav__back {
  display: none;
}
.nav__check:checked ~ .nav__back  {
    display: block;
    position: fixed;
    top: 0;
    right: 0;  
    bottom: 0;
    left: 0;
    transition: background-color .3s;
}

Здесь дополнительный элемент (label.nav__back) который должен отвечать только за скрытие меню (кликом в любой точке за его пределами) активируется только после открытия меню (.nav__check:checked).