How to create Vertical Menu | vertical menu in html css javascript







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.

output

How to create Vertical Menu | vertical menu in html css javascript

CSS/SCSS Code

 $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.

output

How to create Vertical Menu | vertical menu in html css javascript

Javascript code 

use this link in javascript as a CDN link

 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 javascriptHope 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 🙏💕!

Share on:

0 thoughts on “How to create Vertical Menu | vertical menu in html css javascript”

Leave a Comment