makc9I
@makc9I
фрилансер, web разработчик

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

Всем привет. Передо мной встала интересная задача. Обычно, когда делают выезжающие элементы, их позиционируют абсолютно, или фиксировано, навешивают им z-index побольше, и в момент их отображения, они просто наезжают поверх контента.

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

6002d441e3302217561656.png

Я чего-то впал в легкий ступор от подобной задачи. Возможно ли это реализовать такую структуру на css и html, используя js только для добавления/снятие класса с левого блока по клику на пункт меню.

У меня только идея, когда надо менять классы обоих отображаемых блоков в момент клика и писать стили несколько раз. Условно, контент меняет ширину со 100% до 50% при разных классах (меню скрыто, показано). Но хотелось бы сделать более элегантно, если это возможно.
  • Вопрос задан
  • 980 просмотров
Пригласить эксперта
Ответы на вопрос 1
solidcreature
@solidcreature
Развиваю сообщество WordPress в Москве
Если у блоков один родитель, то задача отлично решается flexbox'ом.
Пример подобной реализации https://codepen.io/solidcreature/pen/mdEZbNr
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы