Responsive navigation menu, items "tuck under" eachother

Viewed 1030

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...

1024 width

enter image description here

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

3 Answers
Related