Как можно скрыть/показать боковую панель сайта при уменьшении/увеличении размера экрана?

Question

[Bowen]

Здравствуйте!

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

Так как я исчерпал запас идей и стальных нервов, прошу помощи в реализации данной задумки.
Буду очень признателен за помощь!

Answer 1

[seriogja]

Здравствуйте!

А чем ваша задача отличается от тех реализаций, которые вы привели в качестве примера?

Comments

[Bowen]

Первый пример сделал я. Он не работает так как мне нужно. Как пример привел его чтобы было видно как должна скрываться боковая панель. Но после того как она идет влево(уменьшаю ширину до 0) то после контента остается пустое место. (Не знаю как по другому объяснить.)

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

Как я уже сказал, я много всего испробовал, с таблицами, flex, и даже float. Попробовал и из второго примера сделать, но не получилось.

[Donald Dak]

Bowen: Пустое место остается когда при уменьшенном размере экрана скрыть боковую панель?

[Bowen]

Сайдбар - желтый
Контент - синий
И за превосходства(по высоте) боковой панели над контентом. После контента остается пустое место (красным отображено).
Нужно скрыть боковую панель таким образом чтобы она больше не влияло на высоту основного блока.

[Bowen]

И когда пользователь вызовет ее нажатием на кнопки, чтобы все становилось на свои места как и при большом размере окна браузера. Тут уже контент должен уйти вправо.
Посмотрите второй пример который я указал в вопросе, эффект (reveal)

Answer 2

[Donald Dak]

У вас не менялась высота контента потому что в css было так

.ss__content, // ЭТО УБЕРИТЕ
.ss__aside {
	display: table-cell;
	vertical-align: top;
	transition: all 0.5s ease;
}

а сюда добавьте

.ss:not(.active) .ss__aside {
    width: 0;
    position: absolute; // ВОТ ЭТО
    padding: 0; // ВОТ ЭТО
	}

Comments

[Bowen]

Анимация исчезает тогда.

[Donald Dak]

Bowen: вот тот же пример codepen.io/anon/pen/GoEvBz

[Bowen]

Таблицы использовать для такой задачи просто напросто не получится.
Так как в примере уменьшается ширина блока, на сайте уже блоки сайдабара будут с текстом конечно, и тогда смотрится не красиво.
Применить другие махинации для скрытия сайдабара тоже не вариант т.к анимация опять же режет глаз.
Пробовал сегодня и увы, не получилось.
Протестировав сегодня, смог немного приблизится к решению, но появилась проблема с изображениями в контенте у которых ширина 100% а высота auto. На сайте, некоторые блоки идущие после изображений в контенте, смещаются вниз при вызова сайдбара. Смотрится это ужасно.
Вот так: codepen.io/anon/pen/wMeOzr?editors=110 страница примерно будет выглядеть на сайте.