Как сверстать такое адаптивное меню?

Question

[Ilya Loopashko]

Подскажите, как сверстать такое меню. Нужно на чистом CSS.

Answer 1

[Sergey]

Вот как на html + css с использованием checkbox можно сделать плавно выезжающее меню

Answer 2

[nokimaro]

Сниппеты под bootstrap для черпания вдохновения
https://bootsnipp.com/snippets/Oqvd
https://codepen.io/kawabanga/pen/xxxZEPb

JS всё-равно понадобится в минимальном объёме, чтоб меню сворачивать-разворачивать.

Comments

[WapSter]

Не обязательно. Если прям на чистом css в случае если просят как тестовое задание, можно обойтись чекбоксом и лейблом.

[poniyur]

WapSter, classic

Answer 3

[Ilya Loopashko]

У меня вот получилось,
https://codepen.io/art_code/pen/eYNVJLB
только как вот приклеить label к выезжающему меню?

Comments

[Александр Епихин]

Либо поместите внутри этого меню, либо также двигайте его с помощью translate