I. HTML

Navigation with Icon and Menu List

The HTML will be simple as having a navigation (id#sideNav ) element with only TWO elements inside. These elements are a div (with three span element used as an icon) which can be replace with a font awesome icon if you like.
The second element inside navigation is a simple unordered list with anchor tags used for menu items.

2. Listen to click event on Icon

The next step is to add onclick attribute on the div icon (onclick="toggleSideBar()") so that a JavaScript function to toggle the hide and show of the side bar can be triggered, when then user clicks on the icon.

II. CSS

1. Style and Hide Side Nav

Give side navigation position: fixed ; to keep it fixed even when the page is scrolled. The second step is to hide the sidenav by default and only show the icon, we do this by shifting the side nav to the left side of the screen by using left: -200px;.Notice this -200px value is the same as the width of the actual side nav, therefore the whole side navis now hidden.
The transition: all 500ms linear; is used to smoothen the effect when side nav is revealed.

  
 #sideNav{
  position: fixed;/*keep the side nav even when user scrolls the page*/
  width:200px; /* The width of side Navigation*/
  height: 100%; /*The full screen height*/
  background: #444;
  left: -200px;/* Hide side bar on left side of screen by default */
  transition: all 500ms linear; /*Revealing animation*/
}

3.Create Active Class

Now create a class with the name active, the side navigation will be toggled to this class the user click the icon. The oppose shall then occurred to this class, which is, to should reveal the sidebar instead of hiding it. Now we use left:0; to shift the nav towards the screen from the left hand side.

  
  #sideNav.active{
    left: 0px; /*Reveal the sidebar by shifting the side to the right*/
  }                            
 

Now we will use JavaScript to toggle the side nav to active class to hide and show the side bar when user clicks the menu icon

4.Create Menu Icon

Last step on CSS is to style the div that has three empty spans inside. We give it left: 230px;,200px is for hidden side bar and 30px for actual menu icon. The three spans takes the 30px left, having 5px of thickness and 3px between them vertically. We use display: block; so Each span line becomes a vertical list of spans.

  
div{
 position: absolute;
 left: 230px; /*200px is for hidden side bar and 30px for actual menu icon*/
 top:20px;
}
/*Three lines of span elements (with spaces in between forming menu icon)*/
span{
 display: block;/*Each span line becomes a vertical list (or block element)*/
 width:30px; /*Actual width of the icon*/
 height: 5px; /*small height enought to form  thickness of the lines*/
 background-color: #151719;
 margin: 3px 0;/*vertical spaces between the lines*/
 }                          

You can use font awesome icons instead of using html to create yours.

II. Vanilla JS

1.Toggle #siideNav to .active class

Finally on JS we create a function that is listened in the menu icon, we used document.getElementById('#sideNav') to get the side navigation bar and give it a class of .active using .classList.toggle('active'); which reveals the side navigation.

  
   function toggleSideBar(){
    document.getElementById('sideNav').classList.toggle('active');
	}