Table of Contents
How to create Vertical Menu | vertical menu in html css javascript
Welcome🎉 to Code With Random blog. In this blog, we learn that how we create a Vertical Menu. We use HTML, Css, and javascript for this Vertical Menu. Hope you enjoy our blog so let’s start with a basic HTML structure for a Vertical Menu.
HTML code
<nav class="navbar">
<ul class="navbar__menu">
<li class="navbar__item">
<a href="#" class="navbar__link"><i data-feather="home"></i><span>Home</span></a>
</li>
<li class="navbar__item">
<a href="#" class="navbar__link"><i data-feather="message-square"></i><span>Messages</span></a>
</li>
<li class="navbar__item">
<a href="#" class="navbar__link"><i data-feather="users"></i><span>Customers</span></a>
</li>
<li class="navbar__item">
<a href="#" class="navbar__link"><i data-feather="folder"></i><span>Projects</span></a>
</li>
<li class="navbar__item">
<a href="#" class="navbar__link"><i data-feather="archive"></i><span>Resources</span></a>
</li>
<li class="navbar__item">
<a href="#" class="navbar__link"><i data-feather="help-circle"></i><span>Help</span></a>
</li>
<li class="navbar__item">
<a href="#" class="navbar__link"><i data-feather="settings"></i><span>Settings</span></a>
</li>
</ul>
</nav>
There is all HTML code for the Vertical Menu. Now, you can see output without CSS, then we write css & javascript for Vertical Menu.
$borderRadius: 10px;
$spacer: 1rem;
$primary: #406ff3;
$text: #6a778e;
$linkHeight: $spacer * 3.5;
$timing: 250ms;
$transition: $timing ease all;
@mixin gooeyEffect($i) {
@keyframes gooeyEffect-#{$i} {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(0.5, 1.5);
}
100% {
transform: scale(1, 1);
}
}
}
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap');
body{
background: #eaeef6;
font-family: 'Open Sans', sans-serif;
}
.navbar{
$ref: &;
position: fixed;
top: $spacer;
left: $spacer;
background: #fff;
border-radius: $borderRadius;
padding: $spacer 0;
box-shadow: 0 0 40px rgba(0,0,0,0.03);
height: calc(100vh - #{$spacer*4});
&__link{
position:relative;
display: flex;
align-items: center;
justify-content: center;
height: $linkHeight;
width: $spacer * 5.5;
color: $text;
transition: $transition;
span{
position: absolute;
left: 100%;
transform: translate(-($spacer*3));
opacity: 0;
color: $primary;
background: #fff;
padding: $spacer *0.75;
transition: $transition;
border-radius: $borderRadius * 1.75;
}
&:hover{
color: #fff;
span{
opacity: 1;
transform: translate(0);
}
}
}
&__menu{
position: relative;
}
&__item{
&:last-child{
&:before{
content: '';
position: absolute;
opacity: 0;
z-index: -1;
top: 0;
left: $spacer;
width: $linkHeight;
height: $linkHeight;
background: $primary;
border-radius: $borderRadius * 1.75;
transition: $timing cubic-bezier(1, 0.2, 0.1, 1.2) all;
}
}
@for $i from 1 to 12 {
&:first-child:nth-last-child(#{$i}),
&:first-child:nth-last-child(#{$i}) ~ li {
&:hover {
~ li:last-child:before {
opacity: 1;
}
}
&:last-child:hover:before {
opacity: 1;
}
@for $j from 1 to $i {
&:nth-child(#{$j}):hover,
&:nth-child(#{$j}):focus,
&:nth-child(#{$j}):focus-within {
~ li:last-child:before {
@include gooeyEffect($j);
top: (100% / $i) * ($j - 1);
animation: gooeyEffect-#{$j} $timing 1;
}
}
}
&:last-child:hover:before,
&:last-child:focus:before,
&:last-child:focus-within:before {
@include gooeyEffect($i);
top: (100% / $i) * ($i - 1);
animation: gooeyEffect-#{$i} $timing 1;
}
}
}
}
}
Now we have completed our SCSS section, you can install scss extension for vs code, also you convert scss into css by any online tool. Here is our updated output CSS.
https://unpkg.com/feather-icons
feather.replace()
we use feather icon in javascript, we make this by only html and css but for icon, we use just call feather icon using javascript.
Final output
Now we have completed our javascript section, Here is our updated output with javascript. Hope you like the Vertical Menu. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!
In this post, we learn how to create a Vertical Menu using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
hi, I cant import JS file. Can you Help me?