Как реализовать не типичную вёрстку?
Здраствуйте! Столкнулся с проблемой при попытке вёрстки. У меня есть родительский элемент в котором есть несколько item-ов. Вот их начальное расположение.
Мне нужно в зависимости от того на какой из item-ов нажали изменять их положение как на картинке.
Если произошёл клик на кнопку закрыть то вернуть Item-ы в исходное состояние
При этом в не зависимости от того справа Item или слева его активную форму нужно отображать слева как на картинке. Не понимаю как такое реализовать.
HTML
<div class="container"> <ul class="group-block"> <li class="group-block__item --active"> <button class="group-block__btn">ЗАКРЫТЬ</button> ITEM 1 </li> <li class="group-block__item"> <button class="group-block__btn">ЗАКРЫТЬ</button> ITEM 2 </li> <li class="group-block__item"> <button class="group-block__btn">ЗАКРЫТЬ</button> ITEM 3 </li> <li class="group-block__item"> <button class="group-block__btn">ЗАКРЫТЬ</button> ITEM 4 </li> </ul> </div> |
<div class="container"> <ul class="group-block"> <li class="group-block__item --active"> <button class="group-block__btn">ЗАКРЫТЬ</button> ITEM 1 </li> <li class="group-block__item"> <button class="group-block__btn">ЗАКРЫТЬ</button> ITEM 2 </li> <li class="group-block__item"> <button class="group-block__btn">ЗАКРЫТЬ</button> ITEM 3 </li> <li class="group-block__item"> <button class="group-block__btn">ЗАКРЫТЬ</button> ITEM 4 </li> </ul> </div>
CSS (Базовые стили)
.container { width: 100vw; height: 100vh; background-color: pink; } .group-block { display: flex; justify-content: space-between; gap: 50px; flex-flow: wrap; list-style: none; } .group-block__item { position: relative; background-color: rgba(255, 0, 0, 0.3); width: calc(50% - 25px); min-height: 300px; cursor: pointer; } .group-block__btn { position: absolute; right: 20px; top: 20px; padding: 5px; background-color: greenyellow; } .group-block__item .group-block__btn { display: none; } .group-block__item.--active .group-block__btn { display: block; } .group-block__item:hover { background-color: rgba(255, 0, 0, 0.5); } |
.container { width: 100vw; height: 100vh; background-color: pink; } .group-block { display: flex; justify-content: space-between; gap: 50px; flex-flow: wrap; list-style: none; } .group-block__item { position: relative; background-color: rgba(255, 0, 0, 0.3); width: calc(50% - 25px); min-height: 300px; cursor: pointer; } .group-block__btn { position: absolute; right: 20px; top: 20px; padding: 5px; background-color: greenyellow; } .group-block__item .group-block__btn { display: none; } .group-block__item.--active .group-block__btn { display: block; } .group-block__item:hover { background-color: rgba(255, 0, 0, 0.5); }
Дополнительно:
а элементов ровно 4 будет?
Логика основана на гридах. Добавляются классы 'slim1, slim2, slim2, которые задают элементам определенное положение в сетке в правой части А у того, что слева добавляется класс 'active' .
Пример на codepen
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для реализации не типичной вёрстки на веб-странице вам необходимо использовать различные техники и подходы. Вот несколько рекомендаций, которые могут помочь вам достичь желаемого результата:
1. Использование флексбоксов и гридов: CSS-флексбоксы и CSS-гриды предоставляют удобные способы организации элементов на странице. Вы можете создавать сложные макеты, управлять распределением элементов и их порядком, чтобы добиться нестандартного дизайна.
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
.container { display: flex; } .item { flex: 1; }
2. Использование позиционирования: Вы можете использовать абсолютное или относительное позиционирование элементов для создания сложных компоновок. Например, если вам нужно разместить элемент поверх другого элемента, вы можете применить свойство position: absolute; и задать нужные координаты.
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
.container { position: relative; } .item { position: absolute; top: 0; left: 0; }
3. Использование CSS-трансформаций: С помощью CSS-трансформаций вы можете изменять размеры, позицию и внешний вид элементов. Например, вы можете повернуть элемент на определенный угол, изменить его масштаб или сдвинуть в нужное место.
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
.item { transform: rotate(45deg); }
4. Использование медиа-запросов: Чтобы адаптировать ваш дизайн под различные устройства и разрешения экранов, вы можете использовать медиа-запросы. Это позволит вам создать адаптивный дизайн, который будет отлично выглядеть на любых устройствах.
@media screen and (max-width: 600px) { .item { width: 100%; } }
С помощью вышеперечисленных техник вы сможете реализовать нестандартную вёрстку на вашем сайте. Не бойтесь экспериментировать и пробовать различные подходы, чтобы достичь уникального и креативного дизайна.