<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Menu Burger</title>
</head>
<body>
  <div id="tete">
    <div id="titre">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/942387/profile/profile-80_1.jpg" alt="Logo" title="logo" />
      <h1>L'interMEDIAire</h1>
    </div>
    <i class="fa fa-bars" aria-hidden="true"></i>
    <i class="fa fa-close" aria-hidden="true"></i>
    <ul id="menu" class="">
    <li><a href="#">Accueil</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Ce Blog</a></li>
    <li><a href="#">Contact</a></li>  
    </ul>
  </div>
  <div id="contenu">
  <h2>Titre </h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam vitae animi consequatur ut sunt dicta voluptatibus quis voluptate neque cum aut praesentium, atque velit mollitia eveniet delectus ducimus vero, quidem.</p>
    <a href="www.lintermediaire.be" target="_blank">Mon blog</a>
    <hr />
    <img src="http://fillmurray.com/1280/960" alt="" />
  </div>
</body>
</html>
<!-- Design by l'interMEDIAire -->
/*COULEURS*/
$noir:        rgba(0,0,0,1);
$noirfonce:   rgba(29,31,32,1);
$rose:        rgba(152,38,114,1);
$bleu:        rgba(128,155,189,1);
$blanc:       rgba(255,255,255,1);
$gris:        rgba(55,55,55,1);
$gris3:       rgba(204,204,204,1);

/*TOUS LES ELEMENTS*/
*,*:after,*:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  min-width: 380px;
  background: $noirfonce;
  font-size: 1em;
  color: $blanc;
  overflow-x: hidden;
}

#tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100vw;
  height: 75px;
  padding: 10px 15px;
  background: $noir;
  border: 0px solid $gris;
  border-bottom-width: 5px;
  
  #titre {
    display: flex;
    align-items: baseline;
    
    img {
      width: auto;
      height: 50px;
    }
    
    h1 {
      margin-left: 10px;
      font-size: 1.4em;
    }
  }
  
  i.fa-bars {
    margin-right: 20px;
    color: $blanc;
    transition: all .7s ease;
  }
  
  i.fa-close {
    display: none;
    margin-right: 20px;
    color: $gris3;
  }
  
  i.fa:hover,i.fa:active {
    cursor: pointer;
    opacity: .7;
  }
  
  #menu {
    display: none;
    margin: 0px;
    padding: 30px 0px 0px;
    list-style: none;
    transition: all .7s ease;
    animation: droite .7s ease reverse;
    
    @keyframes droite {
      0% {left: -100vw;}
      100% {left: 0px;}
    }
    
    a {
      margin: 0px 10px;
      color: $gris3;
      text-decoration: none;
      transition: all .7s ease;
    }
    
    a:hover {
      color: white;
    }
  }
  
  #menu.ouvert {
    position: absolute;
    display: block;
    top: 70px;
    left: 0px;
    animation: droite .7s ease both;
    
    @keyframes droite {
      0% {left: -100vw;}
      100% {left: 0px;}
    }
    
    li {
      width: 100vw;
      height: 50px;
      margin: 0px;
      padding: 0px;
      line-height: 1.4em;
    }
    
    a {
      position: relative;
      display: inline-block;
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 10px;
    }
    
    a:hover,a:active {
      background: #000;
    }
  }
}

i.apparait {
  display: block;
}

i.disparait {
  display: none;
}

#contenu {
  padding: 10px 15px;
  background: $noirfonce;
  transition: all .7s ease;
  
  h2 {
    color: $bleu;  
  }
  
  p {
    font-size: .9em;
    line-height: 1.4em;
  }
  
  a {
    color: $rose;
    text-decoration: none;
    transition: all .7s ease;
  }
  
  a:hover,a:active{
    color: $blanc;
  }
  
  hr {
    display: block;
    margin: 30px 0px;
    border: 1px solid $gris;
  }
  
  img {
    display: block;
    margin-top: 10px;
    width: 100%;
    height: auto;
  }
}

#contenu.ferme {
  transform: scale(0);
}

@media screen and (min-width: 640px) {
  body {
    background: $gris;
  }
  
  #tete #menu {
    display: flex;
  }
  
  #tete i.fa-bars,#tete i.fa-close,#menu.ouvert {
    display: none;
  }
  
  #contenu, #tete {
    margin: 0px auto;
    width: 640px;
  }
  
  #contenu {
    min-height: calc(100vh - 70px);
  }
}
/*Design by l'interMEDIAire*/
$(document).ready(function(){
  $('i.fa-bars').click(function(){
   $(this).hide();
    $("i.fa-close").show();
    $('#menu').toggleClass('ouvert');
    $('#contenu').toggleClass('ferme');
  });
  $("i.fa-close").click(function(){
    $(this).hide();
    $("i.fa-bars").show();
    $('#menu').toggleClass('ouvert');
    $('#contenu').toggleClass('ferme');
  });
});
/*Design by l'interMEDIAire*/

External CSS

  1. https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js