jonasled2/website
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

zoom nav text if hover nav item

Browse source
This commit is contained in:
Jonas Leder 2021-09-25 23:37:15 +02:00
parent fcb0cd7c3d
commit 322b67d34f
No known key found for this signature in database
GPG key ID: CC3C488E27DFF5CA
2 changed files with 26 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
js/customElements/mainMenu.js
View file

@ -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";
}
});

30
scss/_menue.scss
View file

@ -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;
}
}