w3tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
w3tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
w3tweaks
Home Script Backbone.js
Sliding menu in backbone.js

Sliding menu in backbone.js

W3TWEAKS by W3TWEAKS
September 21, 2019
in Backbone.js
0

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

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

November 26, 2019
0
Simple Dynamic Menus from JSON REST API using backbone.js

Simple Dynamic Menus from JSON REST API using backbone.js

November 13, 2019
0
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
Tags: Backbonebackbone sliding menu demobackbone sliding menu examplebackbone.jsbackbone.js sliding menucss3Javascriptmenusliding menu in backbone.jssliding menu using backbone.js
Previous Post

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

Next Post

Open Dynamic Youtube Videos in Fancybox or Modal window or Lightbox

W3TWEAKS

W3TWEAKS

Since I've had a strong background in front-end development, I took the initiative to start my own website (w3tweaks.com) to share my knowledge with the world.

Related Stories

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

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

by W3TWEAKS
November 26, 2019
0
0

This tutorial will explain how to Implement Internationalization (i18n) using Backbone.js and handlebars.js without using any 3rd party plugin Let's...

Simple Dynamic Menus from JSON REST API using backbone.js

Simple Dynamic Menus from JSON REST API using backbone.js

by W3TWEAKS
November 13, 2019
0
0

This tutorial will explain how to create simple dynamic menus from JSON REST API using backbone.js and menu navigation in...

Next Post
Open Dynamic Youtube Videos in Fancybox or Modal window or Lightbox

Open Dynamic Youtube Videos in Fancybox or Modal window or Lightbox

Discussion about this post

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube