<!-- original at https://robinpoort.github.io/vanilla-js-responsive-menu/ -->
<div id="wrapper" onclick="">
<div class="navigation_container navigation_container1" role="navigation" aria-label="Main menu">
<p class="logo"><a href="#">Nature Travelers</a></p>
<ul class="navigation" role="menubar">
<li class="active" role="presentation">
<a role="menuitem" class="test" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Home">Home</a>
</li>
<li role="presentation">
<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Item 2">Item 2</a>
</li>
<li role="presentation">
<a role="menuitem" aria-haspopup="true" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Item 3">Item 3</a>
<ul role="menu">
<li role="presentation">
<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test">Test</a>
</li>
<li role="presentation">
<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="A long one">A long one</a>
</li>
<li role="presentation">
<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test">Test</a>
</li>
</ul>
</li>
<li role="presentation">
<a role="menuitem" aria-haspopup="true" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Item 4 menu">Item 4</a>
<ul role="menu">
<li role="presentation">
<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test">Test</a>
</li>
<li role="presentation">
<a role="menuitem" aria-haspopup="true" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="A long one">A long one</a>
<ul role="menu">
<li role="presentation">
<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test1">Test1</a>
</li>
<li role="presentation">
<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test2">Test2</a>
</li>
<li role="presentation">
<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test3">Test3</a>
</li>
</ul>
</li>
<li role="presentation">
<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test">Test</a>
</li>
</ul>
</li>
</ul>
</div>
<div id="banner">
<h1>Botanic Garden Travelers</h1>
</div>
</div>html,
body {
margin: 0;
padding: 0;
}
p {
margin: 0 0 1rem;
}
/* hide close buttons when closed so they wont show up in tabindex */
.rm-closed {
display: none;
}
/* Accessible hide the menu itself */
ul.rm-closed {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
/* Mobile mainmenu indicator styling */
#rm-mobile-indicator {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
z-index: 0;
}
@media (min-width: 600px) {
#rm-mobile-indicator {
z-index: 1;
}
}
/* Mobile submenu indicator styling */
/**
* When JS is enabled
*
* 1. We can use display none because we set display block again with JS immediately after initiating the menu
* 2. Display menu when initiated
* 3. Display menu on "desktop"
* 4. Display focused items
*/
.js .navigation_container {
display: none;
/* 1 */
}
.js .navigation_container.rm-initiated {
display: block;
/* 2 */
}
@media (min-width: 600px) {
.js .navigation_container {
display: block;
/* 3 */
}
}
.js .navigation_container .rm-focused {
overflow: visible;
/* 4 */
}
#rm-mobile-submenu-indicator {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
z-index: 0;
}
@media (min-width: 600px) {
#rm-mobile-submenu-indicator {
z-index: 1;
}
}
/*# sourceMappingURL=responsivemenu.css.map */
body {
background: #ecf0f1;
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 24px;
color: #2c3e50;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.site {
margin: 0 auto;
padding: 24px;
max-width: 960px;
}
.rm-togglebutton,
.rm-subtoggle {
margin: 5px;
padding: 5px 10px;
border: 1px solid black;
outline: none;
background: #fff;
color: #0072b3;
border-radius: 5px;
font-size: 1em;
cursor: pointer;
}
.rm-togglebutton:hover,
.rm-subtoggle:hover {
text-decoration: underline;
}
.rm-togglebutton:focus,
.rm-subtoggle:focus {
text-decoration: underline;
}
.rm-subtoggle {
margin: 5px;
float: right;
}
.navigation_container {
background: #34495e;
color: #fff;
min-height: 40px;
}
.navigation_container ul {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.navigation_container ul:before,
.navigation_container ul:after {
display: table;
content: " ";
}
.navigation_container ul:after {
clear: both;
}
.navigation_container .rm-closed li.rm-parent > a:after,
.navigation_container .rm-fullmenu li.rm-parent > a:after {
content: " \25bc";
}
.navigation_container .rm-closed li.parent > a:after,
.navigation_container .rm-fullmenu li.parent > a:after {
content: " \25b6";
}
.navigation_container li {
padding: 0;
clear: both;
}
.navigation_container li.focused,
.navigation_container li:hover a,
.navigation_container li a:hover,
.navigation_container li a:focus {
background: #2c3e50;
}
.navigation_container a {
display: block;
color: #fff;
padding: 8px 16px;
line-height: 24px;
text-decoration: none;
height: 40px;
}
.navigation_container a:after {
font-size: 12px;
vertical-align: middle;
line-height: 24px;
text-decoration: none;
}
.navigation_container .active a,
.navigation_container .active a:hover,
.navigation_container .active a:focus {
background: #fff;
color: #333;
cursor: default;
}
.navigation_container .rm-closed li,
.navigation_container .rm-fullmenu li {
overflow: visible;
}
.navigation_container .rm-closed li ul,
.navigation_container .rm-fullmenu li ul {
height: auto;
background: #2c3e50;
padding: 0;
width: 180px;
border-top: none;
}
@media (min-width: 600px) {
.navigation_container {
display: flex;
min-height: 5rem;
}
.navigation_container ul {
display: flex;
align-items: center;
justify-content: space-evenly;
}
.navigation_container li,
.navigation_container a {
display: flex;
height: 100%;
align-items: center;
}
}
@media (min-width: 600px) {
.navigation_container .rm-closed li ul,
.navigation_container .rm-fullmenu li ul {
transition: transform 0.1s cubic-bezier(0.195, 0.4, 0.45, 0.785);
transform: scaleY(0);
transform-origin: 0 0;
}
}
.navigation_container .rm-closed li.rm-focused > ul,
.navigation_container .rm-closed li:hover > ul,
.navigation_container .rm-fullmenu li.rm-focused > ul,
.navigation_container .rm-fullmenu li:hover > ul {
display: block;
}
@media (min-width: 600px) {
.navigation_container .rm-closed li.rm-focused > ul,
.navigation_container .rm-closed li:hover > ul,
.navigation_container .rm-fullmenu li.rm-focused > ul,
.navigation_container .rm-fullmenu li:hover > ul {
transform: scaleY(1);
}
}
@media (min-width: 600px) {
.navigation_container .rm-closed li.rm-focused li ul,
.navigation_container .rm-closed li:hover li ul,
.navigation_container .rm-fullmenu li.rm-focused li ul,
.navigation_container .rm-fullmenu li:hover li ul {
transform: scaleX(0);
}
}
@media (min-width: 600px) {
.navigation_container .rm-closed li.rm-focused li.rm-focused > ul,
.navigation_container .rm-closed li.rm-focused li:hover > ul,
.navigation_container .rm-closed li:hover li.rm-focused > ul,
.navigation_container .rm-closed li:hover li:hover > ul,
.navigation_container .rm-fullmenu li.rm-focused li.rm-focused > ul,
.navigation_container .rm-fullmenu li.rm-focused li:hover > ul,
.navigation_container .rm-fullmenu li:hover li.rm-focused > ul,
.navigation_container .rm-fullmenu li:hover li:hover > ul {
transform: scaleX(1);
}
}
.navigation_container .rm-closed li li,
.navigation_container .rm-fullmenu li li {
float: none;
}
.navigation_container .rm-closed li li.rm-focused > a,
.navigation_container .rm-closed li li:hover > a,
.navigation_container .rm-closed li li a:hover,
.navigation_container .rm-closed li li a:focus,
.navigation_container .rm-fullmenu li li.rm-focused > a,
.navigation_container .rm-fullmenu li li:hover > a,
.navigation_container .rm-fullmenu li li a:hover,
.navigation_container .rm-fullmenu li li a:focus {
text-decoration: none;
background: #233140;
color: white;
}
/**
* When JS is enabled
*
* 1. We can use display none because we set display block again with JS immediately after initiating the menu
* 2. Display menu when initiated
* 3. Display menu on "desktop"
* 4. Display focused items
*/
.js .navigation_container {
display: none;
/* 1 */
}
.js .navigation_container.rm-initiated {
display: block;
/* 2 */
}
@media (min-width: 600px) {
.js .navigation_container {
display: block;
/* 3 */
}
}
.js .navigation_container .rm-focused {
overflow: visible;
/* 4 */
}
/**
* When JS is either disabled or enabled
*
* 1. Relative to position li > ul items
* 2. Hide overflowing content so we can display on tabbing
* 3. Display on hover / focus
* 4. Children should have position absolute to hide them
*/
.navigation_container li {
position: relative;
/* 1 */
}
@media (min-width: 600px) {
.navigation_container li {
overflow: hidden;
/* 2 */
}
.navigation_container li:hover,
.navigation_container li:focus {
overflow: visible;
/* 3 */
}
}
@media (min-width: 600px) {
.navigation_container li ul {
position: absolute;
/* 4 */
}
}
.navigation_container {
position: relative;
z-index: 1;
}
@media (min-width: 600px) {
.navigation_container li ul {
position: absolute;
left: -9999px;
top: 100%;
z-index: -1;
width: 100%;
}
}
.navigation_container li li {
position: relative;
float: left;
}
.navigation_container .rm-focused > ul,
.navigation_container li:hover > ul {
left: 0;
}
.navigation_container li .rm-focused > ul,
.navigation_container li li:hover > ul {
left: 100%;
top: 0;
}
/*# sourceMappingURL=responsivemenu.css.map */
/*# sourceMappingURL=demo.css.map */
#banner h1 {
font-family: Poppins, "Times New Roman", Times, serif;
font-size: 6rem;
color: #745d46;
text-shadow: white 2px 2px 2px;
}
p.logo {
margin: auto 0;
letter-spacing: 3px;
}
/*
<!-- original at https://robinpoort.github.io/vanilla-js-responsive-menu/ -->
*/
function hasClass(e, t) {
return e.className.match(new RegExp("(\\s|^)" + t + "(\\s|$)"));
}
var el = document.documentElement;
var cl = "no-js";
if (hasClass(el, cl)) {
var reg = new RegExp("(\\s|^)" + cl + "(\\s|$)");
el.className = el.className.replace(reg, " js");
}
(function (root, factory) {
if (typeof define === "function" && define.amd) {
define(factory);
} else if (typeof exports === "object") {
module.exports = factory;
} else {
root.apollo = factory();
}
})(this, function () {
"use strict";
var apollo = {};
var hasClass, addClass, removeClass, toggleClass;
var forEach = function (items, fn) {
if (Object.prototype.toString.call(items) !== "[object Array]") {
items = items.split(" ");
}
for (var i = 0; i < items.length; i++) {
fn(items[i], i);
}
};
if ("classList" in document.documentElement) {
hasClass = function (elem, className) {
return elem.classList.contains(className);
};
addClass = function (elem, className) {
elem.classList.add(className);
};
removeClass = function (elem, className) {
elem.classList.remove(className);
};
toggleClass = function (elem, className) {
elem.classList.toggle(className);
};
} else {
hasClass = function (elem, className) {
return new RegExp("(^|\\s)" + className + "(\\s|$)").test(elem.className);
};
addClass = function (elem, className) {
if (!hasClass(elem, className)) {
elem.className += (elem.className ? " " : "") + className;
}
};
removeClass = function (elem, className) {
if (hasClass(elem, className)) {
elem.className = elem.className.replace(
new RegExp("(^|\\s)*" + className + "(\\s|$)*", "g"),
""
);
}
};
toggleClass = function (elem, className) {
(hasClass(elem, className) ? removeClass : addClass)(elem, className);
};
}
apollo.hasClass = function (elem, className) {
return hasClass(elem, className);
};
apollo.addClass = function (elem, classes) {
forEach(classes, function (className) {
addClass(elem, className);
});
};
apollo.removeClass = function (elem, classes) {
forEach(classes, function (className) {
removeClass(elem, className);
});
};
apollo.toggleClass = function (elem, classes) {
forEach(classes, function (className) {
toggleClass(elem, className);
});
};
return apollo;
});
/**
*
* Responsive menu
* A vanilla JS responsive menu plugin, by Robin Poort - Timble
* http://robinpoort.com - http://www.timble.net
*
* Browser support: IE9+ (IE8 doesn't need a responsive menu since it's not responsive)
*
* Dependency: apollo JS | https://github.com/toddmotto/apollo
* Plugin boilerplate by | http://gomakethings.com/mit/
*
* Free to use under the MIT License.
*
*/
(function (root, factory) {
if (typeof define === "function" && define.amd) {
define("responsivemenu", factory(root));
} else if (typeof exports === "object") {
module.responsivemenu = factory(root);
} else {
root.responsivemenu = factory(root);
}
})(this, function (root) {
"use strict";
// Variables
var exports = {}; // Object for public APIs
var supports = !!document.querySelector && !!root.addEventListener; // Feature test
var settings; // Plugin settings
var menu; // The actual menu item
var hasChildren = false;
var subtoggles = false;
// Default settings
var defaults = {
menu: "",
initiated_class: "rm-initiated",
loaded_class: "rm-loaded",
before_element: "",
toggletype: "button",
toggleclass: "rm-togglebutton",
toggleclosedclass: "rm-togglebutton--closed",
togglecontent: "menu",
subtoggletype: "button",
subtoggleclass: "rm-subtoggle",
subtogglecontent: "+",
sticky: 0,
absolute: 0,
hideclass: "rm-closed",
openclass: "rm-opened",
openbodyclass: "has-opened-menu",
focusedclass: "rm-focused",
animateopenclass: "is-opening",
animatecloseclass: "is-closing",
animateduration: 0, // (Animated with CSS so set to same duration as CSS value)
subanimateopenclass: "is-opening",
subanimatecloseclass: "is-closing",
subanimateduration: 0, // (Animated with CSS so set to same duration as CSS value)
parentclass: "rm-parent",
fullmenuclass: "rm-fullmenu",
absolutemenuclass: "rm-absolutemenu",
bodyoverflowhiddenclass: "rm-bodyoverflowhidden",
menuoverflowautoclass: "rm-menuoverflowauto",
stickyclass: "rm-sticky",
stickyinitiatedclass: "rm-sticky-initiated",
noresponsivemenuclass: "rm-no-responsive-menu",
mobileindicatorid: "rm-mobile-indicator",
mobilesubmenuindicatorid: "rm-mobile-submenu-indicator",
onAfterInit: function () {},
onAfterLoad: function () {},
onBeforeToggleOpen: function () {},
onAfterToggleOpen: function () {},
onBeforeToggleClose: function () {},
onAfterToggleClose: function () {},
onBeforeSubToggleOpen: function () {},
onAfterSubToggleOpen: function () {},
onBeforeSubToggleClose: function () {},
onAfterSubToggleClose: function () {}
};
// Methods
/**
* A simple forEach() implementation for Arrays, Objects and NodeLists
* @private
* @param {Array|Object|NodeList} collection Collection of items to iterate
* @param {Function} callback Callback function for each iteration
* @param {Array|Object|NodeList} scope Object/NodeList/Array that forEach is iterating over (aka `this`)
*/
var forEach = function (collection, callback, scope) {
if (Object.prototype.toString.call(collection) === "[object Object]") {
for (var prop in collection) {
if (Object.prototype.hasOwnProperty.call(collection, prop)) {
callback.call(scope, collection[prop], prop, collection);
}
}
} else {
for (var i = 0, len = collection.length; i < len; i++) {
callback.call(scope, collection[i], i, collection);
}
}
};
/**
* Merge defaults with user options
* @private
* @param {Object} defaults Default settings
* @param {Object} options User options
* @returns {Object} Merged values of defaults and options
*/
var extend = function (defaults, options) {
var extended = {};
forEach(defaults, function (value, prop) {
extended[prop] = defaults[prop];
});
forEach(options, function (value, prop) {
extended[prop] = options[prop];
});
return extended;
};
/**
* Remove whitespace from a string
* @private
* @param {String} string
* @returns {String}
*/
var trim = function (string) {
return string.replace(/^\s+|\s+$/g, "");
};
/**
* Convert data-options attribute into an object of key/value pairs
* @private
* @param {String} options Link-specific options as a data attribute string
* @returns {Object}
*/
var getDataOptions = function (options) {
var settings = {};
// Create a key/value pair for each setting
if (options) {
options = options.split(";");
options.forEach(function (option) {
option = trim(option);
if (option !== "") {
option = option.split(":");
settings[option[0]] = trim(option[1]);
}
});
}
return settings;
};
/**
* Run when window resize is done (after x ms)
*/
var waitForFinalEvent = (function () {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) {
uniqueId = "Don't call this twice without a uniqueId";
}
if (timers[uniqueId]) {
clearTimeout(timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
};
})();
/**
* Get parents
*/
function getParents(element, tag, stop) {
var nodes = [];
while (element.parentNode && element.parentNode != stop) {
element = element.parentNode;
if (element.tagName == tag) {
nodes.push(element);
}
}
return nodes;
}
/**
* Get style
*/
function getStyle(el, styleProp) {
var x = document.getElementById(el);
if (window.getComputedStyle) {
var y = document.defaultView
.getComputedStyle(x, null)
.getPropertyValue(styleProp);
} else if (x.currentStyle) {
var y = x.currentStyle[styleProp];
}
return y;
}
function returnId(menu, togglebutton, id) {
if (id === undefined) {
id = 0;
}
if (document.getElementById("vjsrm:" + id) !== null) {
id = id + 1;
returnId(menu, togglebutton, id);
} else {
menu.id = "vjsrm:" + id;
togglebutton.setAttribute("aria-controls", "vjsrm:" + id);
}
}
// Responsive menu
function initialize(settings) {
menu = settings.menu || settings.wrapper.getElementsByTagName("ul")[0];
// Add a class when JS is initiated
apollo.addClass(settings.wrapper, settings.initiated_class);
// Function to run after init
settings.onAfterInit();
// See if menu has children
var parents = menu.querySelectorAll("li ul");
if (parents.length) {
hasChildren = true;
subtoggles = document.getElementsByClassName(settings.subtoggleclass);
// Create mobile submenu width indicator
var mobilesubmenuindicator = document.createElement("div");
settings.wrapper.appendChild(mobilesubmenuindicator);
mobilesubmenuindicator.id = settings.mobilesubmenuindicatorid;
var mobilesubindicatorZindex = 0;
}
// Create mobile width indicator
var mobileindicator = document.createElement("div");
settings.wrapper.appendChild(mobileindicator);
mobileindicator.id = settings.mobileindicatorid;
var mobileindicatorZindex = 0;
// Creating the main toggle button
var toggle_element = document.createElement(settings.toggletype);
apollo.addClass(toggle_element, [settings.toggleclass, settings.hideclass]);
if (settings.before_element == "") {
settings.before_element = settings.wrapper.firstChild;
}
settings.before_element.parentNode.insertBefore(
toggle_element,
settings.before_element
);
var togglebutton = toggle_element;
togglebutton.innerHTML = settings.togglecontent;
togglebutton.setAttribute("aria-expanded", "false");
togglebutton.setAttribute("aria-pressed", "false");
togglebutton.setAttribute("type", "button");
// Add id's for aria
returnId(menu, togglebutton);
// Subtoggles and parent classes
if (hasChildren) {
for (var i = 0; i < parents.length; i++) {
var subtoggle_element = document.createElement(settings.subtoggletype);
apollo.addClass(subtoggle_element, [
settings.subtoggleclass,
settings.hideclass
]);
var parent = parents[i].parentNode;
parent.insertBefore(subtoggle_element, parent.firstChild);
subtoggle_element.innerHTML = settings.subtogglecontent;
subtoggle_element.setAttribute("aria-expanded", "false");
subtoggle_element.setAttribute("aria-pressed", "false");
subtoggle_element.setAttribute("type", "button");
apollo.addClass(parents[i].parentNode, settings.parentclass);
}
}
// Adding classes
function classes() {
menu = settings.menu || settings.wrapper.getElementsByTagName("ul")[0];
mobileindicatorZindex = getStyle(settings.mobileindicatorid, "z-index");
if (parents.length) {
mobilesubmenuindicator = getStyle(
settings.mobilesubmenuindicatorid,
"z-index"
);
}
// If wrapper is small and if the menu is not already opened
if (
mobileindicatorZindex == 0 &&
!apollo.hasClass(menu, settings.openclass)
) {
// Show the toggle button(s)
apollo.removeClass(togglebutton, settings.hideclass);
// Hide the menu
apollo.removeClass(menu, [settings.openclass, settings.fullmenuclass]);
apollo.addClass(menu, settings.hideclass);
apollo.removeClass(document.body, settings.openbodyclass);
// Make the menu absolute positioned
if (settings.absolute == 1) {
apollo.addClass(menu, settings.absolutemenuclass);
}
} else if (mobileindicatorZindex == 1) {
// Hide the toggle button(s)
apollo.addClass(togglebutton, settings.hideclass);
apollo.removeClass(togglebutton, settings.toggleclosedclass);
togglebutton.setAttribute("aria-expanded", "false");
togglebutton.setAttribute("aria-pressed", "false");
// Show the menu and remove all classes
apollo.removeClass(menu, [settings.openclass, settings.hideclass]);
apollo.addClass(menu, settings.fullmenuclass);
apollo.removeClass(document.body, settings.openbodyclass);
// Undo absolute positioning
if (
settings.absolute == 1 &&
apollo.hasClass(menu, settings.absolutemenuclass)
) {
apollo.removeClass(menu, settings.absolutemenuclass);
}
}
if (hasChildren && mobilesubmenuindicator == 0) {
forEach(subtoggles, function (value, prop) {
if (!apollo.hasClass(subtoggles[prop], settings.toggleclosedclass)) {
apollo.addClass(
subtoggles[prop].parentNode.getElementsByTagName("ul")[0],
settings.hideclass
);
apollo.removeClass(subtoggles[prop], settings.hideclass);
}
});
} else if (hasChildren && mobilesubmenuindicator == 1) {
forEach(subtoggles, function (value, prop) {
apollo.removeClass(
subtoggles[prop].parentNode.getElementsByTagName("ul")[0],
settings.hideclass
);
apollo.addClass(subtoggles[prop], settings.hideclass);
});
}
}
// Sticky menu body height
function stickyMenu() {
menu = settings.menu || settings.wrapper.getElementsByTagName("ul")[0];
if (settings.sticky == 1) {
// The current menu and viewport heights
var menuheight = settings.wrapper.offsetHeight;
var viewportheight = Math.max(
document.documentElement.clientHeight,
window.innerHeight || 0
);
// Add the overflow class but only if there is space
if (
viewportheight <= menuheight &&
!apollo.hasClass(document.body, settings.bodyoverflowhiddenclass)
) {
apollo.addClass(document.body, settings.bodyoverflowhiddenclass);
apollo.addClass(settings.wrapper, settings.menuoverflowautoclass);
} else if (viewportheight > menuheight) {
if (
apollo.hasClass(document.body, settings.bodyoverflowhiddenclass)
) {
apollo.removeClass(document.body, settings.bodyoverflowhiddenclass);
apollo.removeClass(
settings.wrapper,
settings.menuoverflowautoclass
);
}
// Make sticky
if (!apollo.hasClass(settings.wrapper, settings.stickyclass)) {
apollo.addClass(settings.wrapper, settings.stickyclass);
}
// Add padding only if menu is closed or when value is stored
if (
!apollo.hasClass(menu, settings.openclass) &&
!apollo.hasClass(document.body, settings.stickyinitiatedclass)
) {
// Calculate the height
var paddingtop = menuheight.toString() + "px";
// Set the padding on the body
document.body.setAttribute("style", "padding-top:" + paddingtop);
apollo.addClass(document.body, settings.stickyinitiatedclass);
}
}
}
}
// Initial load
window.addEventListener(
"load",
function () {
classes();
stickyMenu();
// Add a class after load
apollo.addClass(settings.wrapper, settings.loaded_class);
// Function to run after load
settings.onAfterLoad();
},
true
);
// On resize
window.addEventListener(
"resize",
function () {
// Run immediately
classes();
stickyMenu();
// Run again after 200 ms for safari OSX when scrollbars are visible and you're resizing to a smaller window
waitForFinalEvent(function () {
classes();
stickyMenu();
}, 200);
},
true
);
// Accessible focus menu
var menulinks = menu.getElementsByTagName("a");
for (var i = 0; i < menulinks.length; i++) {
menulinks[i].onblur = function () {
var focusedItems = document.getElementsByClassName("rm-focused");
for (var f = 0; f < focusedItems.length; f++) {
apollo.removeClass(focusedItems[f], settings.focusedclass);
}
};
menulinks[i].onfocus = function () {
// Remove the class
var siblings = this.parentNode.parentNode.querySelectorAll("li");
if (siblings.length) {
for (var f = 0; f < siblings.length; f++) {
apollo.removeClass(siblings[f], settings.focusedclass);
}
}
// Add the class
var parent = getParents(this, "LI", menu);
if (parent.length) {
for (var f = 0; f < parent.length; f++) {
apollo.addClass(parent[f], settings.focusedclass);
}
}
};
}
// Clicking the toggle button
togglebutton.onclick = function () {
menu = settings.menu || settings.wrapper.getElementsByTagName("ul")[0];
// Show the menu
if (apollo.hasClass(menu, settings.hideclass)) {
// Function to run before toggling
settings.onBeforeToggleOpen();
// Show the menu
apollo.removeClass(menu, settings.hideclass);
apollo.addClass(menu, settings.openclass);
// Add class to body element you could use for styling
apollo.addClass(document.body, settings.openbodyclass);
// Set toggled class to toggle button
apollo.addClass(togglebutton, settings.toggleclosedclass);
togglebutton.setAttribute("aria-expanded", "true");
togglebutton.setAttribute("aria-pressed", "true");
// Set and remove animate class after duration
apollo.addClass(menu, settings.animateopenclass);
setTimeout(function () {
// Remove animation class
apollo.removeClass(menu, settings.animateopenclass);
// Function to run after toggling
settings.onAfterToggleOpen();
}, settings.animateduration);
}
// Hide the menu
else if (apollo.hasClass(menu, settings.openclass)) {
menu = settings.menu || settings.wrapper.getElementsByTagName("ul")[0];
// Function to run before toggling
settings.onBeforeToggleClose();
// Properly set animating classes
apollo.addClass(menu, settings.animatecloseclass);
// Remove toggled class to toggle button
apollo.removeClass(togglebutton, settings.toggleclosedclass);
togglebutton.setAttribute("aria-expanded", "false");
togglebutton.setAttribute("aria-pressed", "false");
// When animation is done
setTimeout(function () {
// Remove animate class
apollo.removeClass(menu, settings.animatecloseclass);
// Hide the menu
apollo.removeClass(menu, settings.openclass);
apollo.addClass(menu, settings.hideclass);
// Remove class from body element you could use for styling
apollo.removeClass(document.body, settings.openbodyclass);
// Function to run after toggling
settings.onAfterToggleClose();
}, settings.animateduration);
}
// Check if the menu still fits
stickyMenu();
return false;
};
// Clicking the sub toggles button
if (hasChildren) {
menu = settings.menu || settings.wrapper.getElementsByTagName("ul")[0];
forEach(subtoggles, function (value, prop) {
// Variables
var subtoggle = subtoggles[prop];
var submenu = subtoggle.parentNode.getElementsByTagName("ul")[0];
// Click buttons and show submenu
subtoggle.onclick = function () {
// Open
if (apollo.hasClass(submenu, settings.hideclass)) {
// Function to run before toggling
settings.onBeforeSubToggleOpen();
// Properly set animating classes
apollo.addClass(menu, settings.subanimateopenclass);
// Add class to subtoggle button
apollo.addClass(subtoggle, settings.toggleclosedclass);
subtoggle.setAttribute("aria-expanded", "true");
subtoggle.setAttribute("aria-pressed", "true");
// Show sub menu
apollo.removeClass(submenu, settings.hideclass);
setTimeout(function () {
// Remove animate class
apollo.removeClass(menu, settings.subanimateopenclass);
// Function to run before toggling
settings.onAfterSubToggleOpen();
}, settings.subanimateduration);
}
// Close
else if (!apollo.hasClass(submenu, settings.hideclass)) {
// Function to run before toggling
settings.onBeforeSubToggleClose();
// Properly set animating classes
apollo.addClass(menu, settings.subanimatecloseclass);
// Remove class from subtoggle button
apollo.removeClass(subtoggle, settings.toggleclosedclass);
subtoggle.setAttribute("aria-expanded", "false");
subtoggle.setAttribute("aria-pressed", "false");
setTimeout(function () {
// Remove animate class
apollo.removeClass(menu, settings.subanimatecloseclass);
// Set classes
apollo.addClass(submenu, settings.hideclass);
// Function to run before toggling
settings.onAfterSubToggleClose();
}, settings.subanimateduration);
}
// Check if the menu still fits
stickyMenu();
};
});
}
}
/**
* Initialize Plugin
* @public
* @param {Object} options User settings
*/
exports.init = function (options) {
// feature test
if (!supports) {
document.documentElement.className +=
" " + settings.noresponsivemenuclass;
return;
}
settings = extend(defaults, options || {}); // Merge user options with defaults
initialize(settings);
};
// Public APIs
return exports;
});
responsivemenu.init({
wrapper: document.querySelector(".navigation_container1"),
togglecontent: "menu",
sticky: 0,
// animateduration: 1000,
// subanimateduration: 1000,
onAfterInit: function () {
console.log("after init");
},
onAfterLoad: function () {
console.log("after load");
},
onBeforeToggleOpen: function () {
console.log("before toggle open");
},
onAfterToggleOpen: function () {
console.log("after toggle open");
},
onBeforeToggleClose: function () {
console.log("before toggle close");
},
onAfterToggleClose: function () {
console.log("after toggle close");
},
onBeforeSubToggleOpen: function () {
console.log("before sub toggle open");
},
onAfterSubToggleOpen: function () {
console.log("after sub toggle open");
},
onBeforeSubToggleClose: function () {
console.log("before sub toggle close");
},
onAfterSubToggleClose: function () {
console.log("after sub toggle close");
}
});
// responsivemenu.init({
// wrapper: document.querySelector('.navigation_container2'),
// onAfterInit: function() {
// console.log('after init 2');
// }
// });
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.