<html>
<head>
    <meta charset="UTF-8">
    <title>Hamburger Icon</title>
    <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Righteous" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="script.js"></script>
    </head>
<body>
    <div id="burger-container">
    <div id="burger">
        <span> &nbsp;</span>
         <span> &nbsp;</span>
         <span> &nbsp;</span>
         <span> &nbsp;</span>
            </div>
    </div>    
      <footer>
<a href="https://codepen.io/AjayBear/">
      <img src="https://cdn1.iconfinder.com/data/icons/simple-icons/256/codepen-256-black.png">
      <p>Check out my other pens</p>
    </a>
  </footer>  
  </body>
</html>
body{
    
background: #212121;
    
}


#burger-container{
    position:relative;
    margin:100px auto;
    width:50px;
}


#burger{
    cursor:pointer;
    display:block;
}


#burger span{
    background: #ff216a;
    display:block;
    width:100px;
    height:14px;
    margin-bottom: 10px;
    position: relative;
    top:0;
    transition: all ease-in-out 0.4s;  
}

#burger-container.open span:nth-child(2),
#burger-container.open span:nth-child(3){
    width: 0;
    opacity:0;
    
}

#burger-container.open span:nth-child(1){

    transform: rotate(-45deg);
    top:36px;
}

#burger-container.open span:nth-child(4){
    transform: rotate(45deg);
    top:-36px;
}


footer{
  position:fixed;
  top:80%;
  width:100%;
  height:50px;
  right:auto;
  box-sizing:border-box;
  padding-right:50px;
}
footer img{
  height:50px;
  filter:invert(100%);
  float:left;
}
footer p{
  
    font-family: 'Righteous', cursive;
    font-size: 1.2em;
    margin-top:13px;
}
footer a{
  color:#fff;
  text-decoration:none;
  display:inline-block;
  width:250px;
  float:right;
  opacity:1;
  transition:.2s ease-in-out;
}
footer a:hover{
  opacity:.6;
  transition:.2s ease-in-out;
}


$(document).ready(function(){
    $("#burger-container").on('click', function(){
        $(this).toggleClass("open");
    });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.