I need to make a side navigation menu.
What I have so far:
function toggle() {
document
.querySelector('.nuxt-link-exact-active')
.classList.remove('nuxt-link-exact-active')
event.target.classList.add('nuxt-link-exact-active')
}
.default-layout {
background: purple;
min-height: 100%;
display: grid;
grid-template-columns: 230px 1fr;
}
main {
background: #000;
border-radius: 0.9rem;
margin: 1.5rem 2rem 1.5rem 0;
padding: 2rem;
}
nav ul {
display: grid;
grid-gap: 1rem;
justify-content: center;
padding: 5rem 0;
grid-template-columns: 100%;
padding-left: 2rem;
list-style: none;
}
nav ul li .nav-item {
cursor: pointer;
color: #fff;
display: block;
padding: 1.5rem;
}
nav ul li .nav-item.nuxt-link-exact-active {
background: #000;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
<div class="default-layout">
<nav>
<ul>
<li>
<a class="nav-item nuxt-link-exact-active" onclick="toggle()"
>Menu 1</a
>
</li>
<li>
<a class="nav-item" onclick="toggle()">Menu 2</a>
</li>
<li>
<a class="nav-item" onclick="toggle()">Menu 3</a>
</li>
<li>
<a class="nav-item" onclick="toggle()">Menu 4</a>
</li>
</ul>
</nav>
<main>
<p>content</p>
</main>
</div>
The look I need, but I haven't been successful:
In addition to this look, I need effects when navigating between items, but I have no idea how to do them, here are some examples of smooth effects I would like:
https://dribbble.com/shots/5357786-Desktop-Messenger-Spaces-Animation