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.

• Next »
  Implement Internationalization (i18n) using Backbone.js and handlebars.js