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

You might also like

Implement Internationalization (i18n) using Backbone.js and handlebars.js

November 26, 2019

Simple Dynamic Menus from JSON REST API using backbone.js

November 13, 2019

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.