Как сделать выталкивающий сайдбар?

Question

[Denis J]

Господа, помогите советом малоопытному! Как можно реализовать сайдбар как на сайте www.designcouncil.org.uk ? Именно чтобы выезжая, он сжимал контентную часть. А также что использовать для построения такой структуры основных блоков страницы: флоат/флексбокс или что-то иное?
Заранее спасибо.

Answer 1

[Павло Пономаренко]

display: flex для контейнера, flex-grow: 1 для правого блока и изменяете ширину у левого. Все очень просто. Рекомендую внимательно почитать про css flex =)

html, body {
  width: 100%;
  height: 100%;
}
#container {
  display: flex;
  width: 100%;
  height: 100%;
}
#left {
  transition: width 0.3s ease-in-out;
  background: #fcc;
  width: 40px;
}
#left:hover {
  width:200px;
}
#right {
  background: #cfc;
  flex-grow: 1;
}

Answer 2

[Алексей Бурлака]

Мне, к слову, пример не приглянулся. Нет плавности, прыгает.
Лучше смещать и затемнять.
Как тут: http://www.лесобаза.рф/

Comments

[Степан Крапивин]

верхняя панель тоже дёргается из-за появления и скрытия полосы прокрутки. Вот здесь ещё лучше сделано www.tourprom.ru

[Алексей Бурлака]

Степан: https://snag.gy/FmkgSR.jpg
(на всякий случай, может это ваша работа)