Bootstrap Menu, Collecting Options

by Shiv Singh

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="menuwrap">
    <ul id="menu" class="nav nav-pills menu">
        <li class="active"><a href="#">Dashboard</a></li>
        <li><a href="#">Docs</a></li>
        <li><a href="#">Docs 2</a></li>
        <li><a href="#">Docs 3</a></li>
        <li><a href="#">Docs 4</a></li>
        <li><a href="#">Data</a></li>
        <li><a href="#">iWeb</a></li>
        <li><a href="#">Program</a></li>
    </ul>
    <ul class="nav nav-pills collect">
        <li class="dropdown">
            <a role="button" href="#" data-toggle="dropdown" class="dropdown-toggle">
          More +<span class="caret"></span>
        </a>
            <ul id="submenu" class="dropdown-menu"></ul>
        </li>
    </ul>
</div>

CSS

* { box-sizing: border-box; margin: 0; padding: 0; }
div.menuwrap {
    position: relative;
    background-color: #ccc;
    height: 48px; overflow: visible;
}
ul.menu {
    height: 48px; max-width: 80%;
    overflow: hidden; 
}
ul.menu > li {
    display: block; float: left; 
    height: auto; white-space: nowrap;
    padding: 4px 8px; 
}
ul.collect {
    position: absolute;
    right: 0; top: 0;
    padding: 4px 8px; 
    overflow: visible;
}
ul.collect ul.dropdown-menu { right: 0; left: auto; }

JavaScript

var elemWidth, fitCount, varWidth = 0, ctr, 
    $menu = $("ul#menu"), $collectedSet;

ctr = $menu.children().length;
$menu.children().each(function() {
    varWidth += $(this).outerWidth();
});

collect();
$(window).resize(collect);

function collect() {
    elemWidth = $menu.width();
    fitCount = Math.floor((elemWidth / varWidth) * ctr) - 1;
    $menu.children().css({"display": "block", "width": "auto"});
    $collectedSet = $menu.children(":gt(" + fitCount + ")");
    $("#submenu").empty().append($collectedSet.clone());  
    $collectedSet.css({"display": "none", "width": "0"});
}