How to create menu toggle use Javascript & html and css

codepen    https://codepen.io/codepen-io-kelly/full/RwdrwEW  veiw

all  coding   https://codepen.io/codepen-io-kelly/pen/RwdrwEW  

HTML Schema

<nav class="main-navigation">

<button class="menu-toggle">

           <span class="bar"></span>

           <span class="bar"></span>

           <span class="bar"></span>

        </button>              

            

        <ul class="nav-menu">

           <li><a href="#">Home</a></li>

           <li><a href="#">Travel</a></li>

           <li><a href="#">fashion</a></li>

           <li><a href="#">food</a></li>

           <li><a href="#">Life-style</a></li>

           <li><a href="#">About</a></li>

       </ul>

   </nav>

add css 

hamburger style

.main-navigation .menu-toggle {

          display: block;

          cursor: pointer;

          position: absolute; //  absolute position 

          top:10px;   //postition

          right:20px;   //postition

          background-color: #fff;

          border:none;

}

Three lines in a hamburger      

 .main-navigation .menu-toggle .bar{

          display: block;

          width: 25px;

          height: 3px;

          margin: 5px auto;

          -webkit-transition: all 0.3s ease;

          transition: all 0.3s ease;

          background-color: #000;

}

.main-navigation .nav-menu{

          position: fixed;   //  fixed  position

          left: -100%;   // point css

          top: 0;

          height:100vh;  // height

          background-color:#000;

          width: 220px;   // display width of menu

          transition: 0.3s;

        }

javascrip

<script>

const toggle = document.querySelector(".menu-toggle");    //declare variables

const navMenu = document.querySelector(".nav-menu");   //declare variables

toggle.addEventListener("click", () => {

        toggle.classList.toggle("active");          // add class

        navMenu.classList.toggle("active");   // add class

})

</script>

add  humberger acitve css to change line

 .main-navigation .menu-toggle.active .bar:nth-child(2){

          opacity: 0;

 }

second line set transparent

 .main-navigation .menu-toggle.active .bar:nth-child(1){

          transform: translateY(8px) rotate(45deg);

 }

first  line change 45deg

.main-navigation .menu-toggle.active .bar:nth-child(3){

          transform: translateY(-8px) rotate(-45deg);       

 }

three line change negative 45deg

Change menu from to left or right

.main-navigation .nav-menu  ser left = -100%,under ser left 0, nav-menu will run out from the left, use active to create animation effects

.main-navigation .nav-menu.active {

          left:0;   

 }

if .main-navigation .nav-menu  ser right = -100%,and 

.main-navigation .nav-menu.active {

          right:0;   

 }

 nav-menu will run out from the right , use active to create animation effects, but it will hidden hamburger , then toggle change 

.main-navigation .menu-toggle {

          display: block;

          cursor: pointer;

          position: absolute; //  absolute position 

          top:10px;   //postition

          right:20px;   //postition  --->  change to left:20px;

          background-color: #fff;

          border:none;

}

if  add css in  this  @media sereen (max-width:768px)  {    },For example

 @media sereen (max-width:768px)  {  

.main-navigation .menu-toggle {

          display: block;

          cursor: pointer;

          position: absolute; //  absolute position 

          top:10px;   //postition

          right:20px;   //postition

          background-color: #fff;

          border:none;

}

.main-navigation .menu-toggle .bar{

          display: block;

          width: 25px;

          height: 3px;

          margin: 5px auto;

          -webkit-transition: all 0.3s ease;

          transition: all 0.3s ease;

          background-color: #000;

}

.......

}

it show in mobile phone , if  not add it will show in destop and mobile phone.