Create a Animated Sidebar Menu using HTML CSS And JavaScript

In this video we will show you How to Create an Animated Sidebar Menu with HTML CSS and JavaScript

Source Code :


<!DOCTYPE html>
<html lang="en">

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href=""
        <link rel="stylesheet" href="style.css">
        <title>Animated Sidenav </title>

       <div id="sideBarNav" class="sidenav">
               <a href="#">Home</a>
               <a href="#">About</a>
               <a href="#">Services</a>
               <a href="#">Clients</a>
               <a href="#">Contact</a>
               <div class="icon">
                        <i class="fas fa-times"></i> 
       <div class="icon">
                <i class="fas fa-bars"></i> 

        <script src="app.js"></script>





  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Courier New', Courier, monospace;
  background:#2DBACB ;

.icon .fas{
  color: #111;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 30px;
  cursor: pointer;

.sidenav {
  height: 100%;
  width: 0;
  background-color: #111;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.6s;

.sidenav a {
  padding: 9px 9px 9px 33px;
  text-decoration: none;
  font-size: 22px;
  color: #f1f1f1;
  display: block;
  transition: 0.4s;
  border-bottom: 1px solid #f1f1f1;

.sidenav a:hover{
  background:#2DBACB ;

.sidenav .fa-times{
  color: #ffffff;
  font-size: 20px;



//select element fro the dom open, close and sidebarnav div 

let closeBtn = document.querySelector('.fa-times');
let openBtn = document.querySelector('.fa-bars');
let sideBarMenu = document.querySelector('#sideBarNav')

// Add event listener to open icon 
openBtn.addEventListener('click', ()=>{ ="250px";

// Add event listener to close icon 
closeBtn.addEventListener('click', ()=>{ ="0";

#html #css #javascript

Create a Animated Sidebar Menu using HTML CSS And JavaScript
21.85 GEEK