CSS Menu Subnav Displays Below Fold

Question

I have a left-side vertical CSS menu with subnavs that pop to the right.

My problem is that the last menu item has many subnavs that cause them to display below the fold of the window.

Is there any way with CSS or jQuery to detect if this will happen and adjust the position accordingly so that all submenu items can be seen?

Here is a link to my example (you may have to adjust the window height):

<!--demo is at following link-->

http://jsfiddle.net/otcq2ne0/

You should take into account how much height do you have available in the window, vs how much height will you need in order to display the submenus. If it doesn´t fit, the you need to reposition the submenus in a way that it can be seen. — Guillermo, Oct 16 '14 at 15:26
this post may help you a little bit: http://stackoverflow.com/questions/9872128/get-bottom-and-right-position-of-an-element — Guillermo, Oct 16 '14 at 15:30

score 1 · Accepted Answer · answered Oct 16 '14 at 15:37

Here is an update using jQuery: http://jsfiddle.net/otcq2ne0/1/

$('body').on('mouseenter mouseover', '.vmdrop', function() {
    var subNav = $('.vmenu-dropdown', this);

    if (subNav.length) {
        var pos = subNav[0].getBoundingClientRect();
        if (pos.bottom > window.innerHeight) {
            var threshold = pos.top;
            var buffer = 10;
            var diff = window.innerHeight - (pos.bottom + buffer);

            if (Math.abs(diff) > threshold) {
                diff = '-' + (threshold + buffer);
            }

            if (Math.abs(diff) > 0) {
                subNav.css({ top: diff + 'px' });
            }
        }
    }
});

CSS Menu Subnav Displays Below Fold

1 Answers1