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



 

Здравствуйте, гость ( Вход | Регистрация )

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


Завсегдатай
*****

Группа: Active User
Сообщений: 519
Регистрация: 1.6.2012
Поблагодарили: 102 раза
Репутация:   18  


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




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


Старожил
******

Группа: Active User
Сообщений: 2138
Регистрация: 21.9.2012
Из: СССР
Поблагодарили: 613 раз
Репутация:   71  


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


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


Завсегдатай
*****

Группа: Active User
Сообщений: 519
Регистрация: 1.6.2012
Поблагодарили: 102 раза
Репутация:   18  


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


Старожил
******

Группа: Active User
Сообщений: 2138
Регистрация: 21.9.2012
Из: СССР
Поблагодарили: 613 раз
Репутация:   71  


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

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


--------------------


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


online
*******

Группа: Super Moderator
Сообщений: 3818
Регистрация: 23.3.2011
Поблагодарили: 4172 раза
Репутация:   371  


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


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


Завсегдатай
*****

Группа: Active User
Сообщений: 519
Регистрация: 1.6.2012
Поблагодарили: 102 раза
Репутация:   18  


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


online
*******

Группа: Super Moderator
Сообщений: 3818
Регистрация: 23.3.2011
Поблагодарили: 4172 раза
Репутация:   371  


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

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

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

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

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


--------------------
здесь может быть ваша ссылка


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


Завсегдатай
*****

Группа: Active User
Сообщений: 519
Регистрация: 1.6.2012
Поблагодарили: 102 раза
Репутация:   18  


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


online
*******

Группа: Super Moderator
Сообщений: 3818
Регистрация: 23.3.2011
Поблагодарили: 4172 раза
Репутация:   371  


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

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


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


Новичок
*

Группа: User
Сообщений: 17
Регистрация: 25.7.2012
Из: Челябинск
Поблагодарили: 4 раза
Репутация:   1  


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

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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Где можно купить подписчиков для Viber-канала?
0 GlazunOFF 350 Вчера, 15:56
автор: GlazunOFF
Открытая тема (нет новых ответов) Алгоритм "Немезида" в ВК. МДК все?
4 MissContent 826 Вчера, 6:34
автор: EconDude
Открытая тема (нет новых ответов) Сборка WP для сайтов знакомств, объявлений, каталогов и т.д.
6 Seodjo 4189 25.5.2018, 16:04
автор: Seodjo
Горячая тема (нет новых ответов) Программа для instagram Socialkit
182 socialkit 64325 25.5.2018, 13:09
автор: socialkit
Открытая тема (нет новых ответов) Верстаю для портфолио
5 paradoks0 718 24.5.2018, 19:34
автор: paradoks0


 



RSS Текстовая версия Сейчас: 27.5.2018, 10:05
Дизайн