How to add overflow to Zurb Foundation drop down menu?
SaidbakR
I have sticky top bar with dropdown menu. The menu contains many elements so in limited height screen size the rest of elements could not be access. I tried to add overflow to the ul of the menu as the the following:
<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">
However, it just render a disabled scroll bar as the screen shot showing:
Is there any solution or alternative workaround?
I use Foundation 5.
Adam Huffman
When your CSS just shows a disabled scroll bar after setting overflow: scroll; that is indicative of not setting the height on the object. Since you are dealing with Foundation top-bar you will need to set the height and use !important in order to overwrite their styling of height: auto !important.
Since you are open to alternatives I suggest transforming your long drop down into multiple columns. I have created a codepen example here.
Option One: Adds a scroll bar like you were originally wanting to accomplish. It is doable, but I not certain it lends itself to a good user experience. Orange arrow point to scrollbar.
Option Two: Is a simple two column that uses the dropdowns natural float left, so there is little additional markup. Option two may have a downside depending on how you want the reading order to be. Orange arrow signifying reading order using left to right with Option Two.
Option Three: Is a bit more markup but it keeps the reading order down column one then down column two. Orange arrow signifying reading order using left to right with Option Three.
Of course for both Option Two and Option Three you can extend it out to be as many columns as you want and you will need a media query to be sure the styles only affect screen sizes above your breakpoint.
If I have misunderstood your question please feel free to clarify and provide a codepen or jsfiddle to your PHP generated HTML.
If you have any questions let me know.
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Change Hover to Onclick Toggle for Drop Down Menu
- 2
Recursive mustache with checkbox to make drop down menu
- 3
Zurb Foundation Framework的Browserify
- 4
对Zurb Foundation的贡献入门
- 5
Zurb Foundation Framework的Browserify
- 6
ZURB Foundation 6的要求
- 7
Drop down menu not displaying vertically under main menu
- 8
Drop down menu selection ditactes what form will display
- 9
How Do I set drop down menu list open when I click on parent li Then open the sub li using javascript?
- 10
Foundation Zurb-容器宽度？
- 11
Zurb Foundation的jQuery UI主题？
- 12
Zurb Foundation垂直导航栏？
- 13
如何设置Zurb Foundation图标？
- 14
Zurb Foundation Orbit：延迟加载？
- 15
Zurb Foundation更改顶部颜色
- 16
Zurb Foundation中的居中列表
- 17
Zurb Foundation 6原色变量
- 18
Zurb Foundation小柱不流动
- 19
Zurb Foundation中的居中列表
- 20
Foundation Zurb中的图像缩放
- 21
Zurb Foundation展示了Rails的模态
- 22
Foundation Zurb-容器宽度？
- 23
Zurb Foundation：介质上的Topbar菜单按钮
- 24
如何手动安装Zurb Foundation？
- 25
在zurb Foundation网格中嵌套行
- 26
Best practice for Laravel 4 + Zurb Foundation 5?
- 27
使用Zurb Foundation自动完成样式
- 28
Rails 4，Heroku，Zurb Foundation 5
- 29
Laravel 4 + Zurb Foundation 5的最佳实践？
我来说两句