/*! * SlickNav Responsive Mobile Menu v1.0.10 * (c) 2016 Josh Cope * licensed under MIT */ ;(function ($, document, window) { var // default settings object. defaults = { label: 'MENU', duplicate: true, duration: 200, easingOpen: 'swing', easingClose: 'swing', closedSymbol: '+', openedSymbol: '-', prependTo: 'body', appendTo: '', parentTag: 'a', closeOnClick: false, allowParentLinks: false, nestedParentLinks: true, showChildren: false, removeIds: true, removeClasses: false, removeStyles: false, brand: '', animations: 'jquery', init: function () {}, beforeOpen: function () {}, beforeClose: function () {}, afterOpen: function () {}, afterClose: function () {} }, mobileMenu = 'slicknav', prefix = 'slicknav', Keyboard = { DOWN: 40, ENTER: 13, ESCAPE: 27, LEFT: 37, RIGHT: 39, SPACE: 32, TAB: 9, UP: 38, }; function Plugin(element, options) { this.element = element; // jQuery has an extend method which merges the contents of two or // more objects, storing the result in the first object. The first object // is generally empty as we don't want to alter the default options for // future instances of the plugin this.settings = $.extend({}, defaults, options); // Don't remove IDs by default if duplicate is false if (!this.settings.duplicate && !options.hasOwnProperty("removeIds")) { this.settings.removeIds = false; } this._defaults = defaults; this._name = mobileMenu; this.init(); } Plugin.prototype.init = function () { var $this = this, menu = $(this.element), settings = this.settings, iconClass, menuBar; // clone menu if needed if (settings.duplicate) { $this.mobileNav = menu.clone(); } else { $this.mobileNav = menu; } // remove IDs if set if (settings.removeIds) { $this.mobileNav.removeAttr('id'); $this.mobileNav.find('*').each(function (i, e) { $(e).removeAttr('id'); }); } // remove classes if set if (settings.removeClasses) { $this.mobileNav.removeAttr('class'); $this.mobileNav.find('*').each(function (i, e) { $(e).removeAttr('class'); }); } // remove styles if set if (settings.removeStyles) { $this.mobileNav.removeAttr('style'); $this.mobileNav.find('*').each(function (i, e) { $(e).removeAttr('style'); }); } // styling class for the button iconClass = prefix + '_icon'; if (settings.label === '') { iconClass += ' ' + prefix + '_no-text'; } if (settings.parentTag == 'a') { settings.parentTag = 'a href="#"'; } // create menu bar $this.mobileNav.attr('class', prefix + '_nav'); menuBar = $('
'); if (settings.brand !== '') { var brand = $('
'+settings.brand+'
'); $(menuBar).append(brand); } $this.btn = $( ['<' + settings.parentTag + ' aria-haspopup="true" role="button" tabindex="0" class="' + prefix + '_btn ' + prefix + '_collapsed">', //'' + settings.label + '', '', '', '', '', '', '' ].join('') ); $(menuBar).append($this.btn); if(settings.appendTo !== '') { $(settings.appendTo).append(menuBar); } else { $(settings.prependTo).prepend(menuBar); } menuBar.append($this.mobileNav); // iterate over structure adding additional structure var items = $this.mobileNav.find('li'); $(items).each(function () { var item = $(this), data = {}; data.children = item.children('ul').attr('role', 'menu'); item.data('menu', data); // if a list item has a nested menu if (data.children.length > 0) { // select all text before the child menu // check for anchors var a = item.contents(), containsAnchor = false, nodes = []; $(a).each(function () { if (!$(this).is('ul')) { nodes.push(this); } else { return false; } if($(this).is("a")) { containsAnchor = true; } }); var wrapElement = $( '<' + settings.parentTag + ' role="menuitem" aria-haspopup="true" tabindex="-1" class="' + prefix + '_item"/>' ); // wrap item text with tag and add classes unless we are separating parent links if ((!settings.allowParentLinks || settings.nestedParentLinks) || !containsAnchor) { var $wrap = $(nodes).wrapAll(wrapElement).parent(); $wrap.addClass(prefix+'_row'); } else $(nodes).wrapAll('').parent(); if (!settings.showChildren) { item.addClass(prefix+'_collapsed'); } else { item.addClass(prefix+'_open'); } item.addClass(prefix+'_parent'); // create parent arrow. wrap with link if parent links and separating var arrowElement = $(''+(settings.showChildren?settings.openedSymbol:settings.closedSymbol)+''); if (settings.allowParentLinks && !settings.nestedParentLinks && containsAnchor) arrowElement = arrowElement.wrap(wrapElement).parent(); //append arrow $(nodes).last().after(arrowElement); } else if ( item.children().length === 0) { item.addClass(prefix+'_txtnode'); } // accessibility for links item.children('a').attr('role', 'menuitem').click(function(event){ //Ensure that it's not a parent if (settings.closeOnClick && !$(event.target).parent().closest('li').hasClass(prefix+'_parent')) { //Emulate menu close if set $($this.btn).click(); } }); //also close on click if parent links are set if (settings.closeOnClick && settings.allowParentLinks) { item.children('a').children('a').click(function (event) { //Emulate menu close $($this.btn).click(); }); item.find('.'+prefix+'_parent-link a:not(.'+prefix+'_item)').click(function(event){ //Emulate menu close $($this.btn).click(); }); } }); // structure is in place, now hide appropriate items $(items).each(function () { var data = $(this).data('menu'); if (!settings.showChildren){ $this._visibilityToggle(data.children, null, false, null, true); } }); // finally toggle entire menu $this._visibilityToggle($this.mobileNav, null, false, 'init', true); // accessibility for menu button $this.mobileNav.attr('role','menu'); // outline prevention when using mouse $(document).mousedown(function(){ $this._outlines(false); }); $(document).keyup(function(){ $this._outlines(true); }); // menu button click $($this.btn).click(function (e) { e.preventDefault(); $this._menuToggle(); }); // click on menu parent $this.mobileNav.on('click', '.' + prefix + '_item', function (e) { e.preventDefault(); $this._itemClick($(this)); }); // check for keyboard events on menu button and menu parents $($this.btn).keydown(function (e) { var ev = e || event; switch(ev.keyCode) { case Keyboard.ENTER: case Keyboard.SPACE: case Keyboard.DOWN: e.preventDefault(); if (ev.keyCode !== Keyboard.DOWN || !$($this.btn).hasClass(prefix+'_open')){ $this._menuToggle(); } $($this.btn).next().find('[role="menuitem"]').first().focus(); break; } }); $this.mobileNav.on('keydown', '.'+prefix+'_item', function(e) { var ev = e || event; switch(ev.keyCode) { case Keyboard.ENTER: e.preventDefault(); $this._itemClick($(e.target)); break; case Keyboard.RIGHT: e.preventDefault(); if ($(e.target).parent().hasClass(prefix+'_collapsed')) { $this._itemClick($(e.target)); } $(e.target).next().find('[role="menuitem"]').first().focus(); break; } }); $this.mobileNav.on('keydown', '[role="menuitem"]', function(e) { var ev = e || event; switch(ev.keyCode){ case Keyboard.DOWN: e.preventDefault(); var allItems = $(e.target).parent().parent().children().children('[role="menuitem"]:visible'); var idx = allItems.index( e.target ); var nextIdx = idx + 1; if (allItems.length <= nextIdx) { nextIdx = 0; } var next = allItems.eq( nextIdx ); next.focus(); break; case Keyboard.UP: e.preventDefault(); var allItems = $(e.target).parent().parent().children().children('[role="menuitem"]:visible'); var idx = allItems.index( e.target ); var next = allItems.eq( idx - 1 ); next.focus(); break; case Keyboard.LEFT: e.preventDefault(); if ($(e.target).parent().parent().parent().hasClass(prefix+'_open')) { var parent = $(e.target).parent().parent().prev(); parent.focus(); $this._itemClick(parent); } else if ($(e.target).parent().parent().hasClass(prefix+'_nav')){ $this._menuToggle(); $($this.btn).focus(); } break; case Keyboard.ESCAPE: e.preventDefault(); $this._menuToggle(); $($this.btn).focus(); break; } }); // allow links clickable within parent tags if set if (settings.allowParentLinks && settings.nestedParentLinks) { $('.'+prefix+'_item a').click(function(e){ e.stopImmediatePropagation(); }); } }; //toggle menu Plugin.prototype._menuToggle = function (el) { var $this = this; var btn = $this.btn; var mobileNav = $this.mobileNav; if (btn.hasClass(prefix+'_collapsed')) { btn.removeClass(prefix+'_collapsed'); btn.addClass(prefix+'_open'); } else { btn.removeClass(prefix+'_open'); btn.addClass(prefix+'_collapsed'); } btn.addClass(prefix+'_animating'); $this._visibilityToggle(mobileNav, btn.parent(), true, btn); }; // toggle clicked items Plugin.prototype._itemClick = function (el) { var $this = this; var settings = $this.settings; var data = el.data('menu'); if (!data) { data = {}; data.arrow = el.children('.'+prefix+'_arrow'); data.ul = el.next('ul'); data.parent = el.parent(); //Separated parent link structure if (data.parent.hasClass(prefix+'_parent-link')) { data.parent = el.parent().parent(); data.ul = el.parent().next('ul'); } el.data('menu', data); } if (data.parent.hasClass(prefix+'_collapsed')) { data.arrow.html(settings.openedSymbol); data.parent.removeClass(prefix+'_collapsed'); data.parent.addClass(prefix+'_open'); data.parent.addClass(prefix+'_animating'); $this._visibilityToggle(data.ul, data.parent, true, el); } else { data.arrow.html(settings.closedSymbol); data.parent.addClass(prefix+'_collapsed'); data.parent.removeClass(prefix+'_open'); data.parent.addClass(prefix+'_animating'); $this._visibilityToggle(data.ul, data.parent, true, el); } }; // toggle actual visibility and accessibility tags Plugin.prototype._visibilityToggle = function(el, parent, animate, trigger, init) { var $this = this; var settings = $this.settings; var items = $this._getActionItems(el); var duration = 0; if (animate) { duration = settings.duration; } function afterOpen(trigger, parent) { $(trigger).removeClass(prefix+'_animating'); $(parent).removeClass(prefix+'_animating'); //Fire afterOpen callback if (!init) { settings.afterOpen(trigger); } } function afterClose(trigger, parent) { el.attr('aria-hidden','true'); items.attr('tabindex', '-1'); $this._setVisAttr(el, true); el.hide(); //jQuery 1.7 bug fix $(trigger).removeClass(prefix+'_animating'); $(parent).removeClass(prefix+'_animating'); //Fire init or afterClose callback if (!init){ settings.afterClose(trigger); } else if (trigger == 'init'){ settings.init(); } } if (el.hasClass(prefix+'_hidden')) { el.removeClass(prefix+'_hidden'); //Fire beforeOpen callback if (!init) { settings.beforeOpen(trigger); } if (settings.animations === 'jquery') { el.stop(true,true).slideDown(duration, settings.easingOpen, function(){ afterOpen(trigger, parent); }); } else if(settings.animations === 'velocity') { el.velocity("finish").velocity("slideDown", { duration: duration, easing: settings.easingOpen, complete: function() { afterOpen(trigger, parent); } }); } el.attr('aria-hidden','false'); items.attr('tabindex', '0'); $this._setVisAttr(el, false); } else { el.addClass(prefix+'_hidden'); //Fire init or beforeClose callback if (!init){ settings.beforeClose(trigger); } if (settings.animations === 'jquery') { el.stop(true,true).slideUp(duration, this.settings.easingClose, function() { afterClose(trigger, parent) }); } else if (settings.animations === 'velocity') { el.velocity("finish").velocity("slideUp", { duration: duration, easing: settings.easingClose, complete: function() { afterClose(trigger, parent); } }); } } }; // set attributes of element and children based on visibility Plugin.prototype._setVisAttr = function(el, hidden) { var $this = this; // select all parents that aren't hidden var nonHidden = el.children('li').children('ul').not('.'+prefix+'_hidden'); // iterate over all items setting appropriate tags if (!hidden) { nonHidden.each(function(){ var ul = $(this); ul.attr('aria-hidden','false'); var items = $this._getActionItems(ul); items.attr('tabindex', '0'); $this._setVisAttr(ul, hidden); }); } else { nonHidden.each(function(){ var ul = $(this); ul.attr('aria-hidden','true'); var items = $this._getActionItems(ul); items.attr('tabindex', '-1'); $this._setVisAttr(ul, hidden); }); } }; // get all 1st level items that are clickable Plugin.prototype._getActionItems = function(el) { var data = el.data("menu"); if (!data) { data = {}; var items = el.children('li'); var anchors = items.find('a'); data.links = anchors.add(items.find('.'+prefix+'_item')); el.data('menu', data); } return data.links; }; Plugin.prototype._outlines = function(state) { if (!state) { $('.'+prefix+'_item, .'+prefix+'_btn').css('outline','none'); } else { $('.'+prefix+'_item, .'+prefix+'_btn').css('outline',''); } }; Plugin.prototype.toggle = function(){ var $this = this; $this._menuToggle(); }; Plugin.prototype.open = function(){ var $this = this; if ($this.btn.hasClass(prefix+'_collapsed')) { $this._menuToggle(); } }; Plugin.prototype.close = function(){ var $this = this; if ($this.btn.hasClass(prefix+'_open')) { $this._menuToggle(); } }; $.fn[mobileMenu] = function ( options ) { var args = arguments; // Is the first parameter an object (options), or was omitted, instantiate a new instance if (options === undefined || typeof options === 'object') { return this.each(function () { // Only allow the plugin to be instantiated once due to methods if (!$.data(this, 'plugin_' + mobileMenu)) { // if it has no instance, create a new one, pass options to our plugin constructor, // and store the plugin instance in the elements jQuery data object. $.data(this, 'plugin_' + mobileMenu, new Plugin( this, options )); } }); // If is a string and doesn't start with an underscore or 'init' function, treat this as a call to a public method. } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') { // Cache the method call to make it possible to return a value var returns; this.each(function () { var instance = $.data(this, 'plugin_' + mobileMenu); // Tests that there's already a plugin-instance and checks that the requested public method exists if (instance instanceof Plugin && typeof instance[options] === 'function') { // Call the method of our plugin instance, and pass it the supplied arguments. returns = instance[options].apply( instance, Array.prototype.slice.call( args, 1 ) ); } }); // If the earlier cached method gives a value back return the value, otherwise return this to preserve chainability. return returns !== undefined ? returns : this; } }; }(jQuery, document, window));