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

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

Post a Comment

Previous Post Next Post