如何在Zurb Foundation下拉菜单中添加溢出？
赛义德巴克
我有下拉菜单的顶部粘条。菜单包含许多元素，因此在有限的高度屏幕尺寸下，无法访问其余元素。我试图将溢出添加到菜单的ul中，如下所示：
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
<a href="#"><?php echo lang('Choose Source');?></a>
<!-- Adding overflow -->
<ul class="dropdown" style="overflow: scroll">
但是，它只是呈现一个禁用的滚动条，如屏幕截图所示：
是否有任何解决方案或替代解决方法？
我使用Foundation 5。
亚当·霍夫曼
当CSS在设置后仅显示禁用的滚动条时overflow: scroll;，表示未在对象上设置高度。由于您使用的是Foundation顶栏，因此您需要设置高度和使用方式!important，以覆盖的样式height: auto !important。
由于您愿意接受替代方案，因此建议您将长下拉列表转换为多列。我在这里创建了一个Codepen示例。
选项一：添加一个滚动条，就像您最初想要完成的那样。这是可行的，但我不确定它是否可以带来良好的用户体验。橙色箭头指向滚动条。
选项二：是一个简单的两列，使用下拉式自然浮点数，因此几乎没有其他标记。选项2可能会有不利之处，具体取决于您希望阅读顺序如何。橙色箭头表示阅读顺序，从左到右与选项二一起使用。
选项三：标记要多一点，但它会使读取顺序从第一列开始，然后从第二列开始。橙色箭头表示阅读顺序，从左到右使用选项三。
当然，对于选项二和选项三，您都可以将其扩展为任意数量的列，并且需要进行媒体查询，以确保样式仅影响断点上方的屏幕尺寸。
如果我误解了您的问题，请随时进行澄清，并为您的PHP生成的HTML提供一个Codepen或jsfiddle。
如果您有任何问题，请通知我。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
我如何在引导下拉菜单中添加图标
- 2
如何在HTML中添加下拉菜单？
- 3
如何在Wordpress主下拉菜单中添加类
- 4
如何在 HTML 表单中添加下拉菜单？
- 5
Zurb Foundation下拉菜单不起作用
- 6
Zurb Foundation：通过CLI设置项目后如何使下拉菜单正常工作
- 7
Zurb Foundation：通过CLI设置项目后如何使下拉菜单正常工作
- 8
如何根据下拉菜单在输入中添加内容？
- 9
如何在下拉菜单中添加折叠子菜单？
- 10
如何在Zurb Foundation网格列上添加边框？
- 11
如何在菜单和下拉菜单之间添加空格
- 12
如何在zurb Foundation中增加行宽？
- 13
如何在Zurb Foundation中抽出列背景？
- 14
您如何在Zurb Foundation中抽出专栏背景？
- 15
如何添加导航下拉菜单？
- 16
如何添加下拉菜单？
- 17
如何在Android中更改Sherlock操作栏溢出下拉菜单项的文本颜色？
- 18
RoR-如何在下拉菜单中添加图标
- 19
如何在自定义的tinymce下拉菜单中添加工具栏按钮？
- 20
如何在引导导航栏下拉菜单中添加右上箭头
- 21
如何在默认的ASP .NET 3.1剃刀模板中添加下拉菜单
- 22
如何在使用HTML助手创建的下拉菜单中添加其他属性？
- 23
如何在cf7下拉菜单中添加最近五年？
- 24
如何在使用Python中的Plotly创建的图中添加按钮或下拉菜单？
- 25
如何在Mootools下拉菜单脚本中添加.delay
- 26
RoR-如何在下拉菜单中添加图标
- 27
语义UI：如何在多选下拉菜单中取消添加标签
- 28
如何在角度2的下拉菜单中添加选项
- 29
如何在下拉菜单中添加文本框选择选项
我来说两句