Skip to content

MSF / msf-climate-hub

Go to a project
Toggle navigation
Toggle navigation pinning
12f15267 by Jeff Balicki
Options

mobile menu working 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 05bdb5e2
Inline Side-by-side
Showing 14 changed files with 1246 additions and 232 deletions
......@@ -14985,19 +14985,18 @@ body {
font-family: "PT Sans", sans-serif;
}
#mega-menu-wrap-primary {
@media only screen and (min-width: 1000px) {
#mega-menu-wrap-primary {
width: 100%;
}
#mega-menu-primary {
}
#mega-menu-primary {
width: 100%;
display: flex !important;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
width: 24%;
color: #fff;
background-color: #EE0000;
......@@ -15008,17 +15007,15 @@ body {
font-size: 18px;
position: relative;
font-family: "PT Sans", sans-serif;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
width: 100%;
text-align: center;
font-family: "PT Sans", sans-serif;
font-size: 18px;
height: 2.5rem;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-item-has-children > a.mega-menu-link:before {
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-item-has-children > a.mega-menu-link:before {
content: "";
width: 13px;
height: 0.4831rem;
......@@ -15029,51 +15026,42 @@ body {
margin-top: 15px;
display: inline-block;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12.742" height="7.726" viewBox="0 0 12.742 7.726"><path id="Path_1491" data-name="Path 1491" d="M6.383,4.709c.442-.447.875-.89,1.313-1.328Q9.274,1.8,10.855.231a.708.708,0,0,1,1.047,0c.2.206.405.407.608.61a.694.694,0,0,1,0,1.038L9.667,4.721,6.913,7.48a.768.768,0,0,1-.515.246.734.734,0,0,1-.567-.245Q4.769,6.415,3.706,5.349L.812,2.454c-.2-.2-.395-.393-.591-.591A.69.69,0,0,1,.228.844l.6-.6a.708.708,0,0,1,1.062,0L4.456,2.792,6.311,4.64Z" transform="translate(0 0)" fill="%23fff"/></svg>');
}
.mega-indicator {
}
.mega-indicator {
display: none !important;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
background-color: #669999;
border-radius: 1.25rem 1.25rem 0rem 0rem;
height: 3.75rem;
margin-top: 0rem;
margin-bottom: -1.25rem;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
margin-top: 17px;
padding: 20px 28px 20px 20px;
background-color: #f0f0f0;
border-radius: 0rem 0rem 1.25rem 1.25rem;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:nth-child(2) > ul.mega-sub-menu {
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:nth-child(2) > ul.mega-sub-menu {
left: unset !important;
}
.mega-sub-menu:has(.mega-menu-columns-4-of-12) {
}
.mega-sub-menu:has(.mega-menu-columns-4-of-12) {
width: 75% !important;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:nth-child(4) > ul.mega-sub-menu {
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:nth-child(4) > ul.mega-sub-menu {
left: unset !important;
right: 0px !important;
}
.mega-menu-row .mega-sub-menu,
.mega-menu-column .mega-sub-menu {
}
.mega-menu-row .mega-sub-menu,
.mega-menu-column .mega-sub-menu {
width: 100% !important;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
margin: 0;
padding: 0px 15px 18px 10px;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
margin: 0;
color: #000;
text-decoration: none;
......@@ -15082,30 +15070,152 @@ body {
font-weight: 400;
font-family: "PT Sans", sans-serif;
font-weight: bold;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover .mega-menu-title {
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover .mega-menu-title {
text-decoration: underline;
font-weight: bold;
color: #000;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover .mega-menu-description {
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover .mega-menu-description {
color: #000;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item.break-here > a.mega-menu-link {
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item.break-here > a.mega-menu-link {
font-size: 20px;
font-family: "PT Sans", sans-serif;
}
#mega-menu-wrap-primary #mega-menu-primary a.mega-menu-link .mega-description-group .mega-menu-description {
}
#mega-menu-wrap-primary #mega-menu-primary a.mega-menu-link .mega-description-group .mega-menu-description {
font-style: normal;
font-size: 16px;
line-height: 20px;
font-family: "PT Sans", sans-serif;
}
.list-wrapper2,
.list-wrapper3 {
display: none;
}
}
@media only screen and (max-width: 1000px) {
#mega-menu-primary {
margin-top: 60px !important;
padding-top: 20px !important;
padding-bottom: 100px !important;
overflow-x: scroll !important;
height: calc(100vh - 80px) !important;
}
#mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open:after {
display: none !important;
}
#mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
width: 100%;
max-width: 100%;
padding: 0px 10%;
margin: auto;
}
#mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
left: -100%;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu {
margin-top: 0px;
}
.sub-mobile-menu .mega-menu-item {
margin-top: 15px !important;
}
.sub-mobile-menu .mega-indicator {
margin-top: -50px !important;
position: relative !important;
margin-right: 0px !important;
width: 30px !important;
}
.sub-mobile-menu .mega-indicator:after {
margin-right: 0px !important;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link {
margin-left: 20px;
color: #555;
font-family: inherit;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
text-align: left;
vertical-align: top;
display: block;
border: 0;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
width: 100%;
margin: 10px auto 0px auto;
color: #fff;
background-color: #EE0000;
border-radius: 1.25rem;
text-align: center;
height: 2.5rem;
margin-top: 0rem;
font-size: 18px;
position: relative;
font-family: "PT Sans", sans-serif;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
width: 100%;
margin: 10px auto 0px auto !important;
color: #fff;
background-color: #EE0000;
border-radius: 1.25rem;
text-align: center !important;
height: 2.5rem;
font-size: 18px;
position: relative;
font-family: "PT Sans", sans-serif;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
width: 100%;
margin: 10px auto 0px auto !important;
color: #fff;
background-color: #EE0000;
border-radius: 1.25rem;
text-align: center !important;
height: 2.5rem;
font-size: 18px;
position: relative;
font-family: "PT Sans", sans-serif;
}
.sub-menu-wrapper {
background-color: #fff;
width: 100% !important;
padding: 0px 10% !important;
margin: auto !important;
float: none !important;
}
}
@media only screen and (max-width: 1000px) {
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu, #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu.mega-menu-item.mega-toggle-on ul.mega-sub-menu {
display: none !important;
}
.list-wrapper2 ul.mega-sub-menu,
.list-wrapper3 ul.mega-sub-menu {
display: block !important;
}
.list-wrapper2,
.list-wrapper3 {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 100vh !important;
transform: translateX(100%) !important;
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
transition: transform 0.5s !important;
background-color: #fff !important;
}
.list-wrapper2.is-visible,
.list-wrapper3.is-visible {
transform: none !important;
}
.mega-menu-item .list-wrapper:nth-child(1) > ul > li > .sub-menu {
display: none;
}
}
.site-title {
font-size: 2.1875rem;
line-height: 3.125rem;
......@@ -15137,6 +15247,17 @@ body {
margin-bottom: 10px;
}
@media only screen and (max-width: 1000px) {
.branding {
margin-top: 0px;
}
.site-title {
font-size: 20px;
}
.navbar-brand {
width: 100px;
}
}
#search-wrapper {
margin-top: 1rem;
padding-top: 3rem;
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
......@@ -104,3 +104,10 @@ function megamenu_override_default_theme($value) {
}
add_filter('default_option_megamenu_settings', 'megamenu_override_default_theme');
function fixUlisting() {
wp_deregister_script( 'megamenu' );
wp_dequeue_script( 'megamenu' );
wp_enqueue_script( 'megamenu', get_stylesheet_directory_uri().'/js/maxmegamenu.js' );
}
add_action( 'wp_enqueue_scripts', 'fixUlisting', 100 );
\ No newline at end of file
......
......@@ -4,10 +4,10 @@
* Licensed under GPL-3.0 (undefined)
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('jquery')) :
typeof define === 'function' && define.amd ? define(['exports', 'jquery'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.understrap = {}, global.jQuery));
})(this, (function (exports, jquery) { 'use strict';
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.understrap = {}));
})(this, (function (exports) { 'use strict';
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
......@@ -6743,183 +6743,78 @@
}
})();
var Responsive = function ($) {
// $('.play-pause-btn').on('click', function() {
// if(!this.isDesktop()) {
// $(this).hide();
// $(this).parents('.swiper-wrapper').find('.header-video').trigger('play');
// }
// });
var desk = window.matchMedia("(min-width: 1150px)");
function isDesktop() {
return desk.matches;
}
function toggleMobileMenu() {
$('#navbarNavDropdown').toggleClass('show');
$('.navbar-toggler').toggleClass('active');
if ($('#navbarNavDropdown').hasClass('show')) {
$('body').addClass('locked');
} else {
$('body').removeClass('locked');
}
}
$(document).on('click', '.navbar-toggler', function () {
toggleMobileMenu();
});
$.fn.classChange = function (cb) {
return $(this).each((_, el) => {
new MutationObserver(mutations => {
mutations.forEach(mutation => cb && cb(mutation.target, $(mutation.target).prop(mutation.attributeName)));
}).observe(el, {
attributes: true,
attributeFilter: ['class'] // only listen for class attribute changes
});
});
};
function init() {
$('body').classChange(function (el, new_class) {
if (new_class.indexOf('pojo-a11y-resize-font-130') !== -1) {
setTimeout(function () {
$(window).trigger('resize');
}, 500);
}
});
function putBackMenuItemsToLastIndex() {
$('.mi-image-container').each(function () {
var item = $(this).parentsUntil('.menu-item');
var last_idx = $(item).data('last-idx');
var cur_idx = $(item).index();
console.log(last_idx + " " + cur_idx);
if (last_idx != cur_idx) {
var item = $(this).parents('.menu-item')[0];
var dropdown = $(this).parents('.dropdown-menu');
$(dropdown).children().eq(last_idx).before(item);
}
});
}
function makeImageMenuItemsLastItems() {
$('.mi-image-container').each(function () {
var item = $(this).parents('.menu-item')[0];
if (last_idx != 1) {
var dropdown = $(this).parents('.dropdown-menu');
var last_idx = $(dropdown).find('li').index(item);
$(item).data('last-idx', last_idx);
$(dropdown).append(item);
}
});
}
function setupDropdownMenuHeights() {
$('.dropdown-menu').each(function () {
$(this).css('height', $(this).height() + 5);
$(this).addClass('ready');
});
}
function makeMobileCarousels() {
LegacyCalc.mobilize();
ImageCollage.mobilize();
}
function demobilize() {
$('.donate.menu-item').append($('#main-nav .donate-btn'));
$('.navbar-toggler').after($('#navbarNavDropdown'));
$('.news-and-stories-block').each(function () {
var btn = $(this).find('.post-list-load-more');
$(this).append(btn);
});
// HeaderMenu.alignTheSideCaptions();
putBackMenuItemsToLastIndex();
// demobilizeJobIframes();
if ($('.menu-item-11505').length > 0) {
$('.menu-item-11503').parents('.dropdown-menu').find('li:last-of-type').before($('.menu-item-11503'));
$('.menu-item-11505').parents('.dropdown-menu').find('li:last-of-type').before($('.menu-item-11505'));
}
if ($('.menu-item-15438').length > 0) {
$('.menu-item-15438').parents('.dropdown-menu').find('li:last-of-type').before($('.menu-item-15438'));
$('.menu-item-15442').parents('.dropdown-menu').find('li:last-of-type').before($('.menu-item-15442'));
}
}
function mobilize() {
var donate_btn = $('#main-menu .donate > a');
if (!$(donate_btn).hasClass('donate-btn')) {
$(donate_btn).addClass('donate-btn');
// Add your custom JS here.
//import "./_header_menu";
var addstuff = '<div class="list-wrapper2 list-wrapper"><button type="button" class="back-one-level"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg><span>Back</span></button><div class="sub-menu-wrapper"></div></div><div class="list-wrapper3 list-wrapper"><button type="button" class="back-one-level"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg><span>Back</span></button><div class="sub-menu-wrapper"></div></div>';
const pageHeader = document.querySelector("#main-nav");
const toggleMenu = pageHeader.querySelector(".mega-toggle-block");
const menuWrapper = pageHeader.querySelector("#mega-menu-primary");
menuWrapper.innerHTML = menuWrapper.innerHTML + addstuff;
const level1Links = pageHeader.querySelectorAll("li.mega-menu-item-has-children > a.mega-menu-link");
const listWrapper2 = pageHeader.querySelector(".list-wrapper2");
const listWrapper3 = pageHeader.querySelector(".list-wrapper3");
const subMenuWrapper2 = listWrapper2.querySelector(".sub-menu-wrapper");
const subMenuWrapper3 = listWrapper3.querySelector(".sub-menu-wrapper");
const backOneLevelBtns = pageHeader.querySelectorAll(".back-one-level");
const isVisibleClass = "is-visible";
const isActiveClass = "is-active";
toggleMenu.addEventListener("click", function () {
menuWrapper.classList.toggle(isVisibleClass);
if (!this.classList.contains(isVisibleClass)) {
listWrapper2.classList.remove(isVisibleClass);
listWrapper3.classList.remove(isVisibleClass);
const menuLinks = menuWrapper.querySelectorAll("a");
for (const menuLink of menuLinks) {
menuLink.classList.remove(isActiveClass);
}
}
});
for (const level1Link of level1Links) {
level1Link.addEventListener("click", function (e) {
const siblingList = level1Link.nextElementSibling;
console.log('clicked level1Links');
if (siblingList) {
e.preventDefault();
this.classList.add(isActiveClass);
const cloneSiblingList = siblingList.cloneNode(true);
subMenuWrapper2.innerHTML = "";
subMenuWrapper2.append(cloneSiblingList);
listWrapper2.classList.add(isVisibleClass);
}
$('#main-nav .container').append(donate_btn);
$('#wrapper-navbar').append($('#navbarNavDropdown'));
$('.news-and-stories-block').each(function () {
var btn = $(this).find('.post-list-load-more');
$(this).prepend(btn);
});
// HeaderMenu.alignTheSideCaptions();
makeMobileCarousels();
makeImageMenuItemsLastItems();
setupDropdownMenuHeights();
if ($('.menu-item-11505').length > 0) {
$('.menu-item-11505').parents('.dropdown-menu').prepend($('.menu-item-11505'));
$('.menu-item-11503').parents('.dropdown-menu').prepend($('.menu-item-11503'));
}
if ($('.menu-item-15438').length > 0) {
$('.menu-item-15442').parents('.dropdown-menu').prepend($('.menu-item-15442'));
$('.menu-item-15438').parents('.dropdown-menu').prepend($('.menu-item-15438'));
}
}
desk.addEventListener('change', event => {
if (event.matches) {
demobilize();
} else {
mobilize();
listWrapper2.addEventListener("click", function (e) {
const target = e.target;
const parent = target.closest("a");
if (target.tagName.toLowerCase() === "a" && target.nextElementSibling) {
const siblingList = target.nextElementSibling;
e.preventDefault();
target.classList.add(isActiveClass);
const cloneSiblingList = siblingList.cloneNode(true);
subMenuWrapper3.innerHTML = "";
subMenuWrapper3.append(cloneSiblingList);
listWrapper3.classList.add(isVisibleClass);
} else if (parent.tagName.toLowerCase() === "a" && parent.nextElementSibling) {
const siblingList = parent.nextElementSibling;
e.preventDefault();
parent.classList.add(isActiveClass);
const cloneSiblingList = siblingList.cloneNode(true);
subMenuWrapper3.innerHTML = "";
subMenuWrapper3.append(cloneSiblingList);
listWrapper3.classList.add(isVisibleClass);
}
});
if (desk.matches) ; else {
mobilize();
}
}
return {
init: init,
isDesktop: isDesktop
};
}(jquery);
jquery(document).ready(Responsive.init);
var HeaderMenu = function () {
return {
alignTheSideCaptions: function () {
jQuery('.side-caption').each(function () {
var that = this;
var _bottom = jQuery(this).find('.image-side-caption').innerHeight();
if (!Responsive.isDesktop()) {
if (jQuery(that).parent().is('.entry-header') && !jQuery(that).parent().is('.no-photo')) {
jQuery(that).css('margin-bottom', -_bottom);
var _bottom = jQuery(that).parent().find('.title-container').innerHeight();
jQuery(that).css('bottom', _bottom);
setTimeout(function () {
jQuery(that).addClass('ready');
}, 500);
} else {
jQuery(that).css('bottom', -_bottom);
setTimeout(function () {
jQuery(that).addClass('ready');
}, 500);
}
} else {
jQuery(this).css('bottom', -_bottom);
setTimeout(function () {
jQuery(that).addClass('ready');
}, 500);
}
for (const backOneLevelBtn of backOneLevelBtns) {
backOneLevelBtn.addEventListener("click", function () {
const parent = this.closest(".list-wrapper");
parent.classList.remove(isVisibleClass);
// parent.previousElementSibling
// .querySelector(".is-active")
// .classList.remove(isActiveClass);
});
}
};
}();
jQuery(function ($) {
setInterval(function () {
HeaderMenu.alignTheSideCaptions();
}, 1000);
$('.copy-link').on('click', function (e) {
e.preventDefault();
});
});
exports.Alert = alert;
exports.Button = button;
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
/*jslint browser: true, white: true, this: true, long: true */
/*global console,jQuery,megamenu,window,navigator*/
/*! Max Mega Menu jQuery Plugin */
(function ( $ ) {
"use strict";
$.maxmegamenu = function(menu, options) {
var plugin = this;
var $menu = $(menu);
var $toggle_bar = $menu.siblings(".mega-menu-toggle");
var html_body_class_timeout;
var defaults = {
event: $menu.attr("data-event"),
effect: $menu.attr("data-effect"),
effect_speed: parseInt($menu.attr("data-effect-speed")),
effect_mobile: $menu.attr("data-effect-mobile"),
effect_speed_mobile: parseInt($menu.attr("data-effect-speed-mobile")),
panel_width: $menu.attr("data-panel-width"),
panel_inner_width: $menu.attr("data-panel-inner-width"),
mobile_force_width: $menu.attr("data-mobile-force-width"),
mobile_overlay: $menu.attr("data-mobile-overlay"),
mobile_state: $menu.attr("data-mobile-state"),
second_click: $menu.attr("data-second-click"),
vertical_behaviour: $menu.attr("data-vertical-behaviour"),
document_click: $menu.attr("data-document-click"),
breakpoint: $menu.attr("data-breakpoint"),
unbind_events: $menu.attr("data-unbind"),
hover_intent_timeout: $menu.attr("data-hover-intent-timeout"),
hover_intent_interval: $menu.attr("data-hover-intent-interval")
};
plugin.settings = {};
var items_with_submenus = $("li.mega-menu-megamenu.mega-menu-item-has-children," +
"li.mega-menu-flyout.mega-menu-item-has-children," +
"li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item-has-children," +
"li.mega-menu-flyout li.mega-menu-item-has-children", menu);
var collapse_children_parents = $("li.mega-menu-megamenu li.mega-menu-item-has-children.mega-collapse-children > a.mega-menu-link", menu);
plugin.addAnimatingClass = function(element) {
if (plugin.settings.effect === "disabled") {
return;
}
$(".mega-animating").removeClass("mega-animating");
var timeout = plugin.settings.effect_speed + parseInt(megamenu.timeout, 10);
element.addClass("mega-animating");
setTimeout(function() {
element.removeClass("mega-animating");
}, timeout );
};
plugin.hideAllPanels = function() {
$(".mega-toggle-on > a.mega-menu-link", $menu).each(function() {
plugin.hidePanel($(this), false);
});
};
plugin.expandMobileSubMenus = function() {
$(".mega-menu-item-has-children.mega-expand-on-mobile > a.mega-menu-link", $menu).each(function() {
plugin.showPanel($(this));
});
if ( plugin.settings.mobile_state == 'expand_all' ) {
$(".mega-menu-item-has-children > a.mega-menu-link", $menu).each(function() {
plugin.showPanel($(this));
});
}
if ( plugin.settings.mobile_state == 'expand_active' ) {
$("li.mega-current-menu-ancestor.mega-menu-item-has-children > a.mega-menu-link," +
"li.mega-current-menu-item.mega-menu-item-has-children > a.mega-menu-link" +
"li.mega-current-menu-parent.mega-menu-item-has-children > a.mega-menu-link" +
"li.mega-current_page_ancestor.mega-menu-item-has-children > a.mega-menu-link" +
"li.mega-current_page_item.mega-menu-item-has-children > a.mega-menu-link", $menu).each(function() {
plugin.showPanel($(this));
});
}
}
plugin.hideSiblingPanels = function(anchor, immediate) {
anchor.parent().parent().find(".mega-toggle-on").children("a.mega-menu-link").each(function() { // all open children of open siblings
plugin.hidePanel($(this), immediate);
});
};
plugin.isDesktopView = function() {
return Math.max(window.outerWidth, $(window).width()) > plugin.settings.breakpoint; // account for scrollbars
};
plugin.isMobileView = function() {
return !plugin.isDesktopView();
};
plugin.showPanel = function(anchor) {
if ( anchor.is("li.mega-menu-item") ) {
anchor = anchor.find("a.mega-menu-link").first();
}
anchor.parent().triggerHandler("before_open_panel");
anchor.parent().find("[aria-expanded]").first().attr("aria-expanded", "true");
$(".mega-animating").removeClass("mega-animating");
if (plugin.isMobileView() && anchor.parent().hasClass("mega-hide-sub-menu-on-mobile")) {
return;
}
if (plugin.isDesktopView() && ( $menu.hasClass("mega-menu-horizontal") || $menu.hasClass("mega-menu-vertical") ) && !anchor.parent().hasClass("mega-collapse-children")) {
plugin.hideSiblingPanels(anchor, true);
}
if ((plugin.isMobileView() && $menu.hasClass("mega-keyboard-navigation")) || plugin.settings.vertical_behaviour === "accordion") {
plugin.hideSiblingPanels(anchor, false);
}
plugin.calculateDynamicSubmenuWidths(anchor);
// apply jQuery transition (only if the effect is set to "slide", other transitions are CSS based)
if ( anchor.parent().hasClass("mega-collapse-children") || plugin.settings.effect === "slide" ||
( plugin.isMobileView() && ( plugin.settings.effect_mobile === "slide" || plugin.settings.effect_mobile === "slide_left" || plugin.settings.effect_mobile === "slide_right" ) )
) {
var speed = plugin.isMobileView() ? plugin.settings.effect_speed_mobile : plugin.settings.effect_speed;
anchor.siblings(".mega-sub-menu").css("display", "none").animate({"height":"show", "paddingTop":"show", "paddingBottom":"show", "minHeight":"show"}, speed, function() {
$(this).css("display", "");
});
}
anchor.parent().addClass("mega-toggle-on").triggerHandler("open_panel");
};
plugin.hidePanel = function(anchor, immediate) {
if ( anchor.is("li.mega-menu-item") ) {
anchor = anchor.find("a.mega-menu-link").first();
}
anchor.parent().triggerHandler("before_close_panel");
anchor.parent().find("[aria-expanded]").first().attr("aria-expanded", "false");
if ( anchor.parent().hasClass("mega-collapse-children") || ( ! immediate && plugin.settings.effect === "slide" ) ||
( plugin.isMobileView() && ( plugin.settings.effect_mobile === "slide" || plugin.settings.effect_mobile === "slide_left" || plugin.settings.effect_mobile === "slide_right" ) )
) {
var speed = plugin.isMobileView() ? plugin.settings.effect_speed_mobile : plugin.settings.effect_speed;
anchor.siblings(".mega-sub-menu").animate({"height":"hide", "paddingTop":"hide", "paddingBottom":"hide", "minHeight":"hide"}, speed, function() {
anchor.siblings(".mega-sub-menu").css("display", "");
anchor.parent().removeClass("mega-toggle-on").triggerHandler("close_panel");
});
return;
}
if (immediate) {
anchor.siblings(".mega-sub-menu").css("display", "none").delay(plugin.settings.effect_speed).queue(function(){
$(this).css("display", "").dequeue();
});
}
// pause video widget videos
anchor.siblings(".mega-sub-menu").find(".widget_media_video video").each(function() {
this.player.pause();
});
anchor.parent().removeClass("mega-toggle-on").triggerHandler("close_panel");
plugin.addAnimatingClass(anchor.parent());
};
plugin.calculateDynamicSubmenuWidths = function(anchor) {
// apply dynamic width and sub menu position (only to top level mega menus)
if (anchor.parent().hasClass("mega-menu-megamenu") && anchor.parent().parent().hasClass("max-mega-menu") && plugin.settings.panel_width && $(plugin.settings.panel_width).length > 0) {
if (plugin.isDesktopView()) {
var submenu_offset = $menu.offset();
var target_offset = $(plugin.settings.panel_width).offset();
anchor.siblings(".mega-sub-menu").css({
width: $(plugin.settings.panel_width).outerWidth(),
left: (target_offset.left - submenu_offset.left) + "px"
});
} else {
anchor.siblings(".mega-sub-menu").css({
width: "",
left: ""
});
}
}
// apply inner width to sub menu by adding padding to the left and right of the mega menu
if (anchor.parent().hasClass("mega-menu-megamenu") && anchor.parent().parent().hasClass("max-mega-menu") && plugin.settings.panel_inner_width && $(plugin.settings.panel_inner_width).length > 0) {
var target_width = 0;
if ($(plugin.settings.panel_inner_width).length) {
// jQuery selector
target_width = parseInt($(plugin.settings.panel_inner_width).width(), 10);
} else {
// we"re using a pixel width
target_width = parseInt(plugin.settings.panel_inner_width, 10);
}
var submenu_width = parseInt(anchor.siblings(".mega-sub-menu").innerWidth(), 10);
if (plugin.isDesktopView() && target_width > 0 && target_width < submenu_width) {
anchor.siblings(".mega-sub-menu").css({
"paddingLeft": (submenu_width - target_width) / 2 + "px",
"paddingRight": (submenu_width - target_width) / 2 + "px"
});
} else {
anchor.siblings(".mega-sub-menu").css({
"paddingLeft": "",
"paddingRight": ""
});
}
}
};
plugin.bindClickEvents = function() {
var dragging = false;
$(document).on({
"touchmove": function(e) { dragging = true; },
"touchstart": function(e) { dragging = false; }
});
// $(document).on("click touchend", function(e) { // hide menu when clicked away from
// if (!dragging && plugin.settings.document_click === "collapse" && ! $(e.target).closest(".max-mega-menu li").length && ! $(e.target).closest(".mega-menu-toggle").length ) {
// plugin.hideAllPanels();
// plugin.hideMobileMenu();
// }
// dragging = false;
// });
var clickable_parents = $("> a.mega-menu-link", items_with_submenus).add(collapse_children_parents);
clickable_parents.on("touchend.megamenu", function(e) {
if (plugin.settings.event === "hover_intent") {
plugin.unbindHoverIntentEvents();
}
if (plugin.settings.event === "hover") {
plugin.unbindHoverEvents();
}
});
clickable_parents.not("[data-has-click-event]").on("click.megamenu", function(e) {
if ( $menu.parent().hasClass("mega-keyboard-navigation") ) {
return;
}
if (plugin.isDesktopView() && $(this).parent().hasClass("mega-toggle-on") && $(this).closest("ul.mega-sub-menu").parent().hasClass("mega-menu-tabbed") ) {
if (plugin.settings.second_click === "go") {
return;
} else {
e.preventDefault();
return;
}
}
if (dragging) {
return;
}
if (plugin.isMobileView() && $(this).parent().hasClass("mega-hide-sub-menu-on-mobile")) {
return; // allow all clicks on parent items when sub menu is hidden on mobile
}
if ((plugin.settings.second_click === "go" || $(this).parent().hasClass("mega-click-click-go")) && $(this).attr("href") !== undefined) { // check for second click
if (!$(this).parent().hasClass("mega-toggle-on")) {
e.preventDefault();
plugin.showPanel($(this));
}
} else {
e.preventDefault();
if ($(this).parent().hasClass("mega-toggle-on")) {
plugin.hidePanel($(this), false);
} else {
plugin.showPanel($(this));
}
}
});
collapse_children_parents.each(function() {
$(this).attr("data-has-click-event", "true");
});
if ( plugin.settings.second_click === "disabled" ) {
clickable_parents.off("click.megamenu");
}
$(".mega-close-after-click:not(.mega-menu-item-has-children) > a.mega-menu-link", menu).on("click", function() {
plugin.hideAllPanels();
plugin.hideMobileMenu();
});
};
plugin.bindHoverEvents = function() {
items_with_submenus.on({
"mouseenter.megamenu" : function() {
plugin.unbindClickEvents();
if (! $(this).hasClass("mega-toggle-on")) {
plugin.showPanel($(this).children("a.mega-menu-link"));
}
},
"mouseleave.megamenu" : function() {
if ($(this).hasClass("mega-toggle-on") && ! $(this).hasClass("mega-disable-collapse") && ! $(this).parent().parent().hasClass("mega-menu-tabbed")) {
plugin.hidePanel($(this).children("a.mega-menu-link"), false);
}
}
});
};
plugin.bindHoverIntentEvents = function() {
items_with_submenus.hoverIntent({
over: function () {
plugin.unbindClickEvents();
if (! $(this).hasClass("mega-toggle-on")) {
plugin.showPanel($(this).children("a.mega-menu-link"));
}
},
out: function () {
if ($(this).hasClass("mega-toggle-on") && ! $(this).hasClass("mega-disable-collapse") && ! $(this).parent().parent().hasClass("mega-menu-tabbed")) {
plugin.hidePanel($(this).children("a.mega-menu-link"), false);
}
},
timeout: plugin.settings.hover_intent_timeout,
interval: plugin.settings.hover_intent_interval
});
};
plugin.bindKeyboardEvents = function() {
var tab_key = 9;
var escape_key = 27;
var enter_key = 13;
var left_arrow_key = 37;
var right_arrow_key = 39;
var space_key = 32;
$menu.parent().on("keyup.megamenu", function(e) {
var keyCode = e.keyCode || e.which;
var active_link = $(e.target);
if (keyCode === tab_key) {
$menu.parent().addClass("mega-keyboard-navigation");
if ( active_link.parent().parent().is(".max-mega-menu" ) ) {
plugin.hideAllPanels();
}
}
});
$menu.parent().on("keydown.megamenu", function(e) {
var keyCode = e.keyCode || e.which;
var active_link = $(e.target);
if ( keyCode === space_key && active_link.is(".mega-menu-link") && $menu.parent().hasClass("mega-keyboard-navigation") ) {
e.preventDefault();
// pressing space on a parent item will always toggle the sub menu
if ( active_link.parent().is(items_with_submenus) ) {
if ( active_link.parent().hasClass("mega-toggle-on") && ! active_link.closest("ul.mega-sub-menu").parent().hasClass("mega-menu-tabbed") ) {
plugin.hidePanel(active_link);
} else {
plugin.showPanel(active_link);
}
}
}
if ( keyCode === space_key && active_link.is("mega-indicator") && $menu.parent().hasClass("mega-keyboard-navigation") ) {
e.preventDefault();
if ( active_link.parent().parent().hasClass("mega-toggle-on") && ! active_link.closest("ul.mega-sub-menu").parent().hasClass("mega-menu-tabbed") ) {
plugin.hidePanel(active_link.parent());
} else {
plugin.showPanel(active_link.parent());
}
}
if ( keyCode === escape_key && $menu.parent().hasClass("mega-keyboard-navigation") ) {
var submenu_open = $("> .mega-toggle-on", $menu).length !== 0;
$("> .mega-toggle-on", $menu).find("[tabindex]:visible").first().focus();
plugin.hideAllPanels();
if ( plugin.isMobileView() && ! submenu_open ) {
plugin.hideMobileMenu();
$(".mega-menu-toggle-block, button.mega-toggle-animated", $toggle_bar).first().focus();
}
}
if ( keyCode === enter_key && $menu.parent().hasClass("mega-keyboard-navigation") ) {
if ( active_link.hasClass("mega-menu-toggle-block") ) {
if ( $toggle_bar.hasClass("mega-menu-open") ) {
plugin.hideMobileMenu();
} else {
plugin.showMobileMenu();
}
}
// pressing enter on an arrow will toggle the sub menu
if ( active_link.hasClass("mega-indicator") ) {
if ( active_link.closest("li.mega-menu-item").hasClass("mega-toggle-on") && ! active_link.closest("ul.mega-sub-menu").parent().hasClass("mega-menu-tabbed") ) {
plugin.hidePanel(active_link.parent());
} else {
plugin.showPanel(active_link.parent());
}
return;
}
// pressing enter on a parent link
if ( active_link.parent().is(items_with_submenus) ) {
// when the arrow has been moved (i.e. it is clickable and visible, don't show the sub menu - just follow the link)
if ( active_link.is("[href]") && active_link.siblings(".mega-indicator[tabindex]:visible").length !== 0 ) {
return;
}
// pressing enter on a parent item without a link will toggle the sub menu
if ( active_link.is("[href]") === false ) {
if ( active_link.parent().hasClass("mega-toggle-on") && ! active_link.closest("ul.mega-sub-menu").parent().hasClass("mega-menu-tabbed") ) {
plugin.hidePanel(active_link);
} else {
plugin.showPanel(active_link);
}
return;
}
// pressing enter on a parent item will first open the sub menu, then follow the link
if ( active_link.parent().hasClass("mega-toggle-on") && ! active_link.closest("ul.mega-sub-menu").parent().hasClass("mega-menu-tabbed") ) {
return;
} else {
e.preventDefault();
plugin.showPanel(active_link);
}
}
}
if ( keyCode === right_arrow_key && plugin.isDesktopView() && $menu.parent().hasClass("mega-keyboard-navigation") && $menu.hasClass("mega-menu-horizontal") ) {
e.preventDefault();
var next_top_level_item = $("> .mega-toggle-on", $menu).nextAll("li.mega-menu-item:visible").find("> a.mega-menu-link, .mega-search input[type=text]").first();
if (next_top_level_item.length === 0) {
next_top_level_item = $(":focus", $menu).parent().nextAll("li.mega-menu-item:visible").find("> a.mega-menu-link, .mega-search input[type=text]").first();
}
if (next_top_level_item.length === 0) {
next_top_level_item = $(":focus", $menu).parent().parent().nextAll("li.mega-menu-item:visible").find("> a.mega-menu-link, .mega-search input[type=text]").first();
}
plugin.hideAllPanels();
next_top_level_item.focus();
}
if ( keyCode === left_arrow_key && plugin.isDesktopView() && $menu.parent().hasClass("mega-keyboard-navigation") && $menu.hasClass("mega-menu-horizontal") ) {
e.preventDefault();
var prev_top_level_item = $("> .mega-toggle-on", $menu).prevAll("li.mega-menu-item:visible").find("> a.mega-menu-link, .mega-search input[type=text]").last();
if (prev_top_level_item.length === 0) {
prev_top_level_item = $(":focus", $menu).parent().prevAll("li.mega-menu-item:visible").find("> a.mega-menu-link, .mega-search input[type=text]").last();
}
if (prev_top_level_item.length === 0) {
prev_top_level_item = $(":focus", $menu).parent();
}
plugin.hideAllPanels();
prev_top_level_item.focus();
}
});
$menu.parent().on("focusout.megamenu", function(e) {
if ( $menu.parent().hasClass("mega-keyboard-navigation") ) {
setTimeout(function() {
var menu_has_focus = $menu.parent().find(":focus").length > 0;
if (! menu_has_focus) {
$menu.parent().removeClass("mega-keyboard-navigation");
plugin.hideAllPanels();
plugin.hideMobileMenu();
}
}, 10);
}
});
};
plugin.unbindAllEvents = function() {
$("ul.mega-sub-menu, li.mega-menu-item, li.mega-menu-row, li.mega-menu-column, a.mega-menu-link, .mega-indicator", menu).off().unbind();
};
plugin.unbindClickEvents = function() {
// collapsable parents always have a click event
$("> a.mega-menu-link", items_with_submenus).not(collapse_children_parents).off("click.megamenu touchend.megamenu");
};
plugin.unbindHoverEvents = function() {
items_with_submenus.unbind("mouseenter.megamenu mouseleave.megamenu");
};
plugin.unbindHoverIntentEvents = function() {
items_with_submenus.unbind("mouseenter mouseleave").removeProp("hoverIntent_t").removeProp("hoverIntent_s"); // hoverintent does not allow namespaced events
};
plugin.unbindKeyboardEvents = function() {
$menu.parent().off("keyup.megamenu keydown.megamenu focusout.megamenu");
};
plugin.unbindMegaMenuEvents = function() {
if (plugin.settings.event === "hover_intent") {
plugin.unbindHoverIntentEvents();
}
if (plugin.settings.event === "hover") {
plugin.unbindHoverEvents();
}
plugin.unbindClickEvents();
plugin.unbindKeyboardEvents();
};
plugin.bindMegaMenuEvents = function() {
plugin.unbindMegaMenuEvents();
if (plugin.isDesktopView() && plugin.settings.event === "hover_intent") {
plugin.bindHoverIntentEvents();
}
if (plugin.isDesktopView() && plugin.settings.event === "hover") {
plugin.bindHoverEvents();
}
plugin.bindClickEvents(); // always bind click events for touch screen devices
plugin.bindKeyboardEvents();
};
plugin.checkWidth = function() {
if ( plugin.isMobileView() && $menu.data("view") === "desktop" ) {
plugin.switchToMobile();
}
if ( plugin.isDesktopView() && $menu.data("view") === "mobile" ) {
plugin.switchToDesktop();
}
plugin.calculateDynamicSubmenuWidths($("> li.mega-menu-megamenu > a.mega-menu-link", $menu));
};
plugin.reverseRightAlignedItems = function() {
if ( ! $("body").hasClass("rtl") && $menu.hasClass("mega-menu-horizontal") ) {
$menu.append($menu.children("li.mega-item-align-right").get().reverse());
}
};
plugin.addClearClassesToMobileItems = function() {
$(".mega-menu-row", $menu).each(function() {
$("> .mega-sub-menu > .mega-menu-column:not(.mega-hide-on-mobile)", $(this)).filter(":even").addClass("mega-menu-clear"); // :even is 0 based
});
};
plugin.initDesktop = function() {
$menu.data("view", "desktop");
plugin.bindMegaMenuEvents();
plugin.initIndicators();
};
plugin.switchToDesktop = function() {
$menu.data("view", "desktop");
plugin.bindMegaMenuEvents();
plugin.reverseRightAlignedItems();
plugin.hideAllPanels();
plugin.hideMobileMenu(true);
};
plugin.initMobile = function() {
plugin.switchToMobile();
};
plugin.switchToMobile = function() {
$menu.data("view", "mobile");
plugin.bindMegaMenuEvents();
plugin.initIndicators();
plugin.reverseRightAlignedItems();
plugin.addClearClassesToMobileItems();
plugin.hideAllPanels();
plugin.expandMobileSubMenus();
};
plugin.initToggleBar = function() {
$toggle_bar.on("click", function(e) {
if ( $(e.target).is(".mega-menu-toggle, .mega-menu-toggle-custom-block *, .mega-menu-toggle-block, .mega-menu-toggle-animated-block, .mega-menu-toggle-animated-block *, .mega-toggle-blocks-left, .mega-toggle-blocks-center, .mega-toggle-blocks-right, .mega-toggle-label, .mega-toggle-label span") ) {
e.preventDefault();
if ($(this).hasClass("mega-menu-open")) {
plugin.hideMobileMenu();
} else {
plugin.showMobileMenu();
}
}
});
};
plugin.initIndicators = function() {
$(".mega-indicator", $menu).not("[data-has-click-event]").on("click.megamenu", function(e) {
e.preventDefault();
e.stopPropagation();
if ( $(this).closest(".mega-menu-item").hasClass("mega-toggle-on") ) {
if ( ! $(this).closest("ul.mega-sub-menu").parent().hasClass("mega-menu-tabbed") || plugin.isMobileView() ) {
plugin.hidePanel($(this).parent(), false);
}
} else {
plugin.showPanel($(this).parent(), false);
}
});
$(".mega-indicator", $menu).each(function() {
$(this).attr('data-has-click-event', 'true');
});
}
plugin.hideMobileMenu = function(force) {
force = force || false;
if ( ! $toggle_bar.is(":visible") && ! force ) {
return;
}
html_body_class_timeout = setTimeout(function() {
$("body").removeClass($menu.attr("id") + "-mobile-open");
$("html").removeClass($menu.attr("id") + "-off-canvas-open");
}, plugin.settings.effect_speed_mobile);
$(".mega-toggle-label, .mega-toggle-animated", $toggle_bar).attr("aria-expanded", "false");
if (plugin.settings.effect_mobile === "slide" && ! force ) {
$menu.animate({"height":"hide"}, plugin.settings.effect_speed_mobile, function() {
$menu.css({
width: "",
left: "",
display: ""
});
$toggle_bar.removeClass("mega-menu-open");
});
} else {
$menu.css({
width: "",
left: "",
display: ""
});
$toggle_bar.removeClass("mega-menu-open");
}
$menu.triggerHandler("mmm:hideMobileMenu");
};
plugin.showMobileMenu = function() {
if ( ! $toggle_bar.is(":visible")) {
return;
}
clearTimeout(html_body_class_timeout);
$("body").addClass($menu.attr("id") + "-mobile-open");
plugin.expandMobileSubMenus();
if ( plugin.settings.effect_mobile === "slide_left" || plugin.settings.effect_mobile === "slide_right" ) {
$("html").addClass($menu.attr("id") + "-off-canvas-open");
}
$(".mega-toggle-label, .mega-toggle-animated", $toggle_bar).attr("aria-expanded", "true");
if (plugin.settings.effect_mobile === "slide") {
$menu.animate({"height":"show"}, plugin.settings.effect_speed_mobile);
}
$toggle_bar.addClass("mega-menu-open");
plugin.toggleBarForceWidth();
$menu.triggerHandler("mmm:showMobileMenu");
};
plugin.toggleBarForceWidth = function() {
if ($(plugin.settings.mobile_force_width).length && ( plugin.settings.effect_mobile === "slide" || plugin.settings.effect_mobile === "disabled" ) ) {
var submenu_offset = $toggle_bar.offset();
var target_offset = $(plugin.settings.mobile_force_width).offset();
$menu.css({
width: $(plugin.settings.mobile_force_width).outerWidth(),
left: (target_offset.left - submenu_offset.left) + "px"
});
}
};
plugin.init = function() {
$menu.triggerHandler("before_mega_menu_init");
plugin.settings = $.extend({}, defaults, options);
$menu.removeClass("mega-no-js");
plugin.initToggleBar();
if (plugin.settings.unbind_events === "true") {
plugin.unbindAllEvents();
}
$(window).on("load", function() {
plugin.calculateDynamicSubmenuWidths($("> li.mega-menu-megamenu > a.mega-menu-link", $menu));
});
if ( plugin.isDesktopView() ) {
plugin.initDesktop();
} else {
plugin.initMobile();
}
$(window).resize(function() {
plugin.checkWidth();
});
$menu.triggerHandler("after_mega_menu_init");
};
plugin.init();
};
$.fn.maxmegamenu = function(options) {
return this.each(function() {
if (undefined === $(this).data("maxmegamenu")) {
var plugin = new $.maxmegamenu(this, options);
$(this).data("maxmegamenu", plugin);
}
});
};
$(function() {
$(".max-mega-menu").maxmegamenu();
});
}( jQuery ));
\ No newline at end of file
......@@ -4,8 +4,8 @@
"compress": {
"booleans": true,
"conditionals": true,
"drop_console": true,
"drop_debugger": true,
"drop_console": false,
"drop_debugger": false,
"if_return": true,
"join_vars": true,
"keep_classnames": false,
......
// Add your custom JS here.
import "./_header_menu";
\ No newline at end of file
//import "./_header_menu";
var addstuff = '<div class="list-wrapper2 list-wrapper"><button type="button" class="back-one-level"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg><span>Back</span></button><div class="sub-menu-wrapper"></div></div><div class="list-wrapper3 list-wrapper"><button type="button" class="back-one-level"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg><span>Back</span></button><div class="sub-menu-wrapper"></div></div>';
const pageHeader = document.querySelector("#main-nav");
const toggleMenu = pageHeader.querySelector(".mega-toggle-block");
const menuWrapper = pageHeader.querySelector("#mega-menu-primary");
menuWrapper.innerHTML =menuWrapper.innerHTML + addstuff;
const level1Links = pageHeader.querySelectorAll("li.mega-menu-item-has-children > a.mega-menu-link");
const listWrapper2 = pageHeader.querySelector(".list-wrapper2");
const listWrapper3 = pageHeader.querySelector(".list-wrapper3");
const subMenuWrapper2 = listWrapper2.querySelector(".sub-menu-wrapper");
const subMenuWrapper3 = listWrapper3.querySelector(".sub-menu-wrapper");
const backOneLevelBtns = pageHeader.querySelectorAll(".back-one-level");
const isVisibleClass = "is-visible";
const isActiveClass = "is-active";
toggleMenu.addEventListener("click", function () {
menuWrapper.classList.toggle(isVisibleClass);
if (!this.classList.contains(isVisibleClass)) {
listWrapper2.classList.remove(isVisibleClass);
listWrapper3.classList.remove(isVisibleClass);
const menuLinks = menuWrapper.querySelectorAll("a");
for (const menuLink of menuLinks) {
menuLink.classList.remove(isActiveClass);
}
}
});
for (const level1Link of level1Links) {
level1Link.addEventListener("click", function (e) {
const siblingList = level1Link.nextElementSibling;
console.log('clicked level1Links')
if (siblingList) {
e.preventDefault();
this.classList.add(isActiveClass);
const cloneSiblingList = siblingList.cloneNode(true);
subMenuWrapper2.innerHTML = "";
subMenuWrapper2.append(cloneSiblingList);
listWrapper2.classList.add(isVisibleClass);
}
});
}
listWrapper2.addEventListener("click", function (e) {
const target = e.target;
const parent = target.closest("a");
if (target.tagName.toLowerCase() === "a" && target.nextElementSibling) {
const siblingList = target.nextElementSibling;
e.preventDefault();
target.classList.add(isActiveClass);
const cloneSiblingList = siblingList.cloneNode(true);
subMenuWrapper3.innerHTML = "";
subMenuWrapper3.append(cloneSiblingList);
listWrapper3.classList.add(isVisibleClass);
}else if (parent.tagName.toLowerCase() === "a" && parent.nextElementSibling) {
const siblingList = parent.nextElementSibling;
e.preventDefault();
parent.classList.add(isActiveClass);
const cloneSiblingList = siblingList.cloneNode(true);
subMenuWrapper3.innerHTML = "";
subMenuWrapper3.append(cloneSiblingList);
listWrapper3.classList.add(isVisibleClass);
}
});
for (const backOneLevelBtn of backOneLevelBtns) {
backOneLevelBtn.addEventListener("click", function () {
const parent = this.closest(".list-wrapper");
parent.classList.remove(isVisibleClass);
// parent.previousElementSibling
// .querySelector(".is-active")
// .classList.remove(isActiveClass);
});
}
......
......@@ -14,6 +14,8 @@
}
.branding{
display: flex;
margin-bottom: 0px;
......@@ -27,3 +29,16 @@
align-items: flex-start;
margin-bottom: 10px;
}
@media only screen and (max-width: 1000px) {
.branding{
margin-top: 0px;
}
.site-title{
font-size: 20px;
}
.navbar-brand{
width:100px;
}
}
\ No newline at end of file
......
@media only screen and (min-width: 1000px) {
#mega-menu-wrap-primary{
width: 100%;
......@@ -116,3 +116,155 @@
line-height: 20px;
font-family: "PT Sans",sans-serif;
}
.list-wrapper2,
.list-wrapper3 {
display: none;
}
}
@media only screen and (max-width: 1000px) {
#mega-menu-primary{
margin-top: 60px !important;
padding-top: 20px !important;
padding-bottom: 100px !important;
overflow-x: scroll !important;
height: calc(100vh - 80px) !important;
}
#mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open:after{
display: none !important;
}
#mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
width: 100%;
max-width: 100%;
padding: 0px 10%;
margin: auto;
}
#mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary{
left: -100%;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu{
margin-top: 0px;
}
.sub-mobile-menu{
.mega-menu-item{
margin-top: 15px !important;
}
.mega-indicator{
margin-top: -50px !important;
position: relative !important;
margin-right: 0px !important;
width: 30px !important;
&:after{
margin-right: 0px !important;
}
}
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link {
margin-left: 20px;
color: #555;
font-family: inherit;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
text-align: left;
vertical-align: top;
display: block;
border: 0;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link{
width: 100%;
margin: 10px auto 0px auto;
color:#fff;
background-color: #EE0000;
border-radius: 1.25rem;
text-align: center;
height: 2.5rem;
margin-top: 0rem;
font-size: 18px;
position: relative;
font-family: "PT Sans",sans-serif;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link{
width: 100%;
margin: 10px auto 0px auto !important;
color:#fff;
background-color: #EE0000;
border-radius: 1.25rem;
text-align: center !important;
height: 2.5rem;
font-size: 18px;
position: relative;
font-family: "PT Sans",sans-serif;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link{
width: 100%;
margin: 10px auto 0px auto !important;
color:#fff;
background-color: #EE0000;
border-radius: 1.25rem;
text-align: center !important;
height: 2.5rem;
font-size: 18px;
position: relative;
font-family: "PT Sans",sans-serif;
}
.sub-menu-wrapper{
background-color: #fff;
width: 100% !important;
padding: 0px 10% !important;
margin: auto !important;
float: none !important;
}
}
@media only screen and (max-width: 1000px) {
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu, #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu.mega-menu-item.mega-toggle-on ul.mega-sub-menu{
display: none !important;
}
.list-wrapper2,
.list-wrapper3 {
ul.mega-sub-menu{
display: block !important;
}
}
.list-wrapper2,
.list-wrapper3 {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 100vh !important;
transform: translateX(100%) !important;
backface-visibility: hidden !important;
transition: transform 0.5s !important;
background-color: #fff !important;
}
.list-wrapper2.is-visible,
.list-wrapper3.is-visible {
transform: none !important;
}
.mega-menu-item .list-wrapper:nth-child(1) > ul > li > .sub-menu{
display: none;
}
}
\ No newline at end of file
......