Фиксированное меню при наведении курсора

  • ekirkovskiy

    (@ekirkovskiy)


    4 года, 6 месяцев назад

    В списке выпадающего меню Услуги много пунктов которые не вмещаются на экран, при прокрутке прокручивается сам сайт, но нужно что бы только меню прокручивалось при наведенном курсоре.

    Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 6 ответов — с 1 по 6 (всего 6)
  • kword

    (@kw56)

    4 года, 6 месяцев назад

    Липкую шапку отключите

    Автор ekirkovskiy

    (@ekirkovskiy)

    4 года, 6 месяцев назад

    Можно поподробнее?

    Norske

    (@norske)

    4 года, 6 месяцев назад

    Добрый день,
    это решается на уровне свойств таблицы стилей (CSS). Упрощенно:

    
.navbar {
    /* Разрешаем вертикальную прокрутку меню */
    overflow-y: auto;
    /* Указываем максимальную высоту меню, при превышении которой возникнет полоса прокрутки (в данном случае для примера 50vh, то есть половина от высоты экрана) */
    max-height: 50vh;
}

    Это основа. Её придётся адаптировать и протестировать с учётом прочих стилей вашего сайта (для разных браузеров и разрешений экранов).

    Update: cказанное касается мобильной версии.

    • Ответ изменён 4 года, 6 месяцев назад пользователем Norske.
    Eugene

    (@eugsan)

    4 года, 6 месяцев назад

    Задать максимальную высоту и overflow-y: auto; у выпадающих меню:
    http://images.vfl.ru/ii/1581844254/1b31e4db/29592707.png
    Высоту или тупо в пикселях, или как писали в зависимости от высоты экрана.

    Останется только стилизовать полосу прокрутки. Например, с помощью https://grsmto.github.io/simplebar/

    Автор ekirkovskiy

    (@ekirkovskiy)

    4 года, 6 месяцев назад

    С мобильной версией все адаптируется нормально, проблема проявляется только на десктопах

    Norske

    (@norske)

    4 года, 6 месяцев назад

    С мобильной версией все адаптируется нормально, проблема проявляется только на десктопах

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

Просмотр 6 ответов — с 1 по 6 (всего 6)
  • Тема «Фиксированное меню при наведении курсора» закрыта для новых ответов.