2013-03-30 4 views
2

У меня сложная проблема. Я хочу создать меню. В то же время видны только 3 элемента, а еще 2 - прозрачные градиенты. Если я перемещаю курсор в прозрачном элементе, список будет прокручиваться вверх или вниз. Меню меню имеет суб-уровни, которые имеют тот же формат, что и основной уровень.Меню прозрачного градиента

Вот пример: enter image description here

Когда это прекратится, это нормально. Первый и последний отображаемые элементы CSS устанавливают линейный градиент. Когда он перемещается, я использую jquery для анимации перемещения. Но результат не совсем я хочу. Когда он прокручивается, похоже, что весь список движется, а не прокрутка. Я хочу использовать jQuery только анимацию перемещения, а прозрачный градиент задает весь список, а не элемент списка.

Думаю, я должен использовать маску для списка, но фон также прозрачен. У меня кончаются идеи.

+2

Попробуйте предоставить JsFiddle. – Smuuf

+0

Ну, вот URL страницы, которую я извлек из изображения: http://users.atw.hu/saohun/index2.php –

+0

Да, это моя страница. Он работает, когда он остается, но когда он прокручивается, он выглядит ужасно. – Peter

ответ

1

Я решаю его. Я использую «overflow: hidden» и svg mask. Sub-level - это другой список ul, который не включает в себя первый уровень, а jquery - для отображения.

+0

Спасибо, что поделились решением и ссылкой на сайт. Хотя я должен сказать, что это не самое удобное решение для меню. Задержки раздражают и не видят, что все элементы одновременно неудобны. –

Смежные вопросы