Sliding menu in backbone.js

This tutorial will explain how to implement sliding menu using backbone.js and users can find backbone js slide menu example and demo of this tutorial

CSS Code

`body {
  font: 100% Helvetica, sans-serif;
  color: #AAA;
  margin: 0; }

.menu {
  position: relative; }
  .menu ul {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none; }
    .menu ul li {
      text-align: left;
      padding-left: 10px;
      background: #f08431;
      cursor: pointer; }
      .menu ul li a {
        display: block;
        text-decoration: none;
        color: #FFFFFF;
        padding: 10px 0;
      }
  .menu .menu-line {
    background: #000;
    width: 4px;
    height: 38px;
    position: absolute;
    transition-duration: .5s;
    top:0;
  }
  .mainMenu{
    float: left;
    width:30%;
  }`

HTML Code

`<div class="menu">
    <ul>{{#each []}}<li class="{{className}}"><a href="{{src}}">{{name}}</a></li>{{/each}}</ul>
    <div class="menu-line"></div>
</div>`

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 height = $( ".menu li" ).height();
            $(".menu li,.menu-line").css("height",height);
        },

        tabClick: function(a){
            this.setActiveTab(a.currentTarget);
        },

        setActiveTab: function(currentTab){
            var topPosition = $(currentTab).offset().top;
            $( ".menu li" ).removeClass( "activeTab" );
            $( "div.menu-line" ).css( "top", topPosition);
            $(currentTab).addClass( "activeTab" );
        },

        loadMenuItems: function(callback){
            var menuItem;
            $.get("js/json/menu/menuItem.json",function(data){
                callback(data);
            });
        }
    });
});`

Show and Hide sliding menu JavaScript

`define(function (require) {
    "use strict";

    var $                   = require('jquery'),
        Handlebars          = require('handlebars'),
        Backbone            = require('backbone'),
        tpl                 = require('text!tpl/Home.html'),

        template            = Handlebars.compile(tpl);

    return Backbone.View.extend({

        render: function () {
            this.$el.html(template());
            return this;
        },

        events: {
           'click a.closeMenu' : 'menuCloseClick'
        },

        menuCloseClick: function(){
            $( ".mainMenu" ).toggle("slow", function(a) {
                if($(this).is(":visible")){
                    $('a.closeMenu').text('Hide');
                }else{
                    $('a.closeMenu').text('Show');
                }
            });
        }
    });
});`

If you like the tutorial and the demo, please like and share the article.

** Download ** Demo