I'm trying to create a hamburger menu which slides out with an animation. I tried adding transform in the y axis but it doesn't slide out with an animation. The links has underline too. I added text-decoration: none but the link still has underline. what am I doing wrong in my code for these two errors?
<template>
<nav>
<div class="brand">brandName</div>
<ul class="nav-links" :class="'nav-links--' + isOpen">
<li v-for="(list, $index) in navLinks" :key="$index">
<a :href="list.link">{{ list.name }}</a>
</li>
<li id="button-part">
<button>Hello</button>
</li>
</ul>
<div @click="mobileNav()" class="burger">
<i class="fa fa-bars"></i>
</div>
</nav>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
current: 0,
isOpen: "closed",
navLinks: [
{
name: "Home",
link: "/home",
},
{ name: "About", link: "/about" },
{
name: "Contacts",
link: "/contact",
},
],
};
},
methods: {
mobileNav() {
if (this.isOpen === "closed") {
this.isOpen = "open";
} else {
this.isOpen = "closed";
}
console.log(this.isOpen);
},
},
};
</script>
<style>
ul.nav-links li {
list-style: none;
text-decoration: none;
}
nav {
display: flex;
justify-content: space-around;
background-color: grey;
height: 20px;
width: 100%;
margin: 0;
padding: 0;
text-decoration: none;
}
.brand {
margin-left: 2px;
}
ul.nav-links {
text-decoration: none;
position: absolute;
display: flex;
flex-direction: column;
border-top: solid 1px black;
width: 100%;
top: 10px;
background-color: red;
align-items: center;
opacity: 0.8;
transition: transform 5s;
transform: scaleY(1);
}
.nav-links--open {
display: block;
transform: scaleY(1);
}
.nav-links--closed {
display: none !important;
transform: scaleY(0);
}
.burger {
display: block;
}
#button-part {
margin-top: 2px;
}
@media (min-width: 768px) {
.brand {
margin-left: 5px;
}
ul.nav-links {
position: absolute;
display: flex;
flex-direction: row;
border-top: solid 1px black;
align-items: center;
justify-content: center;
width: 100%;
top: 10px;
background-color: red;
opacity: 0.8;
transition: transform 0.5s ease-in;
color: white;
text-decoration: none;
}
.nav-links--open {
display: block;
}
.nav-links--closed {
display: none !important;
}
ul.nav-links li {
opacity: 1;
padding: 0 25px;
text-decoration: none;
}
.burger {
display: block;
color: black;
}
}
@media (min-width: 1200px) {
nav {
background-color: red;
display: flex;
justify-content: space-around;
}
.brand {
display: flex;
align-items: center;
color: black;
font-size: 20px;
margin-left: 20px;
}
ul.nav-links {
position: static;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
border: none;
text-decoration: none;
padding-top: 0px;
margin-top: 9px;
}
ul.nav-links li {
color: black;
text-decoration: none;
}
.burger {
display: none;
cursor: pointer;
}
.brand > img {
height: 50px;
width: 85px;
}
}
</style>
