I'm trying to fix a web page using the Foundation 4 framework. The page has a css dropdown menu that's taller than the height of the screen. Items that don't fit on the screen are inaccessible, see the menu Baggers | Paris on this simplified demo page:

.html

It would be great to make the dropdown menu scrolling, for example as demonstrated on this page:

/

and explained on this page:

/

I copied the code from the explanation, but I'm not a CSS wiz, and I've been struggling to adopt that code to my demo page above. Can somebody help me out here? I'm open to other kind of solutions too, doesn't have to be this particular trick.

UPDATE

Inspired by @topless' answer, I solved it like this:

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);

I'm trying to fix a web page using the Foundation 4 framework. The page has a css dropdown menu that's taller than the height of the screen. Items that don't fit on the screen are inaccessible, see the menu Baggers | Paris on this simplified demo page:

http://janosgyerik.github.io/BrownBagLunch/dropdown-issue.html

It would be great to make the dropdown menu scrolling, for example as demonstrated on this page:

http://css-tricks./examples/LongDropdowns/

and explained on this page:

http://css-tricks./long-dropdowns-solution/

I copied the code from the explanation, but I'm not a CSS wiz, and I've been struggling to adopt that code to my demo page above. Can somebody help me out here? I'm open to other kind of solutions too, doesn't have to be this particular trick.

UPDATE

Inspired by @topless' answer, I solved it like this:

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);

• javascript
• jquery
• css
• drop-down-menu
• zurb-foundation

2 Answers 2

I don't see any other solution than scrolling when the height is greater than the size of the browser window. With css I would do it like this. If you don't want the options to reach the bottom of the page you can define a max-height property.

ul {
    max-height: 300px;
    overflow-y: scroll;
}

And to achieve the effect you posted for the long drop downs, you can follow the instructions from the same guy from css-tricks.

I'm using foundation 5 and I've implemented a slightly different approach. Instead listen to the window resize, I prefer to listen to the dropdown opened event.

I have a navbar and a container with content, I add a padding to the container to pensate the cutted dropdown height.

$('body').on('opened.fndtn.dropdown', '[data-dropdown-content]', function() {
    var dropdownPosition = $(this).offset();
    var dropdownHeight = $(this).outerHeight(true);
    var containerHeight = $('#main').outerHeight();  // my container is #main, what is yours?
    var missingPadding = dropdownPosition.top + dropdownHeight - containerHeight  - $('nav.top-bar').height();
    $('#main').css('padding-bottom', missingPadding + 'px');
}