I'm building a single page application in VueJs, and to this i would like to add a responsive NavBar. Whatever i try and do, it simply dosen't work.
I've tried many solution, the closest i get to my goal is the following:
HTML
<template>
<header>
<nav >
<img style="width: 100px; border-radius: 50%;" src="../.." alt="Name here">
<a href="/" >Name</a>
<ul >
<li >
<RouterLink to="#">1</RouterLink>
</li>
<li >
<RouterLink to="#">2</RouterLink>
</li>
<li >
<RouterLink to="#">3</RouterLink>
</li>
<li >
<RouterLink to="#">4</RouterLink>
</li>
<li >
<RouterLink to="#">5</RouterLink>
</li>
</ul>
<div >
<span ></span>
<span ></span>
<span ></span>
</div>
</nav>
</header>
</template>
CSS
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
header {
background-color: #ffffff;
}
.custom-header-li {
list-style: none;
}
.navbar {
min-height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
}
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
gap: 60px;
}
.nav-branding {
text-align: center;
}
.nav-link {
transition: 0.7s ease;
}
.nav-link:hover {
border-bottom: 3px solid #080808;
font-size: 20px;
transition: 0.5s;
color: #080808;
}
.hamburger {
display: none;
cursor: pointer;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #080808;
}
@media(max-width:767px) {
.hamburger {
display: block;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
gap: 0;
flex-direction: column;
background-color: #080808;
width: 100%;
text-align: center;
transition: 0.3s;
}
.nav-item {
margin: 16px 0;
}
.nav-menu:active {
left: 0;
}
}
</style>
JS
<script>
export default {
setup() {
window.addEventListener("click", function(event){
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
})
}
}
</script>
I tried printing, and see that the class changes to 'active' and it does - even the icon changes view, but the list dosen't show up ? Can anyone see what's wrong with the code?
I've also tried this solution for Vue: https://codepen.io/raphaelbensimon/pen/VGbLed (Excluded the loader/spinner)
Here the problem is that the 'ToggleIcon' just dosen't show up, at all!
Can someone please help? :D
CodePudding user response:
Just make a change in your css to:
.nav-menu.active {
left: 0;
}
It's work. Testing