Menu, Collecting Options

by abhitalks

HTML

<div>
    <ul id="menu">
        <li>Option One</li>
        <li>Option Two</li>
        <li>Option Three</li>
        <li>Option Four</li>
        <li>Option Five</li>
        <li>Option Six</li>
    </ul>
    <ol>
        <li>
            Collected
            <ul id="submenu"></ul>
        </li>
    </ol>
</div>

CSS

* { box-sizing: border-box; margin: 0; padding: 0; }
div {
    position: relative;
    background-color: #ccc;
    height: 32px; overflow: visible;
}
ul#menu, ol {
    height: 32px; max-width: 80%;
    overflow: hidden;
}
ul#menu > li, ol > li {
    display: block; float: left; 
    height: 32px; width: 120px;
    padding: 4px 8px;
}
ol {
    position: absolute;
    right: 0; top: 0;
    overflow: visible;
}
ol > li { min-width: 120px; }

ol ul {
    position: absolute;
    top: 120%; right: 10%;
}

ol li ul > li {
    list-style: none; 
    background-color: #eee;
    border: 1px solid gray;
    padding: 4px 8px;
}

JavaScript

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());    
}