javascript - 如何修复 Foundation 4 顶部栏中太长的 css 下拉列表?

标签 javascript jquery css drop-down-menu zurb-foundation

我正在尝试使用 Foundation 4 框架修复网页。该页面有一个高于屏幕高度的 css 下拉菜单。不适合屏幕的元素无法访问,请参阅菜单 Baggers |巴黎在这个简化的演示页面上:

http://janosgyerik.github.io/BrownBagLunch/dropdown-issue.html

让下拉菜单滚动会很棒,例如本页所示:

http://css-tricks.com/examples/LongDropdowns/

并在此页面上解释:

http://css-tricks.com/long-dropdowns-solution/

我从解释中复制了代码,但我不是 CSS 高手,我一直在努力将该代码应用到我上面的演示页面中。有人可以帮我吗?我也对其他类型的解决方案持开放态度,不一定是这种特殊的技巧。

更新

受@topless'回答的启发,我这样解决了:

function fixDropdown() {
    var maxheight = $(window).height() - $('nav.top-bar').height();
    var dropdown = $('ul.dropdown ul.dropdown');
    dropdown.css({ 'max-height': maxheight, 'overflow-y': 'auto' });
}
$(window).on('load', fixDropdown);
$(window).on('resize', fixDropdown);

最佳答案

当高度大于浏览器窗口大小时,除了滚动之外,我看不到任何其他解决方案。使用 css 我会这样做。如果您不希望选项到达页面底部,您可以定义一个 max-height 属性。

ul {
    max-height: 300px;
    overflow-y: scroll;
}

要实现您为长下拉列表发布的效果,您可以按照 instructions 来自 css-tricks 的同一个人。

关于javascript - 如何修复 Foundation 4 顶部栏中太长的 css 下拉列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20482271/

相关文章:

html - Google Chrome 浏览器的 HTML、CSS 中的超链接问题

javascript - 如何在每个屏幕上找到特定位置?

调整div大小的javascript代码

javascript - 代码在 HTML 页面中有效,但在 Wordpress 帖子中无效

javascript - 通过客户端javascript读取txt文件

javascript - 使用数组值作为数组名称

javascript - 根据我悬停的圆圈显示相应的工具提示文本

javascript - Bootstrap 模态仅在刷新页面后有效

javascript - 如何在光滑 slider 的垂直 slider 同步中使用箭头(上一个和下一个)保持主幻灯片和垂直幻灯片的高度相等?

css - 文字换行 [CSS]