<div id="sideNavigation" class="sidenav">

  <a href="#" class="close-btn">&times;</a>

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

  <a href="#">Features</a>

  <a href="#">Contact Us</a>

</div>

<nav class="topnav">

  <a href="#" class="ham-icon">

    <svg width="30" height="30">

        <path d="M0,5 30,5" stroke="#000" stroke-width="5"/>

        <path d="M0,14 30,14" stroke="#000" stroke-width="5"/>

        <path d="M0,23 30,23" stroke="#000" stroke-width="5"/>

    </svg>

  </a>

</nav>

<section id="main">

  <h1>This Side Navigation Menu Looks Good!</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>

* {

  padding: 0;

  margin: 0;

  box-sizing: border-box;

}

​

.sidenav {

  height: 100%;

  width: 0;

  position: fixed;

  z-index: 1;

  top: 0;

  left: 0;

  background-color: #111;

  overflow-x: hidden;

  padding-top: 4rem;

  transition: 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);

  font-family: "Bebas Neue";

}

​

.sidenav a {

  padding: 0.5rem 1rem;

  text-decoration: none;

  color: #bdbdbd;

  display: block;

  transition: 0.4s;

  white-space: nowrap;

  font-size: 2rem;

}

​

.sidenav a:hover {

  color: white;

  background: #9e9e9e;

}

/* Position and style the close button (top right corner) */

.sidenav .close-btn {

  position: absolute;

  top: -1rem;

  right: 1rem;

  font-size: 5rem;

}

​

.sidenav .close-btn:hover {

  background: initial;

  transform: scale(1.2);

}

​

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */

#main {

  transition: margin-left 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);

  padding: 20px;

  width: 100%;

}

​

body {

 overflow-x: hidden; 

}

​

/* Add a black background color to the top navigation */

.topnav {

  background-color: #9CCC65;

  overflow: hidden;

}

​

/* Style the links inside the navigation bar */

.topnav a {

  float: left;

  display: block;

  padding: 1rem;

  text-decoration: none;

}

/* Change the color of links on hover */

.topnav a:hover {

  background-color: #DCEDC8;

  color: black;

}

​

/* On smaller screens, where height is less than 480px, change the style of the sidenav (less padding and a smaller font size) */

@media screen and (max-height: 480px) {

  .sidenav {

    padding-top: 3rem;

  }

  .sidenav a {

    font-size: 1.5rem;

  }

}

​

a svg {

  transition: all 0.5s ease;

}

a svg:hover {

  transform: rotate(180deg);

}

​

section h1 {

  font-family: "Bebas Neue";

  font-size: 4rem;

}

​

section p {

  font-family: "Lato";

  line-height: 1.8;

  font-size: 1.5rem;

}

document.querySelector("a.ham-icon").addEventListener("click", function(event){

  document.getElementById("sideNavigation").style.width = "250px";

  document.getElementById("main").style.marginLeft = "250px";

});

​

document.querySelector("a.close-btn").addEventListener("click", function(event){

  document.getElementById("sideNavigation").style.width = "0";

  document.getElementById("main").style.marginLeft = "0";

});