Navigation bar widgets

Custom navigation bar widgets.

by Jimmy Mabey

HTML

<nav>
    <ul class="navbar">
        <li class="navbar-item">
            Text
        </li>
        <li>
            <a href="#" class="navbar-item">Link</a>
        </li>
        <li class="navbar-dropdown">
            <a class="navbar-dropdown-toggle">
                Dropdown
            </a>
            <ul class="navbar-dropdown-list">
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
            </ul>
        </li>
        <li class="navbar-dropdown">
            <a class="navbar-dropdown-toggle">
                Nested dropdown
            </a>
            <ul class="navbar-dropdown-list">
                <li class="navbar-dropdown">
                    <a class="navbar-dropdown-toggle">
                        Dropdown
                    </a>
                    <ul class="navbar-dropdown-list">
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 1</a></li>
                    </ul>
                </li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 1</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS

nav
{
    background: #ccc;
}

.navbar
{
    list-style: none;
    padding: 0;
}

.navbar > li
{
    display: inline-block;

    /* DESIGN */
    background: #ddd;
}

.navbar-item, .navbar-dropdown-toggle
{
    display: inline-block;
    font: 16px arial;
    color: black;
    text-decoration: none;
    padding: 0.5em;
}

.navbar-dropdown
{
    position: relative;
}

.navbar-dropdown-toggle
{
    cursor: pointer;
}

.navbar-dropdown-list
{
    display: none;
    list-style: none;
    padding: 0;
    
    position: absolute;
    left: 0;
    min-width: 100%;
    
    /* DESIGN */
    background: #fdd;
}

.navbar-dropdown-list > li
{
    margin: 0.5em;
}

JavaScript

var App = {
    views: {}
};

// -------------------------------------------------------------------------------------

App.views.Nav = function(el)
{
    this.el = el;
    this.dropdownViews = [];

    this.initDropdowns();
};
        
App.views.Nav.prototype.initDropdowns = function()
{
    var self = this;
    
    this.dropdownViews = $.map(
        this.el.children('.navbar-dropdown'),
        function(el)
        {
            return new App.views.NavDropdown($(el));
        }
    );
};

App.views.Nav.prototype.render = function()
{
    $.each(this.dropdownViews, function(index, view)
    {
        view.render();
    });
};

// -------------------------------------------------------------------------------------

App.views.NavDropdown = function(el)
{
    this.el = el;
};

App.views.NavDropdown.prototype.render = function()
{
    this.el.on('click', '> .navbar-dropdown-toggle', $.proxy(this.toggle, this));
};

App.views.NavDropdown.prototype.toggle = function()
{
    this.el.children('.navbar-dropdown-list').slideToggle();
};

// -------------------------------------------------------------------------------------

$(function()
{
    new App.views.Nav($('.navbar')).render();
});