zoom nav text if hover nav item
This commit is contained in:
parent
fcb0cd7c3d
commit
322b67d34f
2 changed files with 26 additions and 20 deletions
|
@ -4,8 +4,8 @@ class MainMenu extends HTMLElement {
|
||||||
this.generateMenu();
|
this.generateMenu();
|
||||||
}
|
}
|
||||||
|
|
||||||
async generateMenu(){
|
async generateMenu() {
|
||||||
let menu = await (await fetch("/API/mainMenu.json")).json();
|
let menu = await (await fetch("/API/mainMenu.json")).json();
|
||||||
let menuContainer = document.createElement("div");
|
let menuContainer = document.createElement("div");
|
||||||
menuContainer.className = "mainMenuContainer";
|
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");
|
let bar = document.createElement("div");
|
||||||
bar.className = "bar" + i;
|
bar.className = "bar" + i;
|
||||||
burgerMenu.appendChild(bar);
|
burgerMenu.appendChild(bar);
|
||||||
|
@ -27,23 +27,25 @@ class MainMenu extends HTMLElement {
|
||||||
|
|
||||||
|
|
||||||
menu.forEach((element) => {
|
menu.forEach((element) => {
|
||||||
if(element["type"] === "link"){
|
if (element["type"] === "link") {
|
||||||
let a = document.createElement("a");
|
let a = document.createElement("a");
|
||||||
a.href = element["url"];
|
a.href = element["url"];
|
||||||
a.innerText = element["name"];
|
a.innerText = element["name"];
|
||||||
|
a.classList.add("navLink");
|
||||||
|
|
||||||
menuContainer.appendChild(a);
|
menuContainer.appendChild(a);
|
||||||
|
|
||||||
if(window.location['pathname'] === element["url"]){
|
if (window.location['pathname'] === element["url"]) {
|
||||||
document.title = element["name"] + " - Jonas Leder";
|
document.title = element["name"] + " - Jonas Leder";
|
||||||
}
|
}
|
||||||
|
|
||||||
} else if(element["type"] === "dropdown"){
|
} else if (element["type"] === "dropdown") {
|
||||||
let dropdown = document.createElement("div");
|
let dropdown = document.createElement("div");
|
||||||
dropdown.className = "dropdown";
|
dropdown.className = "dropdown";
|
||||||
|
|
||||||
let a = document.createElement("a");
|
let a = document.createElement("a");
|
||||||
a.href = element["url"];
|
a.href = element["url"];
|
||||||
|
a.classList.add("navLink");
|
||||||
a.innerText = element["name"];
|
a.innerText = element["name"];
|
||||||
|
|
||||||
dropdown.appendChild(a)
|
dropdown.appendChild(a)
|
||||||
|
@ -60,7 +62,7 @@ class MainMenu extends HTMLElement {
|
||||||
let br = document.createElement("br");
|
let br = document.createElement("br");
|
||||||
dropdownContent.appendChild(br);
|
dropdownContent.appendChild(br);
|
||||||
|
|
||||||
if(window.location['pathname'] === childElement["url"]){
|
if (window.location['pathname'] === childElement["url"]) {
|
||||||
document.title = childElement["name"] + " - Jonas Leder";
|
document.title = childElement["name"] + " - Jonas Leder";
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
#mainMenu{
|
#mainMenu {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
right: 100px;
|
right: 100px;
|
||||||
|
@ -6,7 +6,6 @@
|
||||||
align-content: flex-end;
|
align-content: flex-end;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: white;
|
color: white;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -21,47 +20,52 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-content{
|
.dropdown-content {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: none;
|
display: none;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
|
|
||||||
a {
|
a {
|
||||||
background-color: $back-color-3;
|
background-color: $back-color-3;
|
||||||
border-bottom: $back-color-2 solid 2px;
|
border-bottom: $back-color-2 solid 2px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
transition: background-color $link-hover-animation-time linear;
|
transition: background-color $link-hover-animation-time linear;
|
||||||
|
&:first-of-type {
|
||||||
&:first-of-type{
|
|
||||||
border-top-left-radius: $border-radius-sub-nav;
|
border-top-left-radius: $border-radius-sub-nav;
|
||||||
border-top-right-radius: $border-radius-sub-nav;
|
border-top-right-radius: $border-radius-sub-nav;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-of-type {
|
&:last-of-type {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
border-bottom-left-radius: $border-radius-sub-nav;
|
border-bottom-left-radius: $border-radius-sub-nav;
|
||||||
border-bottom-right-radius: $border-radius-sub-nav;
|
border-bottom-right-radius: $border-radius-sub-nav;
|
||||||
}
|
}
|
||||||
|
&:hover {
|
||||||
&:hover{
|
|
||||||
background-color: $back-color-2;
|
background-color: $back-color-2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown:hover .dropdown-content {
|
.navLink:hover {
|
||||||
display: block;
|
transform: scale(1.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.menueSelected{
|
.dropdown:hover {
|
||||||
|
.navLink {
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
.dropdown-content {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.menueSelected {
|
||||||
text-decoration: underline !important;
|
text-decoration: underline !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 600px) {
|
@media only screen and (max-width: 600px) {
|
||||||
#mainMenu{
|
#mainMenu {
|
||||||
right: 10px;
|
right: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in a new issue