42 lines
802 B
JavaScript
42 lines
802 B
JavaScript
|
|
||
|
/**
|
||
|
* Open the menu, when click on the menu header button
|
||
|
*/
|
||
|
|
||
|
var menuOpened = false;
|
||
|
|
||
|
function toggleMenu() {
|
||
|
|
||
|
var nav = document.querySelector("header nav");
|
||
|
var menu = document.querySelector("header nav ul");
|
||
|
|
||
|
var maxHeight = (menu.childElementCount * 3.25 + 1) + "rem";
|
||
|
|
||
|
if (!menuOpened) {
|
||
|
|
||
|
menuOpened = true;
|
||
|
|
||
|
nav.style.height = "100vh";
|
||
|
nav.style.width = "100vw";
|
||
|
nav.style.backgroundColor = "hsla(0, 0%, 0%, 0.75)";
|
||
|
|
||
|
menu.style.opacity = "1";
|
||
|
menu.style.height = maxHeight;
|
||
|
|
||
|
} else {
|
||
|
|
||
|
menuOpened = false;
|
||
|
|
||
|
menu.style.opacity = "0";
|
||
|
menu.style.height = "0rem";
|
||
|
|
||
|
nav.style.backgroundColor = "transparent";
|
||
|
nav.style.height = "auto";
|
||
|
nav.style.width = "auto";
|
||
|
}
|
||
|
}
|
||
|
|
||
|
document.querySelector("header nav button").addEventListener("click", toggleMenu);
|
||
|
|
||
|
|