Responsive navigation menu, “slip” items to each other

Question

I hope someone can point me in the right direction with what I hope to achieve. I am creating a responsive website and have a traditional navigation menu spanning the top with a few elements inside.

I need this menu to shrink when the page gets narrower, but instead of breaking the navigation menu, I would like for elements that don't fit the More ... tab. Does this make sense? Here's a graphical representation ...

Thus, the top image will look like width 1024, and below - width 768.

The contents of the menu are unknown, so the width will vary, so I will need to calculate the width of the merged links, and then something more than that will be shown below the drop-down list More ..

Any advice would be greatly appreciated, I just don’t know where to start at the moment.

thanks

Answer 1

Here is a good jQuery plugin that can solve the problem: https://github.com/352Media/flexMenu

Also, be sure to check out the great article offering step-by-step instructions on how to organize such a flexible navigation using the aforementioned flexMenu plugin: http://webdesign.tutsplus.com/tutorials/site-elements/a-flexible-approach-to -responsive-navigation /

Answer 2

The implementation of this is quite simple if the menu can be static and does not need to be adjusted when the window is resized; @ Skip405 example is a really good solution in this case (+1).

If the execution needs to dynamically change the menu when the window is resized, it becomes complicated, though ... The window.onresize event is fired quite often while the user zooms in the browser window, so a naive implementation (for example, @ skip405 approach on each event) will be too slow / expensive.

I would solve the problem as follows:

• Calculate and add the outer width of all links at the beginning.
• Add all available links to the more tab (cloning) so that they can show / hide dynamically. This is much faster than creating new (accordingly destroying) DOM elements all the time.
• Bind a handler to the onresize event. In the handler, get the current width of the menu and compare it with the width of the links. Hide all links that do not fit the menu, and show their copies on the tab "more". The same thing happens the other way around to display links if the menu is wide enough.

Here is my implementation: http://jsfiddle.net/vNqTF/

Just resize the window and see what happens .;) Please note that the solution can still be optimized, of course, this is just an example.

Answer 3

I think my option might be the starting point for you. I am new to jQuery and am learning a lot - so feel free to fix (and improve) my method or my logic to anyone :)

My starting point is here: http://jsfiddle.net/skip405/yN595/1/

To see this in action, you need to resize the results window so that there are 3 or 4 elements in the row (not 7) and click Run again. Hover over More to see the rest.

In this script, I calculate the width of the list items in a loop and compare it with the width of the entire menu. When the estimated width of the elements becomes higher than in the menu, we can get the number of visible li at the moment.

NB: This code works on document.ready and will not work when the window is resized. So click Run when you resize the window for now.