X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Помогите найти решение для верстки "хитрого" элемента
by_roXe
by_roXe
Topic Starter сообщение 5.2.2016, 20:30; Ответить: by_roXe
Сообщение #1


Добрый день, ситуация на скриншоте. Нужно чтобы при наведении на пункт меню, слева была не оранжевая полоска (фон), а прозрачность, которая бы действовала и на нижний слой (красный) всего блока с меню. Т.е. чтобы был виден фон сайта.
Возможно существует какое-либо решение для таких вещей..




Сообщение отредактировал by_roXe - 5.2.2016, 20:31
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mmkulikov
mmkulikov
сообщение 5.2.2016, 20:36; Ответить: mmkulikov
Сообщение #2


Оставьте фон не у контейнера меню, а только у пунктов и при наведении делайте margin для пункта. У всего меню overflow: hidden;
Где-то так, в двух словах...


--------------------
Сдается, обращаться скайп avdesk-it-kmm
VPS от 5€
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
by_roXe
by_roXe
Topic Starter сообщение 5.2.2016, 20:43; Ответить: by_roXe
Сообщение #3


mmkulikov, Спасибо, уже подумал об этом, но возможно есть более простой вариант, т.к. уже все сверстано, а там таких менюшек много по всему сайту с разных сторон, а также снизу, навскидку - много переверстывать придется.. разве что других вариантов нет
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mmkulikov
mmkulikov
сообщение 5.2.2016, 20:46; Ответить: mmkulikov
Сообщение #4


Цитата(by_roXe @ 5.2.2016, 18:43) *
разве что других вариантов нет

Чудес не бывает. :)
Можно контейнер тоже сделать прозрачным при наведении - но это уже изв...
"Достучаться" до фона только в порядке следования в DOM
так что если у контейнера есть фон - он и будет виден...


--------------------
Сдается, обращаться скайп avdesk-it-kmm
VPS от 5€


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
falken
falken
сообщение 5.2.2016, 21:19; Ответить: falken
Сообщение #5


by_roXe, структуру менюшки можете выложить на обозрение (лучше на jsfiddle)?
есть одна мысль


--------------------
🗹 Быстрый и надежный хостинг от 135 рублей
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
by_roXe
by_roXe
Topic Starter сообщение 5.2.2016, 21:37; Ответить: by_roXe
Сообщение #6


falken, так https://jsfiddle.net/wr08ecn0/ ?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
falken
falken
сообщение 5.2.2016, 23:34; Ответить: falken
Сообщение #7


Цитата(by_roXe @ 5.2.2016, 19:43) *
уже подумал об этом, но возможно есть более простой вариант,

1. Список и остальные элементы не должны лежать в одной плоскости (как это предложили уже выше).
2. Смещаем список на несколько пикселей вправо так, чтобы осталось слева пустое пространство.
3. Пустое пространство по бокам заливаем псевдо-элементами :after (либо другим способом) соответствующих размеров так, чтобы они создавали одну общую вертикальную линию.
4. При наведении убираем псевдо-элемент у соответствующего пункта меню.

Плюсы:
Избавляет от дерганий, т.е. элементы не пляшут относительно друг друга, как в случае с margin.
На мой взгляд решение более чем простое.

Минусы:
Может показаться сложным в исполнении.

Как результат: https://jsfiddle.net/xgLctcg9/2/
Причина редактирования: upd: слегка украсил, для наглядности


--------------------
🗹 Быстрый и надежный хостинг от 135 рублей


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
by_roXe
by_roXe
Topic Starter сообщение 5.2.2016, 23:37; Ответить: by_roXe
Сообщение #8


Придется все-таки переверстывать, всем спасибо за советы
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
falken
falken
сообщение 5.2.2016, 23:50; Ответить: falken
Сообщение #9


Цитата(by_roXe @ 5.2.2016, 22:37) *
переверстывать

совсем немного


--------------------
🗹 Быстрый и надежный хостинг от 135 рублей
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
buyanov
buyanov
сообщение 6.2.2016, 1:32; Ответить: buyanov
Сообщение #10


От себя добавлю 5 копеек =)

https://jsfiddle.net/u4x87gqt/1/
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Хостинг "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


 



RSS Текстовая версия Сейчас: 19.4.2024, 17:08
Дизайн