Помощник
|
Помогите найти решение для верстки "хитрого" элемента |
by_roXe
|
Сообщение
#1
|
||
|
|
||
|
|||
mmkulikov |
5.2.2016, 20:36;
Ответить: mmkulikov
Сообщение
#2
|
|
Оставьте фон не у контейнера меню, а только у пунктов и при наведении делайте margin для пункта. У всего меню overflow: hidden;
Где-то так, в двух словах... -------------------- VPS от 5€ |
|
|
by_roXe
|
Сообщение
#3
|
|
mmkulikov, Спасибо, уже подумал об этом, но возможно есть более простой вариант, т.к. уже все сверстано, а там таких менюшек много по всему сайту с разных сторон, а также снизу, навскидку - много переверстывать придется.. разве что других вариантов нет
|
|
|
mmkulikov |
5.2.2016, 20:46;
Ответить: mmkulikov
Сообщение
#4
|
|
разве что других вариантов нет Чудес не бывает. Можно контейнер тоже сделать прозрачным при наведении - но это уже изв... "Достучаться" до фона только в порядке следования в DOM так что если у контейнера есть фон - он и будет виден... -------------------- VPS от 5€ |
|
|
falken |
5.2.2016, 21:19;
Ответить: falken
Сообщение
#5
|
|
by_roXe, структуру менюшки можете выложить на обозрение (лучше на jsfiddle)?
есть одна мысль -------------------- |
|
|
by_roXe
|
Сообщение
#6
|
|
falken, так https://jsfiddle.net/wr08ecn0/ ?
|
|
|
falken |
5.2.2016, 23:34;
Ответить: falken
Сообщение
#7
|
|
уже подумал об этом, но возможно есть более простой вариант, 1. Список и остальные элементы не должны лежать в одной плоскости (как это предложили уже выше). 2. Смещаем список на несколько пикселей вправо так, чтобы осталось слева пустое пространство. 3. Пустое пространство по бокам заливаем псевдо-элементами :after (либо другим способом) соответствующих размеров так, чтобы они создавали одну общую вертикальную линию. 4. При наведении убираем псевдо-элемент у соответствующего пункта меню. Плюсы: Избавляет от дерганий, т.е. элементы не пляшут относительно друг друга, как в случае с margin. На мой взгляд решение более чем простое. Минусы: Может показаться сложным в исполнении. Как результат: https://jsfiddle.net/xgLctcg9/2/
Причина редактирования: upd: слегка украсил, для наглядности
-------------------- |
|
|
by_roXe
|
Сообщение
#8
|
|
Придется все-таки переверстывать, всем спасибо за советы
|
|
|
falken |
5.2.2016, 23:50;
Ответить: falken
Сообщение
#9
|
|
-------------------- |
|
|
buyanov |
6.2.2016, 1:32;
Ответить: buyanov
Сообщение
#10
|
|
|
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Хостинг "Hostland" - качественный хостинг по разумным ценам и со своей Панелью Управления | 0 | artmeteor | 341 | Вчера, 22:46 автор: artmeteor |
|
⭐⭐⭐ Google Voice | Gmail - OLD аккаунты "SMS и звонки" ⭐⭐⭐ | 15 | Chekon | 4444 | Вчера, 12:00 автор: Chekon |
|
✅ sms.chekons.com - ⭐ Сервис для получения SMS на реальные номера USA "Non-VoIP, безлим SMS, API" ⭐ Сервис для получения SMS на реальные номера USA |
13 | Chekon | 4078 | Вчера, 11:48 автор: Chekon |
|
Rebex.io – Ваша инновационная платформа для обмена криптовалюты! | 1 | Rebex | 678 | 17.4.2024, 11:50 автор: Rebex |
|
Требуется помощь по сайту на "ВордПресс" Закрылся доступ в панель администратора |
15 | Tia2 | 2346 | 17.4.2024, 0:54 автор: diviner99 |
Текстовая версия | Сейчас: 19.4.2024, 17:08 |