andrew/asimonson1125.github.io
1
0
Fork 0
mirror of https://github.com/asimonson1125/asimonson1125.github.io.git synced 2026-02-25 05:09:49 -06:00
Code Issues Packages Projects Releases Wiki Activity

mobile menu overhaul

Browse Source
This commit is contained in:
Andrew Simonson
2022-05-22 01:08:51 -04:00
parent 08a73e66ef
commit 1502ed39ce
6 changed files with 41 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/responsive.js
View File

@@ -1,28 +1,33 @@
window.onpageshow = function () { onLoaded() };
window.onload = function () { onLoaded() };
function onLoaded() {
console.log("loaded trigger");
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
window.onresize = function () { resizer() };
document.getElementById("menu").onclick = function () { toggleMenu() };
resizer();
if(window.innerWidth < 1200){
const e = document.querySelector(".navControl");
e.style.maxHeight = '0px';
}
}
function resizer() {
scrollFunction();
const e = document.querySelector(".navControl");
if (window.innerWidth > 1200) { // desktop view
scrollFunction();
window.onscroll = function () { scrollFunction() };
bottomBorderOff();
e.style.maxHeight = `${e.scrollHeight + 10}px`;
}
else { // mobile view
window.onscroll = '';
document.querySelector('.header').style.backgroundColor = '#1a1a1a';
document.querySelector('.header > a > h1').style.fontSize = "1.5rem";
// document.querySelector('.header > h1').style.color = "#a8a8a8";
document.querySelectorAll('.navElement').forEach(x => { x.style.paddingTop = '.3rem'; x.style.paddingBottom = '.3rem'; x.style.fontSize = '1rem' });
// document.querySelector('.header > h1').style.color = "#ecebeb";
document.querySelector(".header").style.borderBottomWidth = '3px';
e.style.maxHeight = '0px';
bottomBorderOn();
}
document.querySelectorAll('.navElement *').forEach(x => { x.style.paddingTop = '.3rem'; x.style.paddingBottom = '.3rem'; x.style.fontSize = '1rem' });
}
}
function scrollFunction() {
@@ -30,32 +35,23 @@ function scrollFunction() {
document.querySelector('.header').style.backgroundColor = '#1a1a1a';
document.querySelector('.header > a > h1').style.fontSize = "1.5rem";
// document.querySelector('.header > h1').style.color = "#a8a8a8";
document.querySelectorAll('.navElement').forEach(x => { x.style.paddingTop = '.3rem'; x.style.paddingBottom = '.3rem'; x.style.fontSize = '1rem' });
document.querySelectorAll('.navElement *').forEach(x => { x.style.paddingTop = '.3rem'; x.style.paddingBottom = '.3rem'; x.style.fontSize = '1rem' });
} else {
document.querySelector('.header').style.backgroundColor = 'rgba(0,0,0,0)';
document.querySelector('.header > a > h1').style.fontSize = "2rem";
// document.querySelector('.header > h1').style.color = "#ecebeb";
document.querySelectorAll('.navElement').forEach(x => { x.style.paddingTop = '.5rem'; x.style.paddingBottom = '.5rem'; x.style.fontSize = '1.2rem' });
document.querySelectorAll('.navElement *').forEach(x => { x.style.paddingTop = '.5rem'; x.style.paddingBottom = '.5rem'; x.style.fontSize = '1.2rem' });
}
}
function toggleMenu() {
export function toggleMenu() {
const e = document.querySelector(".navControl");
const bar = document.querySelector(".header");
if (e.style.maxHeight === '0px') {
bottomBorderOff();
e.style.maxHeight = `${e.scrollHeight + 10}px`;
bar.style.borderBottomWidth = '0px';
} else {
bottomBorderOn();
e.style.maxHeight = '0px';
bar.style.borderBottomWidth = '3px';
}
}
function bottomBorderOn() {
const e = document.querySelector('.header');
e.style.borderBottomWidth = "3px";
}
function bottomBorderOff() {
const e = document.querySelector('.header');
e.style.borderBottomWidth = "0px";
}