Making a menu responsive

Question

I have a fiddle that shows a menu that I build.

This is a vertical menu. The problem that I'm having is the more <li>s I add to the menu, the harder it is to fit on the screen.

For example: The top menu item (A) has most of it's contents that extend above the screen. Imagine if the menu had many items (a, b, c, d ...z), the bottom menu item (z) would extend past the bottom of the screen.

To compound my problem, imagine a menu item in the middle of the menu had many elements. This will also extend past the top of the screen. This is not what I want. I'd actually like the menu flyouts to respond to it's surrounding window and fit itself inside.

I've started by telling each group to center itself before it shows itself like so:

var groupList = $(e.target).find('.group-list');
groupList.css({
    'margin-top': (-groupList.height() / 2) + 'px'
});
groupList.show();

Unfortunately this is not enough. However, I'm unsure of how to make each aware of the window around it, and responsive enough to fit itself inside the window.

How can I rewrite my groupList.css({}) code to make the group-list class responsive & fit inside the window?

Answer 1

I would get the total height of a wrapper that is around your full lits items /menu. Then compare it to the variables of something such as the following:

Var height = $(document).height();  // get document height
Var width = $( window).width();

Then compare that against your list height at all times. If the height reaches the point at the limit you want, then create a new column and append your list to it. That way it is always resizing and never hanging outside the windows view port.

You then would create the second box that your pop out list items are in. Compare that to the document height and also set the bottom css to 0px.