Progressive Navigation with Knockout

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" data-bind="progressiveNav: level">
    <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>
    
    <a data-nav-group="breakfast" data-nav-target="add">&lt;</a>
    <a data-nav-group="lunch" data-nav-target="add">&lt;</a>
    <a data-nav-group="snack" data-nav-target="add">&lt;</a>
</div>

CSS

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

JavaScript

$(function() {
    var viewModel = {
        level: ko.observable()
    };
    viewModel.goToAdd = function() {
        viewModel.level("add");
    };
    
    ko.applyBindings(viewModel);
    
    $("#exercise-link").click(function() {
        $("#container").progressiveNav("exercise");
    });
});