/* JS Table of Contents:
--------------------------------------------------------------
#1: Line 8: Original JS for menu functionality (plus added resize event)
#2: Line 272: Additional JS for responsive functionality
*/
/* #1: Original JS */
// I've added a resize event to reset the menu when the window is above a certain width (800px here) - line 166
/**
* jquery.dlmenu.js v1.0.1
* http://www.codrops.com
*
* Licensed under the MIT license.
* https://www.opensource.org/licenses/mit-license.php
*
* Copyright 2013, Codrops
* http://www.codrops.com
*/
(function($, window, undefined) {
"use strict";
// global
var Modernizr = window.Modernizr,
$body = $("body");
$.DLMenu = function(options, element) {
this.$el = $(element);
this._init(options);
};
// the options
$.DLMenu.defaults = {
// classes for the animation effects
animationClasses: {
classin: "dl-animate-in-1",
classout: "dl-animate-out-1"
},
// callback: click a link that has a sub menu
// el is the link element (li); name is the level name
onLevelClick: function(el, name) {
return false;
},
// callback: click a link that does not have a sub menu
// el is the link element (li); ev is the event obj
onLinkClick: function(el, ev) {
return false;
}
};
$.DLMenu.prototype = {
_init: function(options) {
// options
this.options = $.extend(true, {}, $.DLMenu.defaults, options);
// cache some elements and initialize some variables
this._config();
var animEndEventNames = {
WebkitAnimation: "webkitAnimationEnd",
OAnimation: "oAnimationEnd",
msAnimation: "MSAnimationEnd",
animation: "animationend"
},
transEndEventNames = {
WebkitTransition: "webkitTransitionEnd",
MozTransition: "transitionend",
OTransition: "oTransitionEnd",
msTransition: "MSTransitionEnd",
transition: "transitionend"
};
// animation end event name
this.animEndEventName =
animEndEventNames[Modernizr.prefixed("animation")] + ".dlmenu";
// transition end event name
(this.transEndEventName =
transEndEventNames[Modernizr.prefixed("transition")] + ".dlmenu"),
// support for css animations and css transitions
(this.supportAnimations = Modernizr.cssanimations),
(this.supportTransitions = Modernizr.csstransitions);
this._initEvents();
},
_config: function() {
this.open = false;
this.$trigger = this.$el.children(".dl-trigger");
this.$menu = this.$el.children("ul.dl-menu");
this.$menuitems = this.$menu.find("li:not(.dl-back)");
this.$el
.find("ul.dl-submenu")
.prepend('<li class="dl-back"><a href="#">back</a></li>');
this.$back = this.$menu.find("li.dl-back");
this.mobileBreakpoint = 800;
},
_initEvents: function() {
var self = this;
this.$trigger.on("click.dlmenu", function() {
if (self.open) {
self._closeMenu();
} else {
self._openMenu();
}
return false;
});
this.$menuitems.on("click.dlmenu", function(event) {
event.stopPropagation();
var $item = $(this),
$submenu = $item.children("ul.dl-submenu");
if ($submenu.length > 0) {
var $flyin = $submenu
.clone()
.css("opacity", 0)
.insertAfter(self.$menu),
onAnimationEndFn = function() {
self.$menu
.off(self.animEndEventName)
.removeClass(self.options.animationClasses.classout)
.addClass("dl-subview");
$item
.addClass("dl-subviewopen")
.parents(".dl-subviewopen:first")
.removeClass("dl-subviewopen")
.addClass("dl-subview");
$flyin.remove();
};
setTimeout(function() {
$flyin.addClass(self.options.animationClasses.classin);
self.$menu.addClass(self.options.animationClasses.classout);
if (self.supportAnimations) {
self.$menu.on(self.animEndEventName, onAnimationEndFn);
} else {
onAnimationEndFn.call();
}
self.options.onLevelClick($item, $item.children("a:first").text());
});
return false;
} else {
self.options.onLinkClick($item, event);
}
});
this.$back.on("click.dlmenu", function(event) {
var $this = $(this),
$submenu = $this.parents("ul.dl-submenu:first"),
$item = $submenu.parent(),
$flyin = $submenu.clone().insertAfter(self.$menu);
var onAnimationEndFn = function() {
self.$menu
.off(self.animEndEventName)
.removeClass(self.options.animationClasses.classin);
$flyin.remove();
};
setTimeout(function() {
$flyin.addClass(self.options.animationClasses.classout);
self.$menu.addClass(self.options.animationClasses.classin);
if (self.supportAnimations) {
self.$menu.on(self.animEndEventName, onAnimationEndFn);
} else {
onAnimationEndFn.call();
}
$item.removeClass("dl-subviewopen");
var $subview = $this.parents(".dl-subview:first");
if ($subview.is("li")) {
$subview.addClass("dl-subviewopen");
}
$subview.removeClass("dl-subview");
});
return false;
});
// the only piece added to the original - resets the menu when the browser is greater than a certain width
$(window).resize(function() {
if ($(window).width() > self.mobileBreakpoint) {
self._resetMenu();
}
});
},
closeMenu: function() {
if (this.open) {
this._closeMenu();
}
},
_closeMenu: function() {
var self = this,
onTransitionEndFn = function() {
self.$menu.off(self.transEndEventName);
self._resetMenu();
};
this.$menu.removeClass("dl-menuopen");
this.$menu.addClass("dl-menu-toggle");
this.$trigger.removeClass("dl-active");
if (this.supportTransitions) {
this.$menu.on(this.transEndEventName, onTransitionEndFn);
} else {
onTransitionEndFn.call();
}
this.open = false;
},
openMenu: function() {
if (!this.open) {
this._openMenu();
}
},
_openMenu: function() {
var self = this;
// clicking somewhere else makes the menu close
$body.off("click").on("click.dlmenu", function() {
self._closeMenu();
});
this.$menu
.addClass("dl-menuopen dl-menu-toggle")
.on(this.transEndEventName, function() {
$(this).removeClass("dl-menu-toggle");
});
this.$trigger.addClass("dl-active");
this.open = true;
},
// resets the menu to its original state (first level of options)
_resetMenu: function() {
this.$menu.removeClass("dl-subview");
this.$menuitems.removeClass("dl-subview dl-subviewopen");
}
};
var logError = function(message) {
if (window.console) {
window.console.error(message);
}
};
$.fn.dlmenu = function(options) {
if (typeof options === "string") {
var args = Array.prototype.slice.call(arguments, 1);
this.each(function() {
var instance = $.data(this, "dlmenu");
if (!instance) {
logError(
"cannot call methods on dlmenu prior to initialization; " +
"attempted to call method '" +
options +
"'"
);
return;
}
if (!$.isFunction(instance[options]) || options.charAt(0) === "_") {
logError("no such method '" + options + "' for dlmenu instance");
return;
}
instance[options].apply(instance, args);
});
} else {
this.each(function() {
var instance = $.data(this, "dlmenu");
if (instance) {
instance._init();
} else {
instance = $.data(this, "dlmenu", new $.DLMenu(options, this));
}
});
}
return this;
};
})(jQuery, window);
/* #2: javascript added for responsive functionality: mix of jquery and plain js (already had the plain js written for another site)
-------------------------------------------------------------- */
$(function() {
var mobileBreakpoint = 800;
duplicateParentofSubs(createDLMenu);
function createDLMenu() {
$("#dl-menu").dlmenu({
animationClasses: {
classin: "dl-animate-in-2",
classout: "dl-animate-out-2"
}
});
determineNav();
}
function determineNav() {
var winWidth = $(window).width(),
dlMenu = $(".nav-main"),
dlSubList = $(".nav-sub-list"),
dlSubSub = $(".nav-sub-sub");
removeDLInfo();
addDLInfo();
$(window).resize(function() {
winWidth = $(window).width();
removeDLInfo();
addDLInfo();
});
function removeDLInfo() {
if (winWidth > mobileBreakpoint) {
if (dlMenu.hasClass("dl-menuwrapper")) {
dlMenu.removeClass("dl-menuwrapper").attr("id", "");
dlSubList.removeClass("dl-submenu");
dlSubSub.removeClass("dl-submenu");
}
}
}
function addDLInfo() {
if (winWidth <= mobileBreakpoint) {
if (!dlMenu.hasClass("dl-menuwrapper")) {
dlMenu.addClass("dl-menuwrapper").attr("id", "dl-menu");
dlSubList.addClass("dl-submenu");
dlSubSub.addClass("dl-submenu");
}
}
}
}
function duplicateParentofSubs(callback) {
var navSub = document.getElementsByClassName("dl-submenu"),
mainNavItem = null,
mainNavItemLink = null,
winWidth = viewport(),
addItems = true;
checkWidth();
window.onresize = checkWidth;
callback();
function viewport() {
var e = window,
a = "inner";
if (!("innerWidth" in window)) {
a = "client";
e = document.documentElement || document.body;
}
return { width: e[a + "Width"] };
}
function checkWidth() {
winWidth = viewport().width;
for (i = 0; i < navSub.length; i++) {
mainNavItem = navSub[i].parentNode;
mainNavItemLink = mainNavItem.getElementsByTagName("a")[0];
if (addItems) {
clonedItems(mainNavItem, false);
}
if (winWidth <= mobileBreakpoint) {
mainNavItemLink.onclick = function(event) {
event.preventDefault();
};
} else {
mainNavItemLink.onclick = function() {
return true;
};
}
}
addItems = false;
}
function clonedItems(mainListItem) {
var subNavItem = mainListItem.cloneNode(false),
subNavItemLink = mainListItem.children[0].cloneNode(true),
subNav = mainListItem.children[1];
subNavItem.appendChild(subNavItemLink);
subNav.insertBefore(subNavItem, subNav.children[0]);
subNavItem.setAttribute("class", "nav-sub-item mobile-main-item");
}
}
});
!
