Как div с изображением оставить по центру при движении sidebar?

Question

[brainexplosion]

Как изображение оставить по центру при движении sidebar?

Answer 1

[0xD34F]

Смещайте сайдбар, а не main (ну и кнопку открытия-закрытия тоже - поскольку она вне сайдбара).

Изменяем назначение классов:

- <main className={active ? 'move-to-left' : ''}>
+ <main>

- <div className="sidebar">
+ <div className={'sidebar ' + (active ? 'move-to-left' : '')}>

- <NavRight onClick={this.toggleActive} buttonClass={!active ? 'active' : ''} navClass="hidden-xs" />
+ <NavRight onClick={this.toggleActive} buttonClass={active ? 'active move-to-left' : ''} navClass="hidden-xs" />

И стили:

+ body {
+   overflow: hidden;
+ }

.sidebar {
  ...
- z-index: 1;
- right: 0;
+ z-index: 3;
+ right: -400px;
+ transition: all .7s ease;

UPD. Вынесено из комментариев:

Имелось в виду, что контент тоже двигается при смещении sidebar, но не убегает полностью в левый угол, а остается по центрy оставшейся ширины

Вместо того, чтобы делать transform, меняйте ширину. Как-то так.

Comments

[brainexplosion]

Добрый день! Имелось в виду, что контент тоже двигается при смещении sidebar, но не убегает полностью в левый угол, а остается по центрy оставшейся ширины)) Как это можно провернуть? )

[0xD34F]

Дополнил ответ.

[brainexplosion]

Спасибо) Уже не в первый раз меня выручаете)

Answer 2

[Дима Долготер]

при клике на меню. чтоб добавлялся галерее класс с анимацией в которой описывалось margin-right: -120px;
в течении всего времени анимации. и получится эффект будто она не движется.

ниже вариант получше, но иногда хотят чтоб было с движущимся контентом

Comments

[brainexplosion]

Спасибо большое)