Skip to content

Instantly share code, notes, and snippets.

@danrcoull
Created January 26, 2017 16:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danrcoull/2623d866430fb9266bf6f63752b9c585 to your computer and use it in GitHub Desktop.
Save danrcoull/2623d866430fb9266bf6f63752b9c585 to your computer and use it in GitHub Desktop.
Magento 2 Standard Category Menu to Boostrap menu without changing templates
/**
* Magento 2 Menu to Boostrap 3 - Requires Boostrap.js and Boostrap-submenu.js (https://github.com/vsn4ik/bootstrap-submenu)
* @type {{_init: createMenu._init, _addHamburger: createMenu._addHamburger, _addWrappers: createMenu._addWrappers, _modifyToggle: createMenu._modifyToggle, _hookEvents: createMenu._hookEvents, _destroy: createMenu._destroy}}
*/
var createMenu =
{
hamburger:false,
id:'navbar',
_init : function(hamburger,id) {
this.id = id;
this.hamburger = hamburger;
this._addWrappers();
if(this.hamburger)
{
this._addHamburger();
}
this._modifyToggle();
this._hookEvents();
},
_addHamburger : function(){
var burger = '<div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#'+this.id+'">'
+ '<span class="icon-bar"></span>'
+ '<span class="icon-bar"></span>'
+ '<span class="icon-bar"></span>'
+ '</button>';
$('.navigation').prepend(burger);
},
_addWrappers: function(){
$('.navigation')
.addClass('navbar navbar-default');
$('.navigation ul:first-child')
.addClass('nav navbar-nav')
.wrap('<div class="container-fluid"></div>')
.removeAttr('data-mage-init');
$('.navigation .container-fluid').wrap('<div class="collapse navbar-collapse" id="'+this.id+'"></div>');
},
_modifyToggle : function () {
$('.navigation .level0.parent').addClass('dropdown');
$('.navigation .parent:not(".level0")').addClass('dropdown-submenu');
$('.navigation .parent > a').each(function() {
$(this).attr('data-toggle', 'dropdown')
.addClass('dropdown-toggle')
.next('ul').addClass('dropdown-menu');
});
},
_hookEvents:function(){
// if desktop menu show on hover
if ($(window).width() > 767) {
$('.navigation ul li.dropdown,.navigation ul li.dropdown-submenu').hover(function () {
$(this).children('.dropdown-menu').first().show();
}, function () {
$(this).children('.dropdown-menu').first().hide();
});
}
$('.dropdown-toggle').click(function() {
if ($(this).next('.dropdown-menu').first().is(':visible')) {
window.location = $(this).attr('href');
}
});
},
_destroy:function(){
}
};
// convert to bootstrap menu
createMenu._init(true, 'navbar');
$( window ).resize(function() {
createMenu._hookEvents();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment