Progressive Navigation

by stevegreatrex

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="https://raw.github.com/stevegreatrex/JsUtils/master/JsUtils/progressiveNav.js"></script>
<div id="container">
    <a data-nav-group="top" data-nav-target="add">add a meal</a>
    
    <a data-nav-group="add" data-nav-target="top">&lt;</a>
    <a data-nav-group="add" data-nav-target="breakfast">breakfast</a>
    <a data-nav-group="add" data-nav-target="lunch">lunch</a>
    <a data-nav-group="add" data-nav-target="dinner">dinner</a>
    <a data-nav-group="add" data-nav-target="snack">snack</a>
    
    <a data-nav-group="dinner" data-nav-target="add">&lt;</a>
    <a data-nav-group="dinner">my favourites</a>
    <a data-nav-group="dinner">eating out</a>
    <a data-nav-group="dinner">healthy meals</a>
    <a data-nav-group="dinner">beef</a>
    <a data-nav-group="dinner">chicken</a>
    
</div>

<br/><br/>
<a id="back">Back to Top</a>

CSS

a { background: #aaa; color: #eee; margin: 2px; padding: 5px 20px; cursor: pointer; }
a:hover { background: #999; }
#container { margin: 10px; }
body { font-family: 'segoe ui' }

JavaScript

$("#container").progressiveNav();

$("#back").click(function() {
$("#container").progressiveNav("top");    
});