Какими средствами делают скроллинг выпадающего меню?

Question

[Hfnas]

меню выпадает с помощью slideDown,slideUp
при скролле меню пропадает, то есть сворачивается в исходное положение. Почему, и как это исправляется обычно? То есть не могу просмотреть последние пункты меню, которые не убираются в размер экрана.
А что вы делаете с меню, которое выпадает и выходит за пределы футера?
Буду признательна рекомендациям!

Answer 1

[strelok011]

Задайте максимальную высоту блоку меню и оверфлоу
.menu {
max-height: 80vw;
overflow: auto;
}

Максимальная высота не даст блоку развернуться больше высоты экрана, overflow: auto добавит скролл если контент больше чем доступная высота.
80vw - 80% от высоты окна браузера. Не путать с 80% от родительского контейнера.

Это грубые прикидки. Детально можно сказать зная что за макет, где используется, может меню появляется от элемента ниже по контенту и проч.

Comments

[Hfnas]

может меню появляется от элемента ниже по контенту- вот этой случай. Поняла, надо использовать overflow, сколл прикрутить, и с помощью jquery решать, вычислив предварительно размеры экрана , и отступ родительского элемента от верхнего края экрана+ высоту род. элемента.

можно вопросик? а делают ли скролл у всплывахи-меню, если у последнего тоже всплывают подменюшки с помощью "slideDown,slideUp". Я с таким меню не сталкивалась, может вы знаете?

что-то ступила...

[strelok011]

Сделать можно, но это большая нагрузка на расчеты.

Пример: есть у вас меню 1 уровня со скроллом.
Если есть скролл - значит элементы внутри блока наружу уже не смогут выскочить (используя position relative родителя), их будет обрезать контейнер. Соответственно новых потомков придется лепить за пределами меню, используя расчеты положения родительского пункта меню относительно краев окна браузера, позиционировать абсолютно + дополнительно реагировать на скроллы, на потерю фокуса родительским пунктом меню и прочие нюансы (кроссбраузерность, проверка перехвата событий и т.д. и т.п.). Опять же - раскрытие меню по клику или по ховеру?

Всё это вырастает в непозволительно сложный алгоритм, который говорит, что хорошо бы изменить UX в навигации. Либо искать готовую реализацию в виде давно оттестированного плагина (не могу припомнить, извините).

[Hfnas]

Опять же - раскрытие меню по клику или по ховеру?

сделала раскрытие меню по ховеру для десктопа, а для остальных разрешении по клику.

Да, поняла Вашу мысль, расчет придется делать не только для скролла меню первого уровня , но и для меню второго уровня, если второй уровень раскрывается по клику. Клик же нельзя убрать, так как на мобиле раскрытие меню по ховеру не делают, как я думаю.

То есть лучше просто статичное меню во весь экран?

"Всё это вырастает в непозволительно сложный алгоритм, который говорит, что хорошо бы изменить UX в навигации."-то есть поясните на пальцах, логику поменять? То есть, вы считаете , что такое меню будет неудобно для клиента? Я впервые сталкиваюсь с таким меню, и поэтому не имею представления.

Подскажите, пож-ста, ресурсы, если Вам известны, где есть примеры больших меню...и где научиться UI/UX ... Спасибо.

[strelok011]

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

Десктопный вариант - можно посмотреть реализацию сложных сайтов типа сетевых магазинов (dns, ulmart, citilink etc). Там проводилась большая работа по юзабилити.

UI/UX дело сложное и дорогое обычно. Для самообразования - смотреть курсы, читать руководства к применению готовых концепций типа material ui гугла и аналогичных.

Стоит опираться на решения крупных компаний, они в это денег вбухали много :)