我正在尝试使用 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/