时间戳

首页 > 解决方案 > 如何在容器外显示导航栏下拉菜单？

html - 如何在容器外显示导航栏下拉菜单？

问题描述

所以在这个问题之前，我一直在努力让导航栏在展开时在较小的屏幕上滚动。SO 链接：响应式固定顶部导航栏展开时会填满屏幕，隐藏一些导航链接，并且不滚动

使用该问题中的答案，我能够使导航栏滚动，但随后我遇到了一个新问题。单击导航栏链接时，弹出的下拉菜单将保留在导航栏容器中，并且可以滚动导航栏。

一张图片来解释（在这种情况下为 OLE 下拉菜单）： 在此处输入图像描述

这是用于使折叠的导航栏可滚动的 CSS。

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

导航栏折叠时没有问题，它可以很好地显示下拉菜单并滚动。但是，当不在大屏幕上折叠时，如何使下拉菜单显示在导航栏容器之外？

这是我针对此问题的 JSFiddle：https
://jsfiddle.net/suhaib47/7b58o0d3/3/ 注意：使结果视口足够宽，以便可以完全显示导航栏。单击 OLE 下拉菜单，您必须向下滚动才能看到下拉菜单。

当我在容器外显示下拉菜单时，无法在较小的屏幕上滚动菜单。当菜单可以滚动时，我无法让下拉菜单显示在导航容器之外。

如何使下拉菜单显示在导航栏容器之外？同时，我希望响应式导航栏在较小的屏幕上展开时可以滚动。

我发现了一个类似的 SO 问题，但无法解决我的问题：导航栏下拉菜单不超出容器

标签： htmlcsstwitter-bootstrapdrop-down-menuoverflow

解决方案

希望有一个解决方案，而不必使用媒体查询。尽管如此，我确实能够使用媒体查询来解决这个问题。

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

这种滚动方式在需要时可用，具体取决于显示大小/方向，即导航栏菜单折叠时。

推荐阅读