CODEWITHSUNDEEP
javascriptjqueryhtmlcssresponsive-design
hcharge
hcharge

Reputation: 1246

Responsive navigation menu, items "tuck under" eachother

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

Upvotes: 6

Views: 1093

Answers (3)

Igor Gai
Igor Gai

Reputation: 295

Here's a nice jQuery plugin that may solve the problem: https://github.com/352Media/flexMenu

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

Upvotes: 4

Aletheios
Aletheios

Reputation: 4020

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.

Upvotes: 6

skip405
skip405

Reputation: 6279

I think my variant may be a starting point for you. I'm a novice in jQuery and am learning a lot myself - so anybody, feel free to correct (and improve) my method or my logic :)

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

To see it in action you need to resize the Result window so that there were 3 or 4 items in a row (not 7) and press Run again. Hover over More to see the rest of them.

In this fiddle I calculate the width of the list items in a loop and compare it with the width of the whole menu. When the calculated width of the items becomes higher than that of the menu - we can get the number of visible lis at the moment.

NB: This code works on document.ready and won't work on resizing of the window yet. So press Run when you resize the window for now.

Upvotes: 2

Related Questions