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();
|
||||
}
|
||||
|
||||
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";
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue