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; background: #00000073;
} }
li a:hover, li a:hover {
.nav-logo:hover {
background: #00000028; background: #00000028;
transition: 0.3s; transition: 0.3s;
} }
.nav-logo:hover {
filter: invert(100%);
transition: 0.3s;
}
.hide { .hide {
width: 3.55rem; width: 3.55rem;
} }

2
static/portfolio/index.html
View File

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

40
static/portfolio/index.js
View File

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