How do I add overflow to the Zurb Foundation dropdown menu?
I have a sticky top bar with a dropdown menu. The menu contains many items, so if the height of the screen is limited, other items cannot be accessed. I tried to add an overflow to the ul of the menu like below:
<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 displays the disabled scrollbar as shown on the screen:
Is there any solution or alternative solution?
I am using Foundation 5.
source to share
When your CSS just shows a disabled scrollbar after setting overflow: scroll;
it indicates no setting for the object's height. Since you are dealing with a Foundation top bar, you will need to set the height and use !important
to overwrite their style height: auto !important
.
Since you are open to alternatives, I suggest converting your long shot into multiple columns. I created an example codepen here .
Option 1 : Adds the scrollbar you originally wanted to do. It's doable, but I'm not sure if it lends itself to a good user experience. An orange arrow indicates the scroll bar.
Option two . It's a simple two columns with the natural float dropdowns left to the left, so there is a little extra markup. Option two may have a downside depending on how you want the reading order to be. Orange arrow indicating left-to-right reading order with option 2.
Option three : a little more markup, but it preserves the reading order in column one and then column two. Orange arrow indicating left-to-right reading order with option 3.
Of course, for both Option 3 and Option 3, you can increase it to as many columns as you want, and you'll need a media query to make sure the styles only affect the screen sizes above the breakpoint.
If I misunderstood your question, feel free to clarify and provide a codepen or jsfiddle for your PHP generated HTML.
If you have any questions, please let me know.
source to share