StefanB StefanB - 11 days ago 7
CSS Question

Responsive menu with "More" option as menu option start to overflow the parent

Basically I have a navbar with 11 links, and I want it to be responsive. The goal is, as window gets narrower, a 12th link will appear as a ddl that will include the 11th element, 10th and so on. The text in links is variable in length based on language, so the links are not equal in width.

This is the example of the markup (partial).

https://jsbin.com/fijakipesu/edit?html

What is the best approach to achieve this?

starting screen

Answer

Found this and is working like a charm. For anyone who is trying to achieve that responsive/progressive menu, try it.

http://jsfiddle.net/abhitalks/860LzgLL/

var elemWidth, fitCount, fixedWidth = 120,  
    $menu = $("ul#menu"), $collectedSet;
collect();
$(window).resize(collect);

function collect() {
    elemWidth = $menu.width();
    fitCount = Math.floor(elemWidth / fixedWidth) - 1;
    $collectedSet = $menu.children(":gt(" + fitCount + ")");
    $("#submenu").empty().append($collectedSet.clone());    
}