Как реализовать такое меню?

Question

[Артур Левенсон]

подскажите пожалуйста, как реализовать меню таким образом:


пробую position: absolute, но что-то не выходит

пример кода https://codepen.io/kiskiskit/pen/YzVoQKm

Comments

[Вадим]

Посмотрев код вопросов стало только больше)
posiiton: absolute можно, но если ближайший relative будет на всю ширину страницы. Но лучше fixed, так как не будете зависеть от скрола.
Почему у Вас меню вложено в кнопку "бургер"?
Почему кнопка "бургер" - не кнопка, а заголовок h3?
Для основных ссылок навигации стоит использовать тэг nav.

[Froggyweb]

а как телефон попадает в меню не интересно? или ты просто верстаешь разные меню для десктопа и мобилы? Это как бы не очень, причем совсем.

[Антон Литвиненко]

https://www.w3schools.com/howto/howto_js_sidenav.asp

Answer 1

[marrishka]

li{
  border: 2px solid #000;
  padding: 5px; 
  background-color: grey;
  list-style-type: none;
  }

Как-то примерно так....

Answer 2

[Ma5terLink]

Ну для начала, его нужно сверстать...
Сверстанному классу menu (например) дать position: fixed и visibility:hidden, выставить начальную позицию где-нибудь за пределами экрана. Например: left: -100%
Когда нужно, по клике на элемент менюшка будет выезжать из-за экрана (тут небольшой код на js нужен, для подстановки классов).