#html #css #html-lists
#HTML #css #html-списки
Вопрос:
У меня следующая ситуация / меню:http://inturnets.com/test
Это структура меню, сгенерированная WordPress.
Пожалуйста, наведите курсор мыши на «Меню # 1». При наведении курсора мыши мне нужно, чтобы меню № 1, Меню № 1-1 и меню № 1-2 выглядели следующим образомhttp://inturnets.com/test/images/whatineed.jpg
На нем есть фоновое изображение с эффектом градиента. Он должен начинаться с верхней части меню при наведении курсора мыши, с верхней части меню № 1 и заканчиваться на LI подменю UL. Когда изображение bg заканчивается (без повтора), цвет должен сохраняться с последнего пикселя его нижней части. В нашем примере для лучшего визуального восприятия давайте возьмем #ff0000 🙂
У кого-нибудь есть какие-либо подсказки, как это решить?
На данный момент я попробовал следующий css-код:
#menu-top-navigation ul:hover { background: url(images/bg-menutest.jpg) repeat-x center top; }
Но, как вы можете видеть, при наведении на него закрываются только LI. Я имею в виду подменю UL. Я думаю, что здесь нам нужно правило наведения для наведенного элемента LI, несколько закругленных углов с радиусом и другое правило наведения для подменю UL с радиусом угла, чтобы оно выглядело непрерывным сверху вниз, как это выглядит на связанном изображении.
Ответ №1:
попробуйте указать цвет фона с помощью селектора, подобного этому:
#menu-top-navigation > li:hover
Таким образом, вы должны иметь возможность указать один градиент для всего содержимого LI (в вашем случае UL и LI). Настоятельно рекомендую использовать градиенты CSS3.
Если это не поможет, возможно, вам потребуется указать на градиент для
#menu-top-navigation > li:hover {gradient color of XXX to YYY}
и один для
#menu-top-navigation > li:hover > ul {gradient color of YYY to ZZZ}
Примечание: спецификация градиента — это всего лишь пример, это не фактический синтаксис. Просто хотел упростить понимание.
Дайте мне знать, если у вас возникнут какие-либо вопросы.
Комментарии:
1. ВАУ, чувак!!! Я обновил два идентификатора, и теперь у меня есть линейный градиентный фон, созданный с помощью CSS. Большое вам спасибо. Я добавлю радиусные углы, и это будет сделано. Хорошего дня! 🙂
2. Единственная проблема остается при наведении родительского LI 🙂 Я добавил также нижний угол для ситуации, когда у них нет дочерних LI, подменю. Но когда у них есть подменю, нижние углы родительского LI должны исчезать при наведении курсора мыши… inturnets.com/test/css.css
3. Есть один дешевый трюк, чтобы исправить это — или, по крайней мере, сделать его похожим на ваш макет. Для UL внутри LI, установленного
margin-topс отрицательным значением, равным радиусу вашей границы (например, -5px) — меню будет отображаться выше и, следовательно, оно может перекрывать нижнюю часть вашего родительского LI. Это не самый аккуратный трюк, и он сделает ваш CSS недействительным. Возможно, вам придется поиграть с другими измерениями для LI, чтобы все выглядело нормально. Гораздо более чистым решением было бы присвоить класс всем LI с UL внутри, чтобы вы могли различать элементы с подменю и без него. Настроить таргетинг на это с помощью CSS было бы проще простого.4. Да, вторая идея звучит лучше. Я попытаюсь написать фильтр в functions.php чтобы сгенерировать класс для UL внутри LI 🙂 Спасибо.
5. Я решил с помощью jQuery. Там, где у LI есть UL, у LI будет дополнительный класс с именем .parent. $(«li:имеет(ul)»).addClass(«родительский»)