host/xiaowang
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add main navigation menu

Browse source
This commit is contained in:
Paul Nicoué 2022-06-07 16:50:09 +02:00
parent e80094dfd8
commit 9bda79a1d5
6 changed files with 145 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

22
assets/js/app.js
View file

@ -23,6 +23,11 @@ let videoPlayers = [];
const headerBar = document.querySelector('.header-bar');
let scrollOffset = 0;
// NAVIGATION MENU ANIMATION //
const mainNavBtn = document.querySelector('.header-bar__nav-button');
const mainNavMenu = document.querySelector('.header-bar__nav-menu');
// ----------------------------------------------------------------------------
// UTILS
// ----------------------------------------------------------------------------
@ -243,6 +248,19 @@ function toggleHeaderBar() {
}
}
// NAVIGATION MENU ANIMATION //
// Show main navigation menu on button click event
function showMainNavMenu() {
if (mainNavBtn && mainNavMenu) {
mainNavBtn.addEventListener('click', function(e) {
mainNavBtn.classList.toggle('header-bar__nav-button--custom-focus');
mainNavMenu.classList.toggle('header-bar__nav-menu--visible');
// document.body.classList.toggle('body--hidden-overflow-y');
});
}
}
// ----------------------------------------------------------------------------
// PROGRAM
// ----------------------------------------------------------------------------
@ -270,3 +288,7 @@ toggleVideosFullScreen();
document.addEventListener('scroll', function() {
toggleHeaderBar();
});
// NAVIGATION MENU ANIMATION //
showMainNavMenu();