Как сделать подобную анимацию меню?

Question

[Дмитрий]

На этом сайте есть довольно интересное боковое меню. Кто может подсказать, как его сотворить?

Я думал, что-то типо обрамить весь контент в тэг main (или просто контейнер) и по клику на гамбургер делать translateX(-50%). Только я не знаю как скрывать в этом контейнере все элементы, что бы оставался только фон.

Подскажите :)

Answer 1

[Андрей Федоров]

opacity: 0 или visibility: hidden к дочерним элементам скроет их, но размеры будут учитываться в DOM.

Comments

[Дмитрий]

Т.е. это нормально просто скрывать все дочерние элементы, даже если их может быть довольно много? Иного способа нету?

[Андрей Федоров]

Дмитрий: А зачем все-то? Оберните еще одним div'ом все что нужно скрыть и скройте его.

[Дмитрий]

Андрей Федоров: хм, спасибо, попробую.

Answer 2

[Андрей Minisol]

1) у меню стили такие z-index:0;opacity:0;
2) в случае, когда меню открыли ставят у него z-index: 10,opacity : 1 и двигают контент вправо на 66%

примитивно так: https://jsfiddle.net/Ly1a93xs/