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



 

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

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


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

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


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




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


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

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


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


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


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

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


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


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

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


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

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


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


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


online
*******

Группа: Ex-Moderator
Сообщений: 3742
Регистрация: 23.3.2011
Поблагодарили: 3986 раз
Репутация:   361  


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


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

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


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


online
*******

Группа: Ex-Moderator
Сообщений: 3742
Регистрация: 23.3.2011
Поблагодарили: 3986 раз
Репутация:   361  


Цитата(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
Сообщений: 511
Регистрация: 1.6.2012
Поблагодарили: 100 раз
Репутация:   18  


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


online
*******

Группа: Ex-Moderator
Сообщений: 3742
Регистрация: 23.3.2011
Поблагодарили: 3986 раз
Репутация:   361  


Цитата(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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) как правильно написать альт и тайтл для изображений
0 galaker 29 Сегодня, 22:50
автор: galaker
Открытая тема (нет новых ответов) Распределение бюджета для групп объявлений КМС
0 vincento 274 Сегодня, 16:59
автор: vincento
Открытая тема (нет новых ответов) Стоит ли подавать платную заявку в Яндекс Каталог для регионального издания?
12 DVORYAN 1736 Сегодня, 16:41
автор: vds4you
Горячая тема (нет новых ответов) ТОП База - отборная профессиональная база с обновлениями для качественной регистрации
Есть все существующие Виды сайтов, все Тематики, все Регионы
150 AnnaYa 64197 Сегодня, 13:36
автор: AnnaYa
Открытая тема (нет новых ответов) Сервис для массовой проверки числа обратных ссылок (backlinks)?
0 Telnor 307 Сегодня, 11:39
автор: Telnor


 



RSS Текстовая версия Сейчас: 13.12.2017, 22:55
Дизайн