handshake/js/nav.js

64 lines
1.8 KiB
JavaScript

window.addEventListener('load', function(e){
/*
* Nav Bar
*/
// Disable no-js fixes
const navBar = document.getElementById('navBar');
if (navBar.classList) {
navBar.classList.remove('no-js')
}
const sideNav = document.getElementById('burgernav');
if( sideNav ) {
const bars = document.getElementById('nav-toggle');
const overlay = document.getElementById('overlay');
function toggleNav(e){
sideNav.classList.toggle('dropped');
document.body.classList.toggle('active-nav');
}
sideNav.addEventListener('click', function(e){
// if a tag has a #id for the href
if( e.target.nodeName === 'A' && e.target.hash){ toggleNav(); }
});
bars && bars.addEventListener('click', toggleNav);
overlay && overlay.addEventListener('click', toggleNav);
}
/*
* Drop down
*
* Supports multiple dropdowns
*/
const dropdownMenus = document.getElementsByClassName('dropdown');
if( !dropdownMenus.length) { return }
Array.prototype.forEach.call( dropdownMenus, function( item, index, arr ){
// add event listeners to all dropdown elements
item.addEventListener( 'mouseover', showDropDown );
item.addEventListener( 'mouseleave', hideDropDown );
});
function showDropDown( e ){
console.log("show")
const target = e.target;
const from = e.fromElement;
// if dropdown link then dont show dropdown
if( target.nodeName !== 'A' ||
( (from && from.classList) && from.classList.contains('dropdown-menu') ) ) { return }
const dropdownMenu = target.nextElementSibling;
dropdownMenu && dropdownMenu.classList.remove('hide');
}
function hideDropDown( e ){
const dropdownMenu = e.target.lastElementChild;
dropdownMenu.classList.add('hide');
}
});