javascript - 如何修复Foundation 4顶部栏中的CSS下拉菜单过长?

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

我正在尝试使用Foundation 4框架修复网页。该页面具有一个CSS下拉菜单,该菜单高于屏幕的高度。屏幕上无法显示的项目无法访问,请参阅菜单。巴黎在此简化的演示页面上:

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/

相关文章:

javascript - Angularjs - 给出weburl时如何使登录页面而不是索引页面加载

javascript - jQuery正则表达式

html - 另一个HTML/CSS布局挑战-带粘性页脚的全高边栏

php - Mysql 编辑用户下的订单

javascript - 我什么时候应该以 Angular 创建工厂或虚拟机

html - 与内容一起扩展页眉和页脚

css - 适用于 iPad、iPhone 的背景(封面)

javascript - HTML5游戏-隐藏导航栏/地址栏? (IOS 7)

javascript - 如何按自定义条件对javascript数组排序?不是字母或数字

javascript - 使用 mailto : option 时的特殊字符