Simple Dynamic Menus from JSON REST API using backbone.js

This tutorial will explain how to create simple dynamic menus from JSON REST API using backbone.js and menu navigation in backbone js. This tutorial has dependency of handlebar templates and jquery framework. User can find backbone js menu example and demo of this tutorial. Let start our tutorial.

Menu Javascript

define(function(require) {
    "use strict";
    var $ = require('jquery'),
        Backbone = require('backbone'),
        Handlebars = require('handlebars'),
        tpl = require('text!tpl/menu.html'),
        template = Handlebars.compile(tpl);
    return Backbone.View.extend({
        initialize: function() {
            var me = this;
            $(window).resize(function() {
                me.setActiveTab($(".activeTab")[0]);
                me.loadMenuStyle();
            });
        },
        render: function() {
            var me = this;
            me.loadMenuItems(function(result) {
                $(me.$el.html(template(result)));
                setTimeout(function() {
                    me.loadMenuStyle();
                }, 0);
            });
            return this;
        },
        events: {
            'click .menu ul li': 'tabClick'
        },
        loadMenuStyle: function() {
            var elLength = $(".menu li").length,
                elWidth = 100 / elLength;
            $(".menu li,.menu-line").css("width", elWidth + "%");
        },
        tabClick: function(a) {
            this.setActiveTab(a.currentTarget);
        },
        setActiveTab: function(currentTab) {
            var leftPosition = $(currentTab).offset().left;
            $(".menu li").removeClass("activeTab");
            $("div.menu-line").css("left", leftPosition);
            $(currentTab).addClass("activeTab");
        },
        loadMenuItems: function(callback) {
            var menuItem;
            $.get("js/json/menu/menuItem.json", function(data) {
                callback(data);
            });
        }
    });
});

JSON Format

[{
    "name": "Home",
    "description": "Home Tab",
    "src": "#",
    "className": "activeTab"
}, {
    "name": "About Us",
    "description": "About Us",
    "src": "#aboutus",
    "className": ""
}, {
    "name": "Contact Us",
    "description": "Contact Us",
    "src": "#contact",
    "className": ""
}]

Handlebars HTML template

<div class="menu">
    <ul>{{#each []}}
        <li class="{{className}}"><a href="{{src}}">{{name}}</a></li>{{/each}}</ul>
    <div class="menu-line" style="left: 0;"></div>
</div>

CSS Code

.menu {
    position: relative;
}

.menu ul {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu ul li {
    text-align: center;
    display: inline-block;
    background: #f08431;
    cursor: pointer;
}

.menu ul li a {
    display: block;
    text-decoration: none;
    color: #FFFFFF;
    padding: 10px 0;
}

.menu .menu-line {
    height: 2px;
    background: #000;
    width: 33.33%;
    position: absolute;
    transition-duration: .5s;
}

Please like and share this article if you like this page. Do comment if you have any queries

Download Demo