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 :

HTML


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

<head>
        <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="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
                integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
                crossorigin="anonymous">
        <link rel="stylesheet" href="style.css">
        <title>Animated Sidenav </title>
</head>

<body>
       <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>
       </div> 
       <div class="icon">
                <i class="fas fa-bars"></i> 
       </div>

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

</html>

CSS


/* 
#2DBACB 
#111

*/

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  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;

}

JAVASCRIPT


//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', ()=>{
sideBarMenu.style.width ="250px";
})

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

#html #css #javascript