George Kendros George Kendros - 1 month ago 7
HTML Question

Moving menu items into overflow div as menu is resized?

I've seen some similar questions but the answer seem to revolve around a binary switch between mobile menu and regular menu where some JS is used to hide the regular menu (and show the mobile menu) as soon as any menu item goes into overflow.

What I'm looking to do is remove individual LI elements from the regular menu and move them into an overflow menu as needed,

I'll try to illustrate;

Initial menu state;

Home | About | Products | Services | Stuff | Contact


Intermidiate state (the window has been resized and "contact" has moved into the overflow area, "..." is the overflow menu which will contain all hidden items.

Home | About | Products | Services | Stuff | ...


The window has been shrunk even more and now only the first 2 menu items can fit, the rest are all in the overflow area now

Home | About | ...


Basically, I just want some way to detect when a specific LI has gone into the overflow area so I can act on it accordingly. I'm already using jQuery so I'm fine with any jquery solutions.

Answer

So I spent way too much time on this :-)
It can be done but it's proving quite tricky.

One way is to loop through your menu on window resize and see if the li top position is greater than zero. If so, move it to the next menu.

My demo only moves them from the 1st to 2nd menu. You'll need to figure out a way to move them back.

Here is the code. Sorry I couldn't get a fully working version but a brother needs to get back to work!
http://jsfiddle.net/rxs6q12d/3/

PS. StackOverflow requires a code snippet when linking to jsfiddle. It's not relevant to this post so I'll just...

// include some code!