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

styled mobile menu collapse

Browse Source
This commit is contained in:
Andrew Simonson
2022-05-17 01:37:10 -04:00
parent f7ab7df8b7
commit de5ae1ede6
2 changed files with 27 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.css
View File

@@ -25,6 +25,7 @@ body {
float: right; float: right;
margin-right: 1rem; margin-right: 1rem;
margin-top: .25rem; margin-top: .25rem;
cursor: pointer;
} }
h1, h2 { h1, h2 {
@@ -71,6 +72,11 @@ a {
left: 0; left: 0;
transition: .4s; transition: .4s;
overflow: hidden; overflow: hidden;
border-bottom: solid 3px rgb(156, 49, 45, .4);
}
.navControl{
transition: .4s;
} }
.navBar { .navBar {

27
src/responsive.js
View File

@@ -1,6 +1,5 @@
window.onload = function () { onLoaded() }; window.onload = function () { onLoaded() };
function onLoaded() { function onLoaded() {
scrollFunction(); scrollFunction();
resizer(); resizer();
@@ -12,11 +11,13 @@ function resizer() {
scrollFunction(); scrollFunction();
const e = document.querySelector(".navControl"); const e = document.querySelector(".navControl");
if (window.innerWidth > 1200) { // desktop view if (window.innerWidth > 1200) { // desktop view
e.style.display = ""; bottomBorderOff();
e.style.maxHeight = `${e.scrollHeight + 10}px`;
window.onscroll = function () { scrollFunction() }; window.onscroll = function () { scrollFunction() };
} }
else { // mobile view else { // mobile view
e.style.display = "none"; e.style.maxHeight = '0px';
bottomBorderOn();
window.onscroll = ''; window.onscroll = '';
document.querySelector('.header').style.backgroundColor = '#1a1a1a'; document.querySelector('.header').style.backgroundColor = '#1a1a1a';
document.querySelector('.header > a > h1').style.fontSize = "1.5rem"; document.querySelector('.header > a > h1').style.fontSize = "1.5rem";
@@ -39,11 +40,23 @@ function scrollFunction() {
} }
} }
function toggleMenu(){ function toggleMenu() {
const e = document.querySelector(".navControl"); const e = document.querySelector(".navControl");
if(e.style.display === "none"){ if (e.style.maxHeight === '0px') {
e.style.display = ""; bottomBorderOff();
e.style.maxHeight = `${e.scrollHeight + 10}px`;
} else { } else {
e.style.display = "none"; bottomBorderOn();
e.style.maxHeight = '0px';
} }
} }
function bottomBorderOn() {
const e = document.querySelector('.header');
e.style.borderBottomWidth = "3px";
}
function bottomBorderOff() {
const e = document.querySelector('.header');
e.style.borderBottomWidth = "0px";
}