trude/web
1
0
Fork 0
mirror of https://github.com/TrudeEH/web.git synced 2025-12-06 08:23:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor navigation styles and update logo click behavior

Browse Source
This commit is contained in:
TrudeEH
2025-02-17 14:54:25 +00:00
parent 90bac86d86
commit ad2baf6b94
3 changed files with 28 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
static/portfolio/css/nav.css
View File

@@ -121,12 +121,16 @@ nav li a:active {
background: #00000073;
}
li a:hover,
.nav-logo:hover {
li a:hover {
background: #00000028;
transition: 0.3s;
}
.nav-logo:hover {
filter: invert(100%);
transition: 0.3s;
}
.hide {
width: 3.55rem;
}

2
static/portfolio/index.html
View File

@@ -18,7 +18,7 @@
<img
class="nav-logo"
src="img/dragon_logo.svg"
onclick="menuToggle(this)"
onclick="window.location.href='/'"
alt="Trude's Logo"
/>
<div id="nav-container">

40
static/portfolio/index.js
View File

@@ -1,20 +1,22 @@
const navElements = document.querySelectorAll("nav #nav-container a");
pointer = 1;
// Code to toggle the menu; Disabled to serve as back button On HTML: onclick="menuToggle(this)"
function menuToggle(x) {
if (x.classList.contains("menuAlt")) {
document.getElementById("nav").classList.add("nav-open");
setTimeout(() => {
document.getElementById("nav").classList.remove("nav-open");
document.getElementById("nav-container").style.display = "flex";
}, 200);
} else {
document.getElementById("nav").classList.add("nav-close");
document.getElementById("nav-container").style.display = "none";
setTimeout(() => {
document.getElementById("nav").classList.remove("nav-close");
}, 200);
}
x.classList.toggle("menuAlt");
document.getElementById("nav").classList.toggle("hide");
}
// const navElements = document.querySelectorAll("nav #nav-container a");
// pointer = 1;
// function menuToggle(x) {
// if (x.classList.contains("menuAlt")) {
// document.getElementById("nav").classList.add("nav-open");
// setTimeout(() => {
// document.getElementById("nav").classList.remove("nav-open");
// document.getElementById("nav-container").style.display = "flex";
// }, 200);
// } else {
// document.getElementById("nav").classList.add("nav-close");
// document.getElementById("nav-container").style.display = "none";
// setTimeout(() => {
// document.getElementById("nav").classList.remove("nav-close");
// }, 200);
// }
// x.classList.toggle("menuAlt");
// document.getElementById("nav").classList.toggle("hide");
// }