Как настроить боковое меню на js и css? и нейтрализовать действие translate на position: fixed?

Question

[tripcollor]

Суть в том чтобы сделать интерактивное боковое меню.
По нажатию на гамбургер сайдбар должен выдвигаться слева ( или справа ) и сомое главное отодвигать весь остальной контент и кнопка должна быть элементом этого контента (у меня wrap) и двигаться вместе с ним в тоже время сама кнопка и сайдбар должны быть фиксированы.
Вот набросок https://jsfiddle.net/015y6aq5/5/
Дело в том что когда меню вызывается в конце страницы то кнопка выбрасывается на самый верх в начало документа, как это исправить?

PS расположение элементов в доме должно оставаться таким же как у меня на примере
(гдето прочитал что свойство translate так влияет на это как обойти или нейтролизовать)

Answer 1

[tripcollor]

Отвечаю сам себе, может комуто пригодится
https://jsfiddle.net/015y6aq5/7/

Comments

[Emptyform]

ну, дык, говорил жеж что кнопку отдельно надо вытащить ))

[tripcollor]

Emptyform: Ну да без этого никак не получалось)
Но самое основное было, чтобы кнопка типа была частью основного контента когда происходит анимация выдвижения и в тоже время оставалась фиксирована.
Т.е фиксация относительно родителя если так можно выразится

[Emptyform]

tripcollor: кстати, здорово что получилось обойтись без @keyframes . Первый раз сразу резануло глаз.
Вот вариант: https://jsfiddle.net/015y6aq5/8/ с фиксацией относительно родителя

[tripcollor]

Emptyform:
Первый раз просто написал с ходу больно не замарачиваясь на анимации, потому что суть вопроса была именно на выпадении кнопки.
Да, но тут опять же если вызывать сайдбар, промотав немного страницу, то кнопка вылетает на самый верх из за того, что у родителя свойство translate. (решения для этого походу нету)
Так, что без выноса кнопки не получится, конечно приходится ее анимировать отдельно, но куда деваться

Answer 2

[Alex Bond]

Что-то типа такого - https://jsfiddle.net/Alex_Bond/30vv6dos/1/ ?

Comments

[tripcollor]

Ну так у вас менюшка все равно улетает наверх, она должна плавать фиксированно с окном промотки

[Alex Bond]

tripcollor: видимо не очень понял задачу. Проблема именно в кнопке или в том что сайдбар не сролится?

[tripcollor]

Alex Bond: Да именно в этом. Когда на середине страницы нажимаешь на кнопку она вылетает на верх, а она должна быть фиксирована вместе с сайдбаром

[Alex Bond]

tripcollor: https://jsfiddle.net/Alex_Bond/30vv6dos/2/ так?

[Emptyform]

Alex Bond: думаю, кнопку вообще нужно из дива выше вытащить. Что она в #wrap или в #menu потеряла?

[Alex Bond]

Emptyform: в принципе она относится к сайдбару, потому я ее туда и отправил)

[tripcollor]

Alex Bond: Да =) но расположение элементов в доме должно быть как у меня в примере, потому что кнопка на реальном сайте планируется не прижиматься к краю окна а быть в меню которое центрируется и находится в контейнере с параметрами (width: 1170px; margin: 0 auto), надо достичь того чтобы она была независима от самого сайдбара и в тоже время фиксирована

[Emptyform]

Alex Bond: относится ли.. я бы отдельно положил, чтобы компонент сайдбара не замусоривать

[Emptyform]

tripcollor: вынеси кнопку вообще отдельно

Answer 3

[Emptyform]

Вот так чтоле: https://jsfiddle.net/015y6aq5/2/

Comments

[tripcollor]

да, так но кнопку в меню желательно оставить в контейнере wrap. на реальном сайте я ее хочу сделать частью фиксированного и центрированного меню

[Emptyform]

tripcollor: ну, вот так: https://jsfiddle.net/015y6aq5/3/

[tripcollor]

Emptyform: В принципе да сразу не допер=), можно же вынести всю менюшку расцентровать и фиксировать а там уже внутри расположить кнопку, спасибо!

[tripcollor]

Emptyform: хотя нет, она же не будет вместе с контентом отодвигаться влево, а будет оставаться фиксировано, если только для нее отдельно писать анимацию