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); } -.menueSelected{ +.dropdown:hover { + .navLink { + transform: scale(1.2); + } + .dropdown-content { + display: block; + } +} + +.menueSelected { text-decoration: underline !important; } @media only screen and (max-width: 600px) { - #mainMenu{ + #mainMenu { right: 10px; } } \ No newline at end of file