Bootstrap Snippets Slide Menu

<div class="menu" onclick="myFunction(this)">
  <div class="pull-right">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>

  <ul class="head-nav">
      <li><a href="">Home</a></li>
      <li><a href="">About us</a></li>
      <li><a href="">Services</a></li>
      <li><a href="">Faq's</a></li>
      <li><a href="">Blog</a></li>
      <li><a href="">Contact us</a></li>
  </ul>
</div>

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">

* { margin:0; padding:0;}
.bar1, .bar2, .bar3 {  width: 35px; height: 5px; background-color: #333;  margin: 6px 0; transition: 0.4s; cursor: pointer; z-index: 9999999; position: relative; }
.close .bar1 {  -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px)}
.close .bar2 {opacity: 0;}
.close .bar3 {     -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); }
.head-nav { display: none; background: #673ab7; position: absolute;  width: 100%; height: 100%; top:0px;}
ul.head-nav  { margin: 0; padding: 0;}
ul.head-nav li { display: block; text-align: center; max-width: 450px; margin: auto; font-family: 'Lobster', cursive; font-size: 40px; }
ul.head-nav li a { display: block;  color: #fff; line-height: 80px; margin: 10px 0px; text-decoration: none;}
ul.head-nav li a:hover { color:#FFC107}
.pull-right { float:right; margin:15px;}

<script>
function myFunction(menu) {
    menu.classList.toggle("close");
}
</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $(document).ready(function(){
        $('.menu').click(function(){
            $('.head-nav').toggle();
        });
    });
</script>