Blog

Some of my thought on technology and programming.

Recently I was asked to work on a website with a large pop-out menu. I chose to use "Son of Suckerfish" as it is compatible with a wide variety of old browsers (and I needed to support Internet Explorer 8).

Son of Suckerfish is awesome and worked beautifully for the creation of the intranet site I was working on, however, it did have one issue —the dreaded fold. On this site they wanted to have a massive root menu and some equally massive sub-menus (up to four layers of sub-menus too).

The issue I had was that some of the menus which were initiated lower down the page would just disappear off the bottom of the page and be inaccessible to users because they would not be able scroll the hidden bits into view.

The solution to the problem is to use the following JavaScript snippet (requires jQuery).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var winHeight = $(window).height();
$navULs = $('#nav ul');
$navULs.find('ul').each(function(i,v) {
    $this = $(v);
    var ulHeight = $this.height();
    var parentHeight = $this.closest('li').height();
    var parentTop = $this.offset().top;
    var parentBottom = parentTop + parentHeight;
    if ((winHeight - parentTop) < ulHeight) {
        if (parentBottom < ulHeight) {
            $this.css({
                'margin-top': '0px',  // remove margin-top (added by suckerfish css) as it screws up the calculations
                'top': '-' + (parentTop) + 'px'  // move the menu up by the amount of px available above the parent's top
            });
        } else {
            $this.css('bottom', '0px');  // v basic, if sub menu will drop too much shove it up (css does the heavy lifting here)
        }
    }
});

I hope this helps…