Responsive navigation menu, items "tuck under" eachother

Question

I'm hoping somebody is able to point me in the right direction with what I'm hoping to achieve. I'm building a responsive site, and have a traditional navigation menu spanning the top, with several items inside.

I need for this menu to shrink when the page gets narrower, but rather than the navigation menu breaking I would like for the items that don't fit to go underneath a "More..." drop down tab. Does this make sense? Here's a graphical representation...

So the top image would be what it might look like with 1024 width, and below is the 768 width.

The content in the menu is unknown so the widths would vary, so I'd need to calculate the width of the combined links and then anything more than that would get put underneath the More.. dropdown.

Any tips would be greatly appreciated, just not sure where to start at the moment.

Thanks

Answer 1

Implementing this is quite simple, if the menu can be static and doesn't have to adjust when the window is resized; @skip405's example is a really good solution in this case (+1).

If the implementation has to adjust the menu dynamically on window resize, it get's tricky though... The window.onresize event is fired quite often while the user scales the browser window, so a naive implementation (e.g. @skip405's approach executed on every event) would be too slow/expensive.

I'd solve the problem as follows:

1. Calculate and add up the outer width of all links at the beginning.
2. Append all available links to the "more" tab (cloning) so they can be shown/hidden dynamically. This is much faster than creating new (resp. destroying) DOM elements all the time.
3. Bind a handler to the onresize event. In the handler, get the current menu width and compare it to the width of the links. Hide all links that don't fit in the menu and show their counterparts in the "more" tab. The same goes the other way round for showing links if the menu is wide enough.

Here's my implementation: http://jsfiddle.net/vNqTF/

Just resize the window and see what happens. ;) Note that the solution can still be optimized of course - it's just an example.