From 322b67d34f26c401668363dcde2f1cfcb356ebc1 Mon Sep 17 00:00:00 2001
From: Jonas Leder <jonas@jonasled.de>
Date: Sat, 25 Sep 2021 23:37:15 +0200
Subject: [PATCH] zoom nav text if hover nav item
---
js/customElements/mainMenu.js | 16 +++++++++-------
scss/_menue.scss | 30 +++++++++++++++++-------------
2 files changed, 26 insertions(+), 20 deletions(-)
diff --git a/js/customElements/mainMenu.js b/js/customElements/mainMenu.js
index 6719582..fe24c52 100644
--- a/js/customElements/mainMenu.js
+++ b/js/customElements/mainMenu.js
@@ -4,8 +4,8 @@ class MainMenu extends HTMLElement {
this.generateMenu();
}
- async generateMenu(){
- let menu = await (await fetch("/API/mainMenu.json")).json();
+ async generateMenu() {
+ let menu = await (await fetch("/API/mainMenu.json")).json();
let menuContainer = document.createElement("div");
menuContainer.className = "mainMenuContainer";
@@ -18,7 +18,7 @@ class MainMenu extends HTMLElement {
}
- for(let i = 1; i <= 3; i++) {
+ for (let i = 1; i <= 3; i++) {
let bar = document.createElement("div");
bar.className = "bar" + i;
burgerMenu.appendChild(bar);
@@ -27,23 +27,25 @@ class MainMenu extends HTMLElement {
menu.forEach((element) => {
- if(element["type"] === "link"){
+ if (element["type"] === "link") {
let a = document.createElement("a");
a.href = element["url"];
a.innerText = element["name"];
+ a.classList.add("navLink");
menuContainer.appendChild(a);
- if(window.location['pathname'] === element["url"]){
+ if (window.location['pathname'] === element["url"]) {
document.title = element["name"] + " - Jonas Leder";
}
- } else if(element["type"] === "dropdown"){
+ } else if (element["type"] === "dropdown") {
let dropdown = document.createElement("div");
dropdown.className = "dropdown";
let a = document.createElement("a");
a.href = element["url"];
+ a.classList.add("navLink");
a.innerText = element["name"];
dropdown.appendChild(a)
@@ -60,7 +62,7 @@ class MainMenu extends HTMLElement {
let br = document.createElement("br");
dropdownContent.appendChild(br);
- if(window.location['pathname'] === childElement["url"]){
+ if (window.location['pathname'] === childElement["url"]) {
document.title = childElement["name"] + " - Jonas Leder";
}
});
diff --git a/scss/_menue.scss b/scss/_menue.scss
index 2a2b5e1..894c2ae 100644
--- a/scss/_menue.scss
+++ b/scss/_menue.scss
@@ -1,4 +1,4 @@
-#mainMenu{
+#mainMenu {
position: absolute;
top: 20px;
right: 100px;
@@ -6,7 +6,6 @@
align-content: flex-end;
justify-content: flex-end;
width: 100%;
-
a {
color: white;
text-align: center;
@@ -21,47 +20,52 @@
position: relative;
}
-.dropdown-content{
+.dropdown-content {
position: absolute;
display: none;
width: max-content;
left: 50%;
transform: translateX(-50%);
-
a {
background-color: $back-color-3;
border-bottom: $back-color-2 solid 2px;
width: 100%;
color: $text-color;
transition: background-color $link-hover-animation-time linear;
-
- &:first-of-type{
+ &:first-of-type {
border-top-left-radius: $border-radius-sub-nav;
border-top-right-radius: $border-radius-sub-nav;
}
-
&:last-of-type {
border-bottom: none;
border-bottom-left-radius: $border-radius-sub-nav;
border-bottom-right-radius: $border-radius-sub-nav;
}
-
- &:hover{
+ &:hover {
background-color: $back-color-2;
}
}
}
-.dropdown:hover .dropdown-content {
- display: block;
+.navLink:hover {
+ transform: scale(1.2);
+}
+
+.dropdown:hover {
+ .navLink {
+ transform: scale(1.2);
+ }
+ .dropdown-content {
+ display: block;
+ }
}
-.menueSelected{
+.menueSelected {
text-decoration: underline !important;
}
@media only screen and (max-width: 600px) {
- #mainMenu{
+ #mainMenu {
right: 10px;
}
}
\ No newline at end of file
--
GitLab