Как показать выпадающее меню navbar вне контейнера? - PullRequest
Новая
       13

Как показать выпадающее меню navbar вне контейнера?

0 голосов
/ 15 октября 2018

Так что до этой проблемы я пытался заставить прокручиваться навигационную панель на маленьких экранах при расширении.SO link: отзывчивая панель навигации с фиксированным верхом, когда развернутый заполняет экран, скрывает некоторые навигационные ссылки и не прокручивает

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

Изображение, поясняющее (в этом случае раскрывающийся список OLE) : enter image description here

Этот CSS-код используется для прокручивания свернутой навигационной панели. 

.fixed-top .navbar-collapse {
    max-height: calc(100vh - 4.5em);
    overflow-y: auto;
}

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

Вот мой JSFiddle для этой проблемы: https://jsfiddle.net/suhaib47/7b58o0d3/3/
Примечание: создайте область просмотра результатовдостаточно широк, чтобы навигационная панель могла быть полностью отображена.Нажмите на выпадающий список OLE, и вам придется прокрутить вниз, чтобы увидеть выпадающее меню.

Когда я показываю выпадающее меню за пределами контейнера, меню нельзя прокручивать на маленьких экранах.Когда меню МОЖЕТ прокручиваться, я не могу отобразить раскрывающееся меню за пределами контейнера nav.

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

Я нашел похожий SO вопрос, но не смог его решить, чтобы решить мою проблему: Раскрывающееся меню навигационной панели делаетне за пределами контейнера

1 Ответ

0 голосов
/ 15 октября 2018

Надеялся, что это будет решение без использования медиа-запросов.Тем не менее, я действительно смог исправить это с помощью медиазапроса. 

@media only screen and (max-height: 450px) {
    .fixed-top .navbar-collapse {
        max-height: calc(100vh - 4.5em);
        overflow-y: auto;
    }
}

Этот способ прокрутки доступен при необходимости, в зависимости от размера / ориентации дисплея, то есть когда сворачивается меню панели навигации.

...