Возможен ли скролинг контента внутри блока без применения свойства overflow?

Question

[I'm Yoda]

Хочу сделать горизонтальное меню в фиксированном хедере. Проблема в следующем. На первом уровне вложенности элементов много и они все не умещаются по высоте видимой области монитора. Как можно реализовать прокрутку пунктов меню на первом уровне вложенности? При использовании overflow, второй уровень вложенности не отображается при наведении на пункт меню!

Answer 1

[I'm Yoda]

Никита Полевой, помог! Спасибо!

Answer 2

[ой всё]

эта проблема решается на уровне структуры и архитектуры сайта, а не на уровне скроллинга по бесконечным спискам навигации

Answer 3

[Денис Каракчиев]

Как вариант: добавить каждому элементу первой выпадашки event по событию click на показ блока со второй релевантной менюшкой. Тогда всё ок, и первая выпадашка скроллируется и вторая появляется. У Вас ведь нет предрассудков к JS? =) Самый очевидный вариант, на мой взгляд.

P.S. А вообще, JS'ом можно жеж и на hover поставить event, правда не помню как там с этим, я всегда на клик ставлю =)

Comments

[I'm Yoda]

Проблема в том, что менюшка на втором уровне расположена внутри тега "< li>".

[Kovalsky]

Леонид, лично я в этом факте не вижу ничего ужасного и не знаю как он может мешать. Если он и правда мешает, то сделайте пример в котором было бы видно, в чём загвоздка.

А вообще в своё время у меня была такая же фишка: дизайнер не предусмотрел этот вариант, и у заказчика многоуровневое меню без конца вылезало за края дисплея, ибо он смотрел сайт с ноутбука. Т.к. дизайнер изо всех сил плевался и не хотел менять дизайн, пришлось выкручиваться, как-то так. Это конечно не то о чем речь в вопросе, но также решает проблему. Если вас такое решение устроит, то пишите, ибо для реюзабельности мне придётся несколько подпилить скрипт.

[I'm Yoda]

Никита Полевой, интересное решение! Аналогичная ситуация)

дизайнер не предусмотрел этот вариант

Попробую ваше решение!

[I'm Yoda]

Никита Полевой, достойное решение!

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

Не могли бы вы помочь не много? Последний ".sub-item" тоже имеет выпадающее меню с несколькими пунктами ".sub-sub-item". Можно ли сделать так, чтоб выпадающее меню из последнего ".sub-item" появлялось вот так:
P.S. С меня пиво!

[Kovalsky]

Леонид, при текущем алгоритме это логически невозможно. Ну или предложите вариант, как вы это себе видите, посмотрим возможно ли это реализовать.

[I'm Yoda]

Никита Полевой, привет! Подскажи плиз каким образом уменьшить скорость прокрутки в твоем скрипте. Скрипт сам по себе юзабельный, отлично подошел под задачу! Не большой минус есть при большом количестве элементов в списке. Прокрутка очень быстрая, как бы её снизить?

[Kovalsky]

Леонид, это поведение регулируется с помощью easing function. В моей версии для easing приняты некоторые условности: start_value считается равным нулю и total_time - единице, а полная форма используемой функции выглядит так:

function(current_time, start_value, change, total_time) {
	var ts=(current_time/=total_time)*current_time;
	var tc=ts*current_time;
	return start_value+change*(-1.55*tc*ts + 7.5*ts*ts + -12.3*tc + 7.3*ts + 0.05*current_time);
}

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

[I'm Yoda]

Никита Полевой, спасибо за отклик! плюс вам в карму