<body><!-- 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="links.html" title="Item 2">Links, Nearby Places of Interest & Programs</a>
</li>
<li role="presentation">
<a role="menuitem"href="Articles-Shorts-Updates.html"title="Item 3">Articles-Shorts & Updates</a>
</li>
<li role="presentation">
<a role="menuitem" aria-haspopup="true" title="Item 4">Gardens</a>
<ul role="menu">
<li role="presentation">
<a role="menuitem" href="botanic_gardens.html" title="Test">Botanical Gardens</a>
</li>
<li role="presentation">
<a role="menuitem" href="nature_reserves.html" title="A long one">Nature Reserves</a>
</li>
<li role="presentation">
<a role="menuitem" href="UNESCO.html" title="Test">UNESCO</a>
<li role="presentation">
<a role="menuitem" href="national_parks.html" title="Test">National Parks</a>
</li>
</li>
</ul>
<li role="presentation">
<a role="menuitem"href="NT-on-the-road.html" title="Item 5">NT on the Road</a>
</li>
<li role="presentation">
<a role="menuitem"href="about-us.html" title="Item 6">About Us</a>
</li>
</li>
</ul>
</div>
<!--<div class="navigation_container navigation_container2" role="navigation" aria-label="Main menu">-->
<!--<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>-->
<!-- loading apollo dependancy -->
<script src="apollo.js"></script>
<!-- loading responsive menu -->
<script src="vanilla.js.responsive.menu.js"></script>
<!-- initializing the menu -->
<script type="text/javascript">
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');
// }
// });
</script>
</div>
</body>
</html>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;
}
}
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;
}
h1 {
margin-right: 5rem;
}
.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: #745d46;
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: #ac7e54;
}
.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: #ac7e54;
color: white;
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: #745d46;
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: #ac7e54;
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: flex;
/* 2 */
}
@media (min-width: 600px) {
.js .navigation_container {
display: flex;
/* 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;
}
#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: 6px;
position: relative;
font-size: 2rem;
}
/**
*
* 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;
});
(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;
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.