adding more button for list in responsive navigation

Question

I have a navigation of lets say 12 items, and when resolution gets smaller items drop in a new line. I need to make that when an item doesn\'t fit on a navigation anymore it

Answer 1

The script that Abhitalks made did not work properly for different element sizes. I modified the code a little bit do that it does:

$(function() {
    function makeMenuFit() {
        //Get data
        var menuSize = menu.width();

        //Determine how many items that fit
        var menuTotalWidth = 0;
        var itemThatFit = 0;
        for(var i = 0; i < menuItems.length; i++) {
            menuTotalWidth += menuItems[i];
            if(menuTotalWidth <= menuSize) {
                itemThatFit++;
                continue;
            }
            break;
        }

        menu.children().css({"display": "block", "width": "auto"});
        var collectedSet = menu.children(":gt(" + (itemThatFit - 1) + ")");
        $("#submenu").empty().append(collectedSet.clone());  
        collectedSet.css({"display": "none", "width": "0"});
    }

    var menu = $(".tabletNavigation > ul");
    var menuItems = [];
    menu.children().each(function() {
        menuItems.push($(this).outerWidth());
    });

    $(window).resize(makeMenuFit);
    makeMenuFit();
});