Как сделать, чтобы выезжающий поиск сдвигал меню и логотип?

Question

[Alexander Mischuk]

В общем, есть стандратное меню и справа блок с поиском, который по нажатию становится шире.
Нужно, чтобы при открытии он сдвигал влево весь контент.

Есть масса примеров, вроде мобильных меню, которые по клику сдвигают body или html элементы на странице за пределы экрана. Необходимо такой эффект сделать только для одного блока в шапке.

Подключать массивные библиотеки смысла нет.
В какую сторону смотреть, чтобы сделать это?
Набросал черновой вариант того, что примерно есть jsfiddle.net/AkeXL

Comments

[Alexander Mischuk]

Единственное к чему я склоняюсь это overflow: hidden для родителя и сдвигать меню и лого по клику на поиск и возвращать обратно при потере фокуса.
Могут быть какие-либо проблемы из-за этого?

[hadra]

@Mischuk Ответил

Answer 1

[hadra]

Ты псих.
Но почитай про позиционирование.
К примеру если не нажата кнопка, то left:0;
Если активна , то left:100px;
блок который смещается position:fixed. У родителя position:relative;
А если хочешь что бы весь контент смешался, то надо сделать с ним тоже самое.
Если ты сасс знаешь, то ты понял о чем я.

А если не хочешь думать, то вот тебе зло. Там не много надо изменить и убрать весь js. Он там не нужен.

Comments

[hadra]

Все left на right поменяй. Этого я уже не буду делать:DD
Жду спасибку и отметь как решение. Если я правильно понял тебя.

[Юрий Лобанов]

@hadra друг, хватит выпрашивать спасибки за такие ответы.

[hadra]

@iiil Я знаю что готовое решение зло, но почему бы и нет.
Зачем придумывать велосипед, если он уже придуман? Тут тоже самое, а все ост. пускай сам уже.