10+ JavaScript Hamburger Menu Examples

This post contains a total of 10+ Hand-Picked JavaScript Hamburger Menu Examples with Source Code. All these Hamburger menus are made using JavaScript and Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Hamburger Menu Examples

1. By Leon Heess

Made by Leon Heess. Hamburger menu with Droplet Animation on Scroll. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
* {
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana,
    "sans-serif";
  font-weight: 400;
  margin: 0;
  padding: 0;
  text-align: center;
  text-transform: uppercase;
}

.hidden {
  overflow: hidden;
}

html, body {
  color: #fff;
  background-color: #1c1c1c;
}

.wrapper {
  background: linear-gradient(
    45deg,
    rgba(245, 41, 55, 1),
    rgba(124, 0, 255, 1)
  );
  width: 500px;
  height: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

nav {
  width: 90%;
  height: 90px;
  padding: 0 5%;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #f8f8f8;
}

nav ~ ul {
  display: flex;
  position: absolute;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  left: 1%;
  right: 1%;
  opacity: 0;
  visibility: hidden;
  z-index: 2;
  list-style: none;
  transition: 0s;
}

nav ~ ul > li {
  color: rgba(119, 0, 255, 1);
  padding: 10px;
  cursor: pointer;
  font-size: 30px;
}

nav ~ ul > li:hover {
  filter: brightness(200%);
}

nav.open ~ ul {
  transition: 0.75s ease-in-out;
  visibility: visible;
  opacity: 1;
}

#drop {
  cursor: pointer;
  position: fixed;
  background-color: #f8f8f8;
  width: 70px;
  height: 70px;
  border-radius: 0 50% 50%;
  transform: rotate(45deg);
  transition: border-radius 0.5s;
}

nav.open > #drop{
  transition: 0.5s ease-in-out;
  box-shadow: 0 0 0 1000px #f8f8f8, inset 0 0 0 20px #f8f8f8;
  position: relative;
}

#drop.active {
  border-radius: 50%;
  animation: drop 0.3s forwards;
}

#drop > div {
  transform: rotate(-45deg);
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#drop span {
  display: block;
  background-color: rgba(119, 0, 255, 1);
  width: 40px;
  height: 3px;
  margin: 5px 0;
  transition: 0.5s;
}

#drop span.open:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

#drop span.open:nth-child(2) {
  transform: rotate(-45deg) translate(5px, -5px);
}

#drop span.open:nth-child(3) {
  opacity: 0;
}

@keyframes drop {
  0% {
    transform: translateY(0) rotate(45deg);
  }
  50% {
    transform: translateY(30px) rotate(45deg);
  }
  100% {
    transform: translateY(10px) rotate(45deg);
  }
}
</style>
</head>
<body>
  <div class="wrapper">
  <nav>
    <div id="drop">
      <div>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </nav>
  <ul>
    <li>home</li>
    <li>about</li>
    <li>login</li>
    <li>contact</li>
    <li>privacy</li>
  </ul>
  <h1><br><br>Scroll<br>&dArr;</h1>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
      <script>
$(window).scroll(function () {
  var scroll = $(window).scrollTop();
  if (scroll > 100)
  $("#drop").addClass("active");else
  if (scroll < 80)
  $("#drop").removeClass("active");
});

$("#drop, nav ~ ul li").click(function () {
  $("nav, #drop span").toggleClass("open");
  $("body").toggleClass("hidden");
  $(window).scrollTop(0); //cheating
});
    </script>
</body>
</html>

2. By Chris Li

Made by Chris Li. JavaScript Hamburger toggle menu with four different animations. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">  
<style>
*, *:before, *:after {
  box-sizing: border-box;
}

body, html {
  width: 100%;
  height: 100%;
  font-family: "Roboto", sans-serif;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.container .menu-btn {
  width: 50px;
  height: 50px;
  position: fixed;
  z-index: 10;
  top: 30px;
  left: 30px;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}
.container .menu-btn:hover span {
  background-color: #7be5cd;
}
.container .menu-btn.active {
  transform: rotate(180deg);
}
.container .menu-btn.active span {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.container .menu-btn.active span.top {
  transform: rotate(45deg);
  transform-origin: left center;
  top: 9px;
  left: 11.25px;
}
.container .menu-btn.active span.mid {
  opacity: 0;
  left: 11.25px;
}
.container .menu-btn.active span.bot {
  transform: rotate(-45deg);
  transform-origin: left center;
  top: 37px;
  left: 11.25px;
}
.container .menu-btn span {
  display: block;
  width: 40px;
  height: 4px;
  background-color: #3BD9B5;
  position: absolute;
  top: 23px;
  left: 5px;
  border-radius: 2px;
  transition: background-color 0.3s ease-in-out;
}
.container .menu-btn span.top {
  top: 11px;
}
.container .menu-btn span.bot {
  top: 35px;
}
.container #nav {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  z-index: -1;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.container #nav.leftslide {
  width: 250px;
  height: 100vh;
  background-color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate3d(-300px, 0px, 0px);
}
.container #nav.fadein {
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  text-align: center;
}
.container #nav.topslide {
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate3d(0px, -100%, 0px);
  text-align: center;
}
.container #nav.pushslide {
  width: 250px;
  height: 100vh;
  background-color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate3d(0px, 0px, 0px);
}
.container #nav.open {
  transform: translate3d(0px, 0px, 0px);
  opacity: 1;
  z-index: 5;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.container #nav.open .nav-inner li {
  animation: fadeInRight 0.4s ease forwards;
  animation-delay: 0.3s;
}
.container #nav.open .nav-inner li:nth-of-type(1) {
  animation-delay: 0.35s;
}
.container #nav.open .nav-inner li:nth-of-type(2) {
  animation-delay: 0.4s;
}
.container #nav.open .nav-inner li:nth-of-type(3) {
  animation-delay: 0.45s;
}
.container #nav.open .nav-inner li:nth-of-type(4) {
  animation-delay: 0.5s;
}
.container #nav.open .nav-inner li:nth-of-type(5) {
  animation-delay: 0.55s;
}
.container #nav .nav-inner li {
  position: relative;
  margin-bottom: 30px;
  opacity: 0;
  transition: transform 0.3s ease-in-out;
}
.container #nav .nav-inner li a {
  display: inline-block;
  height: 100%;
  text-decoration: none;
  color: #4d4d4d;
  font-size: 30px;
  text-transform: capitalize;
  letter-spacing: 1px;
  font-weight: 800;
  padding: 4px 8px;
  transition: all 0.2s ease-in-out;
}
.container #nav .nav-inner li a:before {
  content: "";
  position: absolute;
  left: -30px;
  top: 50%;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #3BD9B5;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
.container #nav .nav-inner li a:hover {
  background-color: #6f58ee;
  color: #ffffff;
  transform: translate3d(15px, 0, 0);
}
.container #nav .nav-inner li a:hover:before {
  content: "";
  left: -15px;
  opacity: 1;
}
.container #style-box {
  width: 100%;
  height: 100vh;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA4MDAgODIzLjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDgwMCA4MjMuNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM0MDQxNEI7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNTUuMiwxNjljLTAuNCwwLTAuOCwwLTEuMi0wLjFjLTIuMy0wLjMtNC4zLTEuNS01LjctMy4zbC04LjktMTEuN2MtMS40LTEuOC0yLTQuMS0xLjctNi4zCgljMC4zLTIuMywxLjUtNC4zLDMuMy01LjdsMTEuNy04LjljMS44LTEuNCw0LjEtMiw2LjMtMS43YzIuMywwLjMsNC4zLDEuNSw1LjcsMy4zbDguOSwxMS43YzEuNCwxLjgsMiw0LjEsMS43LDYuMwoJYy0wLjMsMi4zLTEuNSw0LjMtMy4zLDUuN2wtMTEuNyw4LjlDNTguOSwxNjguNCw1Ny4xLDE2OSw1NS4yLDE2OXogTTU4LDEzNy4yYy0wLjYsMC0xLjEsMC4yLTEuNiwwLjVsLTExLjcsOC45CgljLTAuNSwwLjQtMC45LDEtMSwxLjdjLTAuMSwwLjcsMC4xLDEuNCwwLjUsMS45bDguOSwxMS43YzAuNCwwLjUsMSwwLjksMS43LDFjMC43LDAuMSwxLjQtMC4xLDEuOS0wLjVsMTEuNy04LjlsMCwwCgljMC41LTAuNCwwLjktMSwxLTEuN3MtMC4xLTEuNC0wLjUtMS45TDYwLDEzOC4yYy0wLjQtMC41LTEtMC45LTEuNy0xQzU4LjIsMTM3LjIsNTguMSwxMzcuMiw1OCwxMzcuMnoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTYwNC43LDUzMi4yYy0wLjUsMC0xLjEtMC4xLTEuNi0wLjJsMCwwbC0xNC41LTIuOGMtNC42LTAuOS03LjctNS40LTYuOC0xMGwyLjgtMTQuNWMwLjktNC42LDUuNC03LjcsMTAtNi44CglsMTQuNSwyLjhjMi4yLDAuNCw0LjIsMS43LDUuNSwzLjZjMS4zLDEuOSwxLjgsNC4yLDEuMyw2LjRsLTIuOCwxNC41Yy0wLjQsMi4yLTEuNyw0LjItMy42LDUuNUM2MDgsNTMxLjcsNjA2LjQsNTMyLjIsNjA0LjcsNTMyLjJ6CgkgTTYwNC4yLDUyNi4xYzAuNywwLjEsMS40LDAsMS45LTAuNGMwLjYtMC40LDEtMSwxLjEtMS42bDIuOC0xNC41YzAuMS0wLjcsMC0xLjQtMC40LTEuOWMtMC40LTAuNi0xLTEtMS42LTEuMWwtMTQuNS0yLjgKCWMtMS40LTAuMy0yLjcsMC42LTMsMmwtMi44LDE0LjVjLTAuMywxLjQsMC42LDIuNywyLDNMNjA0LjIsNTI2LjF6Ii8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMDEuNyw2MDEuOWMtMS43LDAtMy40LTAuNS00LjktMS42Yy0xLjktMS4zLTMuMS0zLjMtMy41LTUuNUw4OCw1NjQuN2MtMC44LTQuNywyLjMtOS4xLDctOS45bDcuNi0xLjMKCWMyLjMtMC40LDQuNSwwLjEsNi40LDEuNGMxLjksMS4zLDMuMSwzLjMsMy41LDUuNWw1LjMsMzAuMWMwLjgsNC43LTIuMyw5LjEtNyw5LjloMGwtNy42LDEuM0MxMDIuNyw2MDEuOCwxMDIuMiw2MDEuOSwxMDEuNyw2MDEuOXoKCSBNMTEwLjMsNTk3LjVMMTEwLjMsNTk3LjVMMTEwLjMsNTk3LjV6IE0xMDQsNTU5LjNjLTAuMSwwLTAuMywwLTAuNSwwbC03LjYsMS4zYy0xLjQsMC4yLTIuMywxLjYtMi4xLDNsNS4zLDMwLjEKCWMwLjEsMC43LDAuNSwxLjMsMS4xLDEuN2MwLjYsMC40LDEuMiwwLjUsMS45LDAuNGw3LjYtMS4zYzEuNC0wLjIsMi4zLTEuNiwyLjEtM2wtNS4zLTMwLjFjLTAuMS0wLjctMC41LTEuMy0xLjEtMS43CglDMTA1LjEsNTU5LjUsMTA0LjUsNTU5LjMsMTA0LDU1OS4zeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNzIwLDc0Ny41Yy03LjcsMC0xMy45LTYuMy0xMy45LTEzLjlzNi4zLTEzLjksMTMuOS0xMy45czEzLjksNi4zLDEzLjksMTMuOVM3MjcuNyw3NDcuNSw3MjAsNzQ3LjV6CgkgTTcyMCw3MjUuNmMtNC40LDAtNy45LDMuNi03LjksNy45czMuNiw3LjksNy45LDcuOXM3LjktMy42LDcuOS03LjlTNzI0LjQsNzI1LjYsNzIwLDcyNS42eiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjcxLjUsODIuMmMtMTIuMiwwLTIyLTkuOS0yMi0yMnM5LjktMjIsMjItMjJzMjIsOS45LDIyLDIyUzI4My42LDgyLjIsMjcxLjUsODIuMnogTTI3MS41LDQ0LjEKCWMtOC44LDAtMTYsNy4yLTE2LDE2YzAsOC44LDcuMiwxNiwxNiwxNmM4LjgsMCwxNi03LjIsMTYtMTZDMjg3LjUsNTEuMywyODAuMyw0NC4xLDI3MS41LDQ0LjF6Ii8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik03NTMuMiwzNjQuMWMtMS4zLDAtMi40LTAuOC0yLjktMi4xYy0zLjctMTEuNCwyLjUtMjMuOCwxNC0yNy41YzExLjQtMy43LDIzLjgsMi41LDI3LjUsMTQKCWMwLjUsMS42LTAuMywzLjMtMS45LDMuOGMtMS42LDAuNS0zLjMtMC4zLTMuOC0xLjljLTIuNy04LjMtMTEuNi0xMi44LTE5LjktMTAuMWMtOC4zLDIuNy0xMi44LDExLjYtMTAuMSwxOS45CgljMC41LDEuNi0wLjMsMy4zLTEuOSwzLjhDNzUzLjksMzY0LDc1My42LDM2NC4xLDc1My4yLDM2NC4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjUzLjQsNzE1LjZjLTAuNiwwLTEuMy0wLjItMS44LTAuNmMtMS4zLTEtMS42LTIuOS0wLjYtNC4yYzIuNS0zLjQsMy42LTcuNSwzLTExLjdjLTAuNi00LjItMi44LTcuOS02LjItMTAuNAoJYy0zLjQtMi41LTcuNS0zLjYtMTEuNy0zYy00LjIsMC42LTcuOSwyLjgtMTAuNCw2LjJjLTEsMS4zLTIuOSwxLjYtNC4yLDAuNmMtMS4zLTEtMS42LTIuOS0wLjYtNC4yYzMuNS00LjcsOC42LTcuNywxNC40LTguNQoJYzUuOC0wLjgsMTEuNSwwLjcsMTYuMiw0LjJjNC43LDMuNSw3LjcsOC42LDguNSwxNC40YzAuOCw1LjgtMC43LDExLjUtNC4yLDE2LjJDMjU1LjIsNzE1LjIsMjU0LjMsNzE1LjYsMjUzLjQsNzE1LjZ6Ii8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NzMuNCwzMDEuMWMtMC45LDAtMS44LTAuNC0yLjMtMS4xbC0xOC45LTIzLjdjLTAuOC0wLjktMC45LTIuMy0wLjMtMy4zbDE0LjYtMjYuNWMwLjUtMC45LDEuNC0xLjUsMi40LTEuNQoJYzEtMC4xLDIsMC4zLDIuNiwxLjFsMTguOSwyMy43YzAuOCwwLjksMC45LDIuMywwLjMsMy4zbC0xNC42LDI2LjVjLTAuNSwwLjktMS40LDEuNS0yLjQsMS41QzQ3My42LDMwMS4xLDQ3My41LDMwMS4xLDQ3My40LDMwMS4xegoJIE00NTguMiwyNzQuMWwxNC44LDE4LjZsMTEuNS0yMC44bC0xNC44LTE4LjZMNDU4LjIsMjc0LjF6Ii8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNTAuMywzNTguN2MtMC41LDAtMC45LTAuMS0xLjQtMC4zYy0xLjEtMC42LTEuNy0xLjctMS42LTNsNC00Mi43YzAuMS0xLDAuNy0xLjksMS42LTIuNAoJYzAuOS0wLjUsMS45LTAuNSwyLjgsMGwyOCwxNC43YzAuOSwwLjUsMS41LDEuMywxLjYsMi4zYzAuMSwxLTAuMywyLTEsMi42bC0zMiwyOEMxNTEuOCwzNTguNSwxNTEsMzU4LjcsMTUwLjMsMzU4Ljd6IE0xNTYuOSwzMTcuOAoJbC0yLjksMzAuN2wyMy0yMC4yTDE1Ni45LDMxNy44eiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNzgxLjgsNTQ5LjRjLTAuMSwwLTAuMiwwLTAuMywwbC0zMS40LTMuMmMtMS0wLjEtMS45LTAuNy0yLjMtMS42cy0wLjUtMS45LDAtMi44bDE5LjMtMzcuOQoJYzAuNi0xLjEsMS43LTEuNywzLTEuNmMxLjIsMC4xLDIuMywxLDIuNiwyLjFsMTIuMSw0MS4xYzAuMywxLDAuMSwyLTAuNiwyLjhDNzgzLjUsNTQ5LDc4Mi42LDU0OS40LDc4MS44LDU0OS40eiBNNzU1LDU0MC42CglsMjIuNiwyLjNsLTguNy0yOS42TDc1NSw1NDAuNnoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTU4My4xLDM3NS42bDcuMiw5LjZjMS4yLDEuNiwzLjgsMS4yLDQuNC0wLjdsNC0xMS43YzAuNi0xLjgtMS0zLjYtMi44LTMuM2wtMTEuMSwyLjEKCUM1ODIuOSwzNzEuOSw1ODIsMzc0LjEsNTgzLjEsMzc1LjZ6Ii8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NzcuNSw3NTMuNGMtMC45LDAtMS43LTAuNC0yLjMtMS4xTDQ1NSw3MjguMWMtMC42LTAuOC0wLjktMS44LTAuNi0yLjdzMS0xLjcsMS45LTJsMjgtOS41CgljMS0wLjQsMi4yLTAuMSwzLDAuNmMwLjgsMC43LDEuMiwxLjgsMC45LDIuOWwtNy44LDMzLjhjLTAuMywxLjEtMS4xLDItMi4yLDIuMkM0NzgsNzUzLjQsNDc3LjgsNzUzLjQsNDc3LjUsNzUzLjR6IE00NjIuNCw3MjcuNgoJbDEzLjYsMTYuM2w1LjItMjIuNkw0NjIuNCw3MjcuNnoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTM4MC4zLDU0Ni4xSDM0NWMtMS43LDAtMy0xLjMtMy0zczEuMy0zLDMtM2gzMi4zdi0zMC4zYzAtMS43LDEuMy0zLDMtM3MzLDEuMywzLDN2MzMuMwoJQzM4My4zLDU0NC43LDM4Miw1NDYuMSwzODAuMyw1NDYuMXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTcwMi4zLDEwMC43SDY3N2MtMS4xLDAtMi4xLTAuNi0yLjYtMS42Yy0wLjUtMS0wLjUtMi4xLDAuMS0zLjFsMjUuMy00MGMwLjctMS4xLDIuMS0xLjYsMy40LTEuMwoJYzEuMywwLjQsMi4yLDEuNSwyLjIsMi45djQwQzcwNS4zLDk5LjQsNzA0LDEwMC43LDcwMi4zLDEwMC43eiBNNjgyLjUsOTQuN2gxNi45VjY4LjFMNjgyLjUsOTQuN3oiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTY2My43LDI2MC4xYy0xLjQsMC0yLjctMS0yLjktMi40bC04LTQxLjNjLTAuMy0xLjYsMC43LTMuMiwyLjQtMy41YzEuNi0wLjMsMy4yLDAuNywzLjUsMi40bDgsNDEuMwoJYzAuMywxLjYtMC43LDMuMi0yLjQsMy41QzY2NCwyNjAsNjYzLjksMjYwLjEsNjYzLjcsMjYwLjF6Ii8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NzEuMywxMjMuNGMtMC42LDAtMS4xLTAuMi0xLjctMC41bC0zNC4zLTIyLjdjLTEuNC0wLjktMS44LTIuOC0wLjgtNC4yYzAuOS0xLjQsMi44LTEuOCw0LjItMC44bDM0LjMsMjIuNwoJYzEuNCwwLjksMS44LDIuOCwwLjgsNC4yQzQ3My4yLDEyMi45LDQ3Mi4zLDEyMy40LDQ3MS4zLDEyMy40eiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzUzLjIsMzk0LjRsLTcuNS0zLjFjLTEuNi0wLjctMi40LTIuNS0xLjctNC4xbDMuMS03LjVjMC43LTEuNiwyLjUtMi40LDQuMS0xLjdsNy41LDMuMQoJYzEuNiwwLjcsMi40LDIuNSwxLjcsNC4xbC0zLjEsNy41QzM1Ni42LDM5NC4zLDM1NC44LDM5NSwzNTMuMiwzOTQuNHoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTUwMSw2MDQuMmwtNi44LDQuNGMtMS40LDAuOS0zLjQsMC41LTQuMy0wLjlsLTQuNC02LjhjLTAuOS0xLjQtMC41LTMuNCwwLjktNC4zbDYuOC00LjQKCWMxLjQtMC45LDMuNC0wLjUsNC4zLDAuOWw0LjQsNi44QzUwMi45LDYwMS4zLDUwMi41LDYwMy4yLDUwMSw2MDQuMnoiLz4KPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMjk4IiBjeT0iMjA1LjIiIHI9IjcuNCIvPgo8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSI0MC4zIiBjeT0iNzUwLjQiIHI9IjcuNCIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNjgxLDY3OC43Yy0wLjgsMC0xLjYtMC4zLTIuMi0wLjlsLTI1LjMtMjYuN2MtMS4xLTEuMi0xLjEtMy4xLDAuMS00LjJjMS4yLTEuMSwzLjEtMS4xLDQuMiwwLjFsMjUuMywyNi43CgljMS4xLDEuMiwxLjEsMy4xLTAuMSw0LjJDNjgyLjUsNjc4LjQsNjgxLjcsNjc4LjcsNjgxLDY3OC43eiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTYuMywyODIuN2MtMS40LDAtMi43LTEtMy0yLjVjLTAuMy0xLjYsMC44LTMuMiwyLjUtMy41bDI0LTRjMS42LTAuMywzLjIsMC44LDMuNSwyLjUKCWMwLjMsMS42LTAuOCwzLjItMi41LDMuNWwtMjQsNEMxNi43LDI4Mi43LDE2LjUsMjgyLjcsMTYuMywyODIuN3oiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTEzNS43LDQ0LjFjLTEuNywwLTMtMS4zLTMtM1YxN2MwLTEuNywxLjMtMywzLTNzMywxLjMsMywzdjI0QzEzOC43LDQyLjgsMTM3LjMsNDQuMSwxMzUuNyw0NC4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTkzLjcsNTAyYy0wLjgsMC0xLjctMC4zLTIuMi0xYy0xLjEtMS4yLTEtMy4xLDAuMy00LjJsMjkuMy0yNmMxLjItMS4xLDMuMS0xLDQuMiwwLjNjMS4xLDEuMiwxLDMuMS0wLjMsNC4yCglsLTI5LjMsMjZDMTk1LjEsNTAxLjgsMTk0LjQsNTAyLDE5My43LDUwMnoiLz4KPC9zdmc+Cg=="), linear-gradient(90deg, #6f58ee 0%, #7434f3 100%);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 3;
  transition: transform 0.3s ease-in-out;
}
.container #style-box.leftslide:before, .container #style-box.fadein:before, .container #style-box.topslide:before, .container #style-box.pushslide:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.3);
}
.container #style-box.pushslide {
  transform: translate3d(250px, 0, 0);
  transition: transform 0.3s ease-in-out;
  z-index: 5;
}
.container #style-box .box-inner h1 {
  margin-top: 0;
  padding: 10px;
  text-transform: uppercase;
  color: #ffffff;
}
.container #style-box .box-inner h1 span {
  font-style: italic;
  font-size: 20px;
}
.container #style-box .box-inner ul li {
  display: inline-block;
  padding: 10px 15px;
  margin-right: 10px;
  margin-bottom: 10px;
  background-color: #3BD9B5;
  text-transform: capitalize;
  border-radius: 4px;
  cursor: pointer;
  color: #ffffff;
  border: 2px solid #3BD9B5;
  transition: background-color 0.2s ease-in;
}
.container #style-box .box-inner ul li:last-child {
  margin-right: 0;
}
.container #style-box .box-inner ul li:hover, .container #style-box .box-inner ul li.now {
  background-color: transparent;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 30px;
  }
  100% {
    opacity: 1;
    left: 0px;
  }
}
</style>
</head>
<body>
  <div class="container">
			<div class="menu-btn">
				<span class="top"></span>
				<span class="mid"></span>
				<span class="bot"></span>
			</div>
			<div id="nav">
				<ul class="nav-inner">
					<li>
						<a href="#">about</a>
					</li>
					<li>
						<a href="#">portfolio</a>
					</li>
					<li>
						<a href="#">works</a>
					</li>
					<li>
						<a href="#">Skills</a>
					</li>
					<li>
						<a href="#">Contact</a>
					</li>
				</ul>
			</div>
			<div id="style-box">
				<div class="box-inner">
					<h1>slide toggle menu <span>- chris li</span></h1>
					<ul>
						<li class="leftslide" data-styles="leftslide">left slide</li>
						<li class="fadein" data-styles="fadein">fade in</li>
						<li class="topslide" data-styles="topslide">top slide</li>
						<li class="pushslide" data-styles="pushslide">push slide</li>
					</ul>
				</div>
			</div>
		</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
      <script>
$(document).ready(function () {

  var $menuBtn = $('.menu-btn');
  var $nav = $('#nav');
  var $stylebox = $('#style-box');
  var $styleli = $stylebox.find('li');

  $menuBtn.on('click', function () {
    var $this = $(this);
    var styles = $stylebox.data('styles');
    $this.toggleClass("active");
    $this.next('#nav').toggleClass("open");
    $stylebox.toggleClass(styles);
  });

  $nav.addClass('leftslide');

  $styleli.on('click', function () {
    var $this = $(this);
    $this.siblings().removeClass('now');
    $this.addClass('now');
    var styles = $this.data('styles');
    $nav.removeClass();
    $nav.addClass(styles);
    $nav.siblings('#style-box').removeClass();
    $nav.siblings('#style-box').data('styles', styles);
  });



});
    </script>
</body>
</html>

3. By Mike Rojas

Made by Mike Rojas. A Full Page hamburger toggle menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<style>
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-70px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-70px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
html {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  background: #ff0066;
  font-size: 14px;
}

body {
  font-size: 1rem;
  line-height: 1.5em;
}
@media (min-width: 768px) {
  body {
    font-size: 1.2rem;
  }
}

nav {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  display: none;
  transition: all 500ms ease 0s;
}
nav div {
  position: absolute;
  height: 100px;
  line-height: 100px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}
nav a {
  color: #ff0066;
  text-decoration: none;
  text-transform: uppercase;
  margin-right: 100px;
  font-size: 32px;
  position: relative;
  transform: translateY(-70px);
}
@media (min-width: 1024px) {
  nav a {
    font-size: 45px;
  }
}
nav a:last-child {
  margin-right: 0;
}
nav.on {
  display: block;
}
nav.on a {
  -webkit-animation-name: fadeInDown;
          animation-name: fadeInDown;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 500ms;
          animation-duration: 500ms;
}

button {
  width: 45px;
  height: 54px;
  background: transparent;
  border: 0;
  text-indent: -888em;
  position: fixed;
  top: 10px;
  right: 10px;
  cursor: pointer;
  z-index: 1;
  border-bottom: 10px solid #fff;
  transition: all 500ms ease 0s;
}
button:before, button:after {
  width: 45px;
  position: relative;
  left: -6px;
  height: 10px;
  background: #fff;
  content: "";
  display: block;
  transition: all 500ms ease 0s;
}
button:after {
  top: 6px;
}
button:focus {
  outline: 0;
}
button.on {
  border-bottom: 10px solid #ff0066;
}
button.on:before, button.on:after {
  background: #ff0066;
}

article {
  color: #fff;
  padding: 3em 2em;
  line-height: 1.5;
  font-size: 1.4em;
  max-width: 32em;
  margin: auto;
}

h2 {
  text-transform: uppercase;
  font-size: 2em;
  font-weight: 100;
  line-height: 1.2;
}
@media (min-width: 768px) {
  h2 {
    font-size: 3.2em;
  }
}

p:first-letter {
  text-transform: capitalize;
}

footer {
  text-align: center;
  padding-bottom: 6em;
}
footer a {
  color: #ff0066;
  padding: 0.3em 1.4em;
  background-color: #fff;
  text-decoration: none;
}
</style>
</head>
<body>
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,100' rel='stylesheet' type='text/css'>

<header>
  <button></button>
</header>

<nav>
  <div>
    <a href="">Work</a>
    <a href="">Notes</a>
    <a href="">About</a>
  </div>
</nav>

  <article>
    <h2>Heading</h2>
    <p>Some Text</p>
  </article>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
(function ($) {

  var btn = $('button');
  var menu = $('nav');

  btn.click(function () {
    $(this).toggleClass('on');
    menu.toggleClass('on');
  });

})(jQuery);
    </script>
</body>
</html>

4. By Fabrice Lejeune

Made by Fabrice Lejeune. JavaScript hamburger menu with Pop up and Icon animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<style>
@import url(https://fonts.googleapis.com/css?family=Oswald:700);
*, *::before, *::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  margin: 0;
  background: #180D22;
  color: #ffffff;
  font-family: "Oswald", "sans-serif";
  font-size: 1.4rem;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

.menu-toggle {
  position: absolute;
  top: 20px;
  left: 50%;
  height: 33px;
  width: 61px;
  margin-left: -30px;
  padding: 4px 12px;
  color: #ffffff;
  border: 2px solid #ffffff;
  overflow: hidden;
  text-decoration: none;
  text-transform: uppercase;
  z-index: 20;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
  -webkit-transition-property: color, border-color, margin-left, width, -webkit-transform;
  -moz-transition-property: color, border-color, margin-left, width, -moz-transform;
  transition-property: color, border-color, margin-left, width, transform;
  -webkit-transition-duration: 0.1s;
  -moz-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-transition-delay: 0s, 0s, 0.2s, 0.2s, 0s;
  -moz-transition-delay: 0s, 0s, 0.2s, 0.2s, 0s;
  transition-delay: 0s, 0s, 0.2s, 0.2s, 0s;
}
.menu-toggle .label {
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.1s;
  -moz-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-transition-delay: 0.4s;
  -moz-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
.menu-toggle .close {
  display: block;
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 1.8rem;
  opacity: 0;
  -webkit-transition-property: opacity, -webkit-transform;
  -moz-transition-property: opacity, -moz-transform;
  transition-property: opacity, transform;
  -webkit-transition-duration: 0.1s;
  -moz-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-transition-delay: 0s, 0s;
  -moz-transition-delay: 0s, 0s;
  transition-delay: 0s, 0s;
}
.menu-toggle:hover {
  border-color: #ee1848;
  color: #ee1848;
}
.menu-toggle.open {
  margin-left: -16px;
  border-color: #ee1848;
  color: #ee1848;
  height: 33px;
  width: 33px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition-delay: 0s, 0s, 0s, 0s, 0.2s;
  -moz-transition-delay: 0s, 0s, 0s, 0s, 0.2s;
  transition-delay: 0s, 0s, 0s, 0s, 0.2s;
}
.menu-toggle.open .label {
  opacity: 0;
  -webkit-transition-delay: 0;
  -moz-transition-delay: 0;
  transition-delay: 0;
}
.menu-toggle.open .close {
  opacity: 1;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition-delay: 0.2s, 0s;
  -moz-transition-delay: 0.2s, 0s;
  transition-delay: 0.2s, 0s;
}
.menu-toggle.open:hover {
  border-color: #ffffff;
  color: #ffffff;
}

.menu {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  z-index: 10;
  -webkit-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}
.menu ul {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0.6);
  -moz-transform: translate(-50%, -50%) scale(0.6);
  -ms-transform: translate(-50%, -50%) scale(0.6);
  -o-transform: translate(-50%, -50%) scale(0.6);
  transform: translate(-50%, -50%) scale(0.6);
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  -moz-transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.menu ul li {
  position: relative;
  text-align: center;
}
.menu ul li a {
  padding: 0 12px;
  color: #ffffff;
  font-size: 3.6rem;
  text-decoration: none;
  text-transform: uppercase;
}
.menu ul li a::after {
  position: absolute;
  top: 50%;
  right: 0px;
  left: auto;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  display: block;
  content: "";
  height: 4px;
  width: 0%;
  background: #ee1848;
  -webkit-transition: width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.menu ul li a:hover::after {
  left: 0px;
  right: auto;
  width: 100%;
}
.menu.open {
  opacity: 1;
  pointer-events: auto;
}
.menu.open ul {
  -webkit-transform: translate(-50%, -50%) scale(1);
  -moz-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  -o-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
</style>
</head>
<body>
  <a href="#" data-toggle="menu" class="menu-toggle"><span class="label">Menu</span><i class="close fa fa-times"></i></a>
<nav id="menu" class="menu">
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Agenda</a></li>
    <li><a href="#">Sound</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
(function() {
  $('.menu-toggle').on('click', function(e) {
    var target;
    e.preventDefault();
    target = $(this).toggleClass('open').data('toggle');
    return $(`#${target}`).toggleClass('open');
  });

}).call(this);
    </script>
</body>
</html>

5. By Elior Tabeka

Made by Elior Tabeka. Hamburger menu with Fill animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Arvo: 400, 700'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Kaushan+Script'>
  
<style>
*, *:before, *:after {
  box-sizing: border-box;
  outline: none;
}

html,
body {
  height: 100%;
  font-family: "Arvo", serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-size: 23px;
  color: #000000;
}
body #menu {
  line-height: 40px;
}
body a {
  cursor: pointer;
}
body h3 {
  color: white;
  font-family: "Kaushan Script", cursive;
  font-size: 31px;
}

#container {
  width: 340px;
  height: 340px;
  background-image: linear-gradient(135deg, #02fa46 -1.7%, #02eefa 21.1%, #ae08ed 46%, #ed0875 64.2%, #ed0875 81%, #f88800 97.2%);
  background-size: 1360px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.2);
  transition: background 300ms, box-shadow 300ms;
}
#container.opened {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.2), 0 0 0 8px #ffffff inset;
}
#container[data-screen=Awesome] {
  background-position: -340px;
}
#container[data-screen=Awesome] #content {
  transform: translateX(-340px);
}
#container[data-screen=Concept] {
  background-position: -680px;
}
#container[data-screen=Concept] #content {
  transform: translateX(-680px);
}

#menuOverlay {
  background: white;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  padding: 22px 28px;
  transition: background 300ms, -webkit-clip-path 300ms;
  transition: clip-path 300ms, background 300ms;
  transition: clip-path 300ms, background 300ms, -webkit-clip-path 300ms;
  -webkit-clip-path: circle(5% at 300px 39px);
          clip-path: circle(5% at 300px 39px);
  /* Hamburger Menu Icon */
}
#menuOverlay:hover {
  -webkit-clip-path: circle(6% at 300px 39px);
          clip-path: circle(6% at 300px 39px);
}
.opened #menuOverlay {
  -webkit-clip-path: circle(100% at 300px 100px);
          clip-path: circle(100% at 300px 100px);
  background: white;
}
.opened #menuOverlay #hamburger {
  transform: rotateZ(-90deg);
}
#menuOverlay #hamburger {
  position: absolute;
  top: 21px;
  right: 23px;
  transition: transform 300ms linear;
  padding: 10px;
  cursor: pointer;
  font-size: 16px;
}

#menu li {
  list-style: none;
}
#menu li a {
  transition: color 115ms ease-in-out;
  position: relative;
  /* Text overlay & Bottom border */
  /* Text overlay */
  /* Bottom border */
}
#menu li a:before, #menu li a:after {
  position: absolute;
  left: 0;
  width: 0;
  content: "";
  transition: width 300ms;
}
#menu li a:after {
  content: attr(data-screen-name);
  bottom: -6px;
  color: #ed0875;
  overflow: hidden;
  transition-duration: 0.6s;
}
#menu li a:before {
  bottom: -2px;
  height: 1px;
  background: #ed0875;
}
#menu li a.active, #menu li a:hover {
  color: white;
  /* Text overlay & Bottom border */
}
#menu li a.active:after, #menu li a:hover:after {
  width: 100%;
}
#menu li a:hover {
  /* Text overlay */
}
#menu li a:hover:before {
  width: 100%;
}

#content {
  width: 1020px;
  height: 340px;
  display: flex;
  transition: transform 300ms cubic-bezier(0.73, 0.01, 0, 1.11);
}
#content .content {
  width: 340px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#content .content h3 {
  transition: letter-spacing 300ms;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
#content .content h3:hover {
  letter-spacing: 2px;
}
</style>
</head>
<body>
  <div id="container">
	<aside id="menuOverlay">
		<i id="hamburger" class="fa fa-bars"></i>	
		<nav id="menu">
			<li><a data-screen-name="Menu">Menu</a></li>
			<li><a data-screen-name="Awesome">Awesome</a></li>
			<li><a data-screen-name="Concept">Concept</a></li>
		</nav>
	</aside>
	<main id="content">
		<section class="content">
			<h3>Menu Concept</h3>
		</section>
		<section class="content">
			<h3>So awesome</h3>
		</section>
		<section class="content">
			<h3>it makes you Cry</h3>
		</section>
	</main>
</div>
      <script>
/* Toggle Menu */
hamburger.addEventListener('click', event => {
  // Defence from over clicking
  event.target.style.pointerEvents = 'none';
  setTimeout(() => {
    event.target.style.pointerEvents = 'all';
  }, 300);

  // Open menu screen
  container.classList.toggle('opened');
});

/* Bounus - Change screen */
const menuItems = menu.querySelectorAll('[data-screen-name]:not(.active)');
menuItems.forEach(menuItem => {
  menuItem.addEventListener('click', event => {
    // Close menu
    container.classList.remove('opened');

    // Show selected screen
    if (menu.querySelector('.active')) {menu.querySelector('.active').classList.remove('active');};
    event.target.classList.add('active');
    setTimeout(() => {
      container.dataset.screen = event.target.dataset.screenName;
    }, 180);
  });
});
    </script>
</body>
</html>

6. By Dirk Drijkoningen

Made by Dirk Drijkoningen. Simple Mobile hamburger menu with Slide down effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Montserrat";
  background-color: #fff;
}
body ul li {
  list-style-type: none;
}

.nav {
  background-color: #000;
  width: 100%;
  position: fixed;
  z-index: 10;
  clear: both;
}

ul#menu {
  display: none;
}
ul#menu li a {
  width: 100%;
  display: block;
  background-color: #000;
  color: #fff;
  font-size: 1em;
  padding: 1.5em 1.6em;
  transition: background 0.2s;
  text-decoration: none;
}
ul#menu a:hover {
  background-color: #303030;
}

@media screen and (min-width: 1280px) {
  .hamburger-container {
    display: none;
  }

  .nav ul#menu {
    display: inline;
  }
  .nav ul#menu li {
    display: inline-block;
    margin-right: -5px;
  }
}
ul.hamburger li {
  height: 5px;
  background: #fff;
  content: "";
  position: relative;
  transition: 0.25s ease-in-out;
}

.hidden {
  opacity: 0;
}

.rot45deg {
  transform: rotate(45deg);
  top: 10px !important;
}

.rot-45deg {
  transform: rotate(-45deg);
}

ul.hamburger {
  display: block;
}
ul.hamburger li:nth-child(1) {
  top: 0;
}
ul.hamburger li:nth-child(2) {
  top: 5px;
}
ul.hamburger li:nth-child(3) {
  top: 10px;
}

.hamburger-container {
  width: 38px;
  margin: 1.2em 1.6em;
  height: 30px;
  cursor: pointer;
  float: right;
}
</style>
</head>
<body>
  <nav class="nav">

  <div class="hamburger-container">
    <ul class="hamburger">
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>

  <ul id="menu">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>

</nav>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
      <script>
$(document).ready(function () {
  //toggle menu
  $(".hamburger-container").click(function () {
    $("#menu").slideToggle();
  });

  //to fix issue that toggle adds style(hides) to nav
  $(window).resize(function () {
    if (window.innerWidth > 1024) {
      $("#menu").removeAttr("style");
    }
  });

  //icon animation
  var topBar = $(".hamburger li:nth-child(1)"),
  middleBar = $(".hamburger li:nth-child(2)"),
  bottomBar = $(".hamburger li:nth-child(3)");

  $(".hamburger-container").on("click", function () {
    if (middleBar.hasClass("rot-45deg")) {
      topBar.removeClass("rot45deg");
      middleBar.removeClass("rot-45deg");
      bottomBar.removeClass("hidden");
    } else {
      bottomBar.addClass("hidden");
      topBar.addClass("rot45deg");
      middleBar.addClass("rot-45deg");
    }
  });
});
    </script>
</body>
</html>

7. By Ryan Mulligan

Made by Ryan Mulligan. Off Canvas Mobile submenu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
}

.screen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 320px;
  height: 568px;
  background-color: #ededed;
  overflow: hidden;
}
@media (max-height: 568px) {
  .screen {
    top: 24px;
    bottom: auto;
  }
}
@media (max-width: 400px) {
  .screen {
    top: 0;
    width: 100vw;
    height: 100vh;
  }
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #242424;
  transform: translate3d(0, 0, 0);
}

.menu-container {
  position: relative;
  transform: translateX(0);
  transition: transform 0.25s ease-out;
}
.view-submenu .menu-container {
  transform: translateX(-100%);
}

ul {
  position: absolute;
  top: 60px;
  padding: 6px;
  width: 100%;
  height: 508px;
  color: #ededed;
  background-color: #313131;
}
ul li a {
  opacity: 0;
  display: block;
  padding: 10px 12px;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  color: white;
  border-radius: 3px;
  transform: translateY(12px);
  transition: opacity 0.15s 0.1s ease-out, transform 0.15s 0.1s ease-out;
}
ul li.has-children span {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 12px 16px;
  text-indent: -9999px;
}
ul li.has-children span:after {
  content: "";
  position: absolute;
  top: 0;
  right: 12px;
  bottom: 0;
  margin: auto;
  padding: 4px;
  width: 0px;
  height: 0px;
  cursor: pointer;
  font-size: 0;
  border-bottom: 2px solid #ededed;
  border-right: 2px solid #ededed;
  transform: rotate(-45deg);
}
ul li.has-children span:hover:after {
  border-color: #bababa;
}

.menu {
  opacity: 0;
  transition: background-color 0.25s ease-out, opacity 0.15s ease-out;
}
.menu.is-visible {
  opacity: 1;
}
.menu.is-visible li a {
  opacity: 1;
  transform: translateY(0);
}
.view-submenu .menu {
  background-color: #3e3e3e;
}
.view-submenu .menu > li > a {
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

.submenu {
  position: absolute;
  top: 0;
  left: 100%;
  background-color: #313131;
}
.submenu li {
  margin-left: 60px;
}

.hide-submenu {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 508px;
  cursor: pointer;
  background-color: #313131;
  transition: background-color 0.25s ease-out;
}
.hide-submenu:before {
  opacity: 0;
  content: "";
  position: absolute;
  top: 0;
  right: 12px;
  bottom: 0;
  margin: auto;
  padding: 4px;
  width: 6px;
  height: 6px;
  cursor: pointer;
  font-size: 0;
  border-bottom: 2px solid #ededed;
  border-right: 2px solid #ededed;
  transform: rotate(135deg);
  left: 0;
  right: -6px;
  transition: opacity 0.1s ease-out;
}
.view-submenu .hide-submenu {
  background-color: #3e3e3e;
}
.view-submenu .hide-submenu:before {
  opacity: 1;
  transition: opacity 0.15s 0.3s ease-out;
}

.toggle {
  position: absolute;
  display: flex;
  align-items: center;
  top: 0;
  left: 18px;
  bottom: 0;
  margin: auto;
  cursor: pointer;
}
.toggle span {
  position: relative;
  align-self: center;
  font-size: 0;
  width: 26px;
  height: 2px;
  background-color: #ededed;
  border-radius: 100px;
  transition: background-color 0.2s ease-out;
}
.toggle span:before, .toggle span:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ededed;
  border-radius: 100px;
  transition: transform 0.2s ease-out;
}
.toggle span:before {
  bottom: calc(100% + 6px);
}
.toggle span:after {
  top: calc(100% + 6px);
}
.is-visible .toggle span {
  background-color: transparent;
}
.is-visible .toggle span:before {
  bottom: auto;
  transform: rotate(45deg);
}
.is-visible .toggle span:after {
  top: auto;
  transform: rotate(-45deg);
}

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
</style>
</head>
<body>
  <div class="screen">
  <nav>
    <div class="toggle"><span>Menu</span></div>
    <div class="menu-container">
      <ul class="menu visually-hidden">
        <li><a href="#">uno</a></li>
        <li class="has-children"><a href="#">dos<span>more</span></a>
          <ul class="submenu">
            <li><a href="#">one</a></li>
            <li><a href="#">two</a></li>
            <li><a href="#">three</a></li>
          </ul>
        </li>
        <li><a href="#">tres</a></li>
        <li><a href="#">cuatro</a></li>
        <li class="has-children"><a href="#">cinco<span>more</span></a>
          <ul class="submenu">
            <li><a href="#">four</a></li>
            <li><a href="#">five</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
      <script>
var nav = $('nav');
var menu = $('.menu');
var menuContainer = $('.menu-container');
var subMenu = $('.submenu');
var toggle = $('.toggle');
var subToggle = $('.has-children span');
var back = '<div class="hide-submenu"></div>';
var subHide = $(back);

// Toggle menu
toggle.on("click", function () {
  nav.toggleClass('is-visible');
  if (menu.hasClass('visually-hidden')) {
    menu.toggleClass('visually-hidden is-visible');
  } else {
    menu.removeClass('is-visible');
    // Wait for CSS animation
    setTimeout(function () {
      nav.removeClass('view-submenu');
      menu.addClass('visually-hidden');
    }, 200);
  }
});

// Add submenu hide bar
subHide.prependTo(subMenu);
var subHideToggle = $('.hide-submenu');

// Show submenu
subToggle.on("click", function () {
  nav.addClass('view-submenu');
  // Hide all the submenus...
  subMenu.hide();
  // ...except for the one being called
  $(this).parents('li').find('.submenu').show();
});
// Hide submenu
subHideToggle.on("click", function () {
  nav.removeClass('view-submenu');
});
    </script>
</body>
</html>

8. By emma

Made by Emma. Slide Out Hamburger toggle menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,700);
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background: url("https://24.media.tumblr.com/a4eb7b32205d366bbea47042a04e10a9/tumblr_n5e0d0qDIW1st5lhmo1_1280.jpg");
  background-size: cover;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

.menu.active, .menu, .menu-opener-inner::before, .menu-opener-inner::after, .menu-opener-inner, .menu-opener:hover, .menu-opener.active, .menu-opener {
  transition: 250ms all;
}

.menu-opener {
  background: black;
  cursor: pointer;
  height: 4rem;
  margin: 1rem;
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 4rem;
}
.menu-opener:hover, .menu-opener.active {
  background: tomato;
}

.menu-opener-inner {
  background: white;
  height: 0.5rem;
  margin-left: 0.75rem;
  margin-top: 1.75rem;
  width: 2.5rem;
}
.menu-opener-inner::before, .menu-opener-inner::after {
  background: white;
  content: "";
  display: block;
  height: 0.5rem;
  width: 2.5rem;
}
.menu-opener-inner::before {
  transform: translateY(-0.75rem);
}
.menu-opener-inner::after {
  transform: translateY(0.25rem);
}
.menu-opener-inner.active {
  background: transparent;
}
.menu-opener-inner.active::before {
  transform: translateY(0rem) rotate(-45deg);
}
.menu-opener-inner.active::after {
  transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
}

.menu {
  background: tomato;
  color: transparent;
  height: 4rem;
  margin: 1rem;
  position: absolute;
  top: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 0rem;
  z-index: -1;
}
.menu.active {
  width: calc(100% - 2rem);
}
.menu.active .menu-link {
  color: white;
}

.menu-inner {
  display: flex;
  flex-direction: row;
  height: 100%;
  list-style-type: none;
  margin: 0;
  margin-left: 4rem;
  padding: 0;
}

.menu-link {
  color: transparent;
  display: flex;
  flex: 1 1 auto;
  font-size: 2rem;
  font-weight: 100;
  height: 100%;
  text-align: center;
  text-decoration: none;
}
.menu-link li {
  margin: auto;
}
</style>
</head>
<body>
  <nav class="menu-opener">
  <div class="menu-opener-inner"></div>
</nav>
  <nav class="menu">
    <ul class="menu-inner">
      <a href="#" class="menu-link">
        <li>work</li>
      </a>
      <a href="#" class="menu-link">
        <li>blog</li>
      </a>
      <a href="#" class="menu-link">
        <li>about</li>
      </a>
      <a href="#" class="menu-link">
        <li>contact</li>
      </a>
    </ul>
  </nav>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(".menu-opener").click(function () {
  $(".menu-opener, .menu-opener-inner, .menu").toggleClass("active");
});
    </script>
</body>
</html>

9. By Kyle Shook

Made by Kyle Shook. CodePen Logo Hamburger Menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  overflow: hidden;
  background: url(https://p198.p4.n0.cdn.getcloudapp.com/items/JruwRW4d/Lightning-seamless-pattern-by-sabavector-580x406.jpg?v=68a8e60a835e16dacee9b02d53bf5a6a);
}
.menu-cont {
    height: 50vh;
   width: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
    background: black;
  }
.menu    {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    cursor: pointer;
    transition: .3s;
}
.menu-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    cursor: pointer;
    position: relative;
    left: 5px;
    top: 5px;
    transform: scale(.4);
}
.line1 {
    width: 40px;
    height: 5px;
    background: white;
    margin: 2px 0;
    transition: .5s;
}
.line1-toggle {
    width: 30px;
    height: 50px;
    background: transparent;
    transform: rotate(90deg) skew(-35deg, 0deg) translate(48px,-15px);
    border: 10px solid white;
    transition: .5s;
    border-radius: 3px;
    border-bottom-left-radius: 7px;
    border-top-right-radius: 7px;
}
.line2 {
    width: 30px;
    height: 5px;
    background: white;
    margin: 2px 0;
    transition: .5s;
}
.line2-toggle {
    width: 30px;
    height: 50px;
    background: transparent;
    transform: rotate(90deg) skew(35deg, 0deg) translate(-51px, 51px);
    border: 10px solid white;
    transition: .5s;
    border-radius: 5px;
    border-top-left-radius: 7px;
}
.line3{
    width: 40px;
    height: 5px;
    background: white;
    margin: 2px 0;
    transition: .5s;
}
.line3-toggle {
    width: 30px;
    height: 50px;
    background: transparent;
    transform: rotate(90deg) skew(-35deg, 0deg) translate(-7px,50px);
    border: 10px solid white;
    transition: .5s;
    border-radius: 3px;
    border-top-right-radius: 7px;
}
.line4 {
    width: 30px;
    height: 5px;
    background: white;
    margin: 2px 0;
    transition: .5s;
}
.line4-toggle {
    width: 30px;
    height: 50px;
    background: transparent;
    transform: rotate(90deg) skew(35deg, 0deg) translate(-105px, -15px);
    border: 10px solid white;
    transition: .5s;
    border-radius: 5px;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}
</style>
</head>
<body>
  <div class="menu-cont">
    <div class="menu">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
        <div class="line4"></div>
    </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
      <script>
$(".menu").click(function () {
  $(".line1").toggleClass("line1-toggle");
  $(".line2").toggleClass("line2-toggle");
  $(".line3").toggleClass("line3-toggle");
  $(".line4").toggleClass("line4-toggle");
  $(".menu").toggleClass("menu-toggle");
});
    </script>
</body>
</html>

10. By Matt Hoiland

Made by Matt Hoiland. Hamburger menu with Bounce animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
/*	Reset & General */
* { margin: 0px; padding: 0px; }
body {
	background: #2e2c35;
	width: 100%; height: 100%;
}

a.codepen {
	display: block;
	height: 43px; width: 150px;
	background: url('http://creativeda.sh/sandbox/bounce_menu/img/codepen.png');
	text-indent: -9999px; font-size: 0px;
	position: absolute;
	top: 50%; left: 50%;
	z-index: 200;
	margin: 420px 0px 0px -72px;
}

div.circle {
	height: 77px; width: 77px;
	background: url('http://creativeda.sh/sandbox/bounce_menu/img/circle.png');
	position: absolute;
	top: 50%; left: 50%;
	z-index: 1000;
	margin: 164px 0px 0px -168px;	
	pointer-events: none;
	animation: pulse 5s infinite;
	-webkit-animation: pulse 1.5s infinite; 
	opacity: 0;
}
	@keyframes pulse {
		0%   { opacity: 0; }
		50%  { opacity: 1; }
		100% { opacity: 0; }
	}
	@-webkit-keyframes pulse {
		0%   { opacity: 0; }
		50%  { opacity: 1; }
		100% { opacity: 0; }
	}


/*	Device & Screen */
div.device {
	height: 798px; width: 378px;
	width: 440px; height: 807px;
	background: url('http://creativeda.sh/sandbox/bounce_menu/img/iphone_black.png') no-repeat center center; 
	-webkit-background-size: cover;
	   -moz-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;
	position: absolute; margin: auto;
	top: 0px; bottom: 100px; left: 0px; right: 0px;
}
div.screen { 
	height: 568px; width: 320px;
	position: absolute;
	top: 119px; left: 60px;
	overflow: hidden;
}
div.content {
	height: 568px; width: 320px;
	background: #375585;
	position: absolute;
	top: 0px; left: 0px;
	z-index: 300;
	-webkit-transition: all 250ms ease;
	   -moz-transition: all 250ms ease;
	    -ms-transition: all 250ms ease;
	     -o-transition: all 250ms ease;
	        transition: all 250ms ease;
}
div.content.bounce { 
	-webkit-transform: translate3d(70px, -65px, 0px); 
	   -moz-transform: translate3d(70px, -65px, 0px); 
	     -o-transform: translate3d(70px, -65px, 0px); 
	        transform: translate3d(70px, -65px, 0px); 
}
div.content.open { 
	-webkit-transform: translate3d(60px, -55px, 0px); 
	   -moz-transform: translate3d(60px, -55px, 0px); 
	     -o-transform: translate3d(60px, -55px, 0px); 
	        transform: translate3d(60px, -55px, 0px); 
}


/*	Toggle & Menu */
div.toggle {
	height: 30px; width: 40px;
	position: absolute;
	bottom: 15px; left: 10px;
	z-index: 500;
	cursor: pointer;
}
	div.x,
	div.y {
		position: absolute; margin: auto;
		top: 0px; bottom: 0px;
		left: 0px; right: 0px;
		background: #fff;
		-webkit-transition: all 200ms ease-out;
		   -moz-transition: all 200ms ease-out;
		    -ms-transition: all 200ms ease-out;
		     -o-transition: all 200ms ease-out;
		        transition: all 200ms ease-out;
	}
	div.x { height: 4px; width: 30px; }
	div.y { height: 30px; width: 4px; }
	div.x.stretch { width: 40px; }
	div.x.shrink { width: 15px; }
	div.y.minus { height: 0px; }

div.menu {
	background: #222;
	height: 568px; width: 320px;
	position: absolute;
	top: 0px; left: 0px;
	z-index: 100;
}
	div.menu ul {
		list-style: none;
		padding: 0px; margin: 0px;
		height: 150px;
		width: 35px;
		position: absolute;
		bottom: 60px; left: 11px;
	}
	div.menu ul li {
		margin-top: 15px;
	}
	div.menu ul li a {
		display: block;
		height: 31px; width: 31px;
		text-indent: -9999px; font-size: 0px;
		background: #375585 center center; 
	}
	div.menu ul li.animate a {
		-webkit-transition: all 300ms ease-out;
		   -moz-transition: all 300ms ease-out;
		    -ms-transition: all 300ms ease-out;
		     -o-transition: all 300ms ease-out;
		        transition: all 300ms ease-out;
	}
	div.menu ul li.lock a { 
		background-image: url('http://creativeda.sh/sandbox/bounce_menu/img/icon_lock.png'); 
		-webkit-transform: translate3d(-50px, -30px, 0px);
		   -moz-transform: translate3d(-50px, -30px, 0px);
		     -o-transform: translate3d(-50px, -30px, 0px);
		        transform: translate3d(-50px, -30px, 0px);
	}
	div.menu ul li.share a { 
		background-image: url('http://creativeda.sh/sandbox/bounce_menu/img/icon_share.png'); 
		-webkit-transform: translate3d(-50px, 0px, 0px);
		   -moz-transform: translate3d(-50px, 0px, 0px);
		     -o-transform: translate3d(-50px, 0px, 0px);
		        transform: translate3d(-50px, 0px, 0px);
	}
	div.menu ul li.download a { 
		background-image: url('http://creativeda.sh/sandbox/bounce_menu/img/icon_download.png'); 
		-webkit-transform: translate3d(-50px, 30px, 0px);
		   -moz-transform: translate3d(-50px, 30px, 0px);
		     -o-transform: translate3d(-50px, 30px, 0px);
		        transform: translate3d(-50px, 30px, 0px);
	}
	div.menu ul li.color a {  background-color: #fff; }
	div.menu ul li.move a { 
		-webkit-transform: translate3d(0px, 0px, 0px); 
		   -moz-transform: translate3d(0px, 0px, 0px); 
		     -o-transform: translate3d(0px, 0px, 0px); 
		        transform: translate3d(0px, 0px, 0px); 
	}
</style>
</head>
<body>
  <div class="device">
		<div class="screen">
			<div class="menu">
				<ul>
					<li class="lock"><a href="">Lock</a></li>
					<li class="share"><a href="">Share</a></li>
					<li class="download"><a href="">Download</a></li>
				</ul>
			</div>
			<div class="toggle">
				<div class="x"></div>
				<div class="y"></div>
			</div>
			<div class="content"></div>
		</div>
	</div>
	<div class="circle"></div>
	<script src="https://code.jquery.com/jquery-latest.min.js">
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script>
/*	Define Click Event for Mobile */
if ('ontouchstart' in window) {var click = 'touchstart';} else
{var click = 'click';}


/*	Click menu toggle */
$('div.toggle').on(click, function () {
  if (flag) {
    if (!$(this).hasClass('minus')) {openMenu();} else
    {closeMenu();}
  }
});


/*	Click menu icons */
$('div.menu ul li a').on(click, function (e) {
  e.preventDefault();
  closeMenu();
});


/*	Open/ Close Menu Functions */
var flag = true; // Prevent menu change while animating
function openMenu() {
  flag = false;

  // Remove circle
  $('div.circle').remove();

  // Update toggle
  $('div.toggle').addClass('minus');
  $('div.y').addClass('minus');
  setTimeout(function () {$('div.x').addClass('stretch');}, 100);
  setTimeout(function () {$('div.x').removeClass('stretch');}, 300);

  // Move content
  $('div.content').addClass('bounce');
  setTimeout(function () {$('div.content').removeClass('bounce').addClass('open');}, 250);

  // Animate menu icons
  $('div.menu ul li').addClass('animate');
  $('div.menu ul li').addClass('move');
  setTimeout(function () {$('div.menu ul li').addClass('color');}, 200);
  setTimeout(function () {flag = true;}, 400);
}

function closeMenu() {
  flag = false;

  // Update toggle
  $('div.toggle').removeClass('minus');
  $('div.y').removeClass('minus');
  $('div.x').addClass('shrink');
  setTimeout(function () {$('div.x').removeClass('shrink');}, 200);

  // Move content
  $('div.content').removeClass('open');

  // Reset menu icons
  setTimeout(function () {
    $('div.menu ul li').removeClass('animate');
    $('div.menu ul li').removeClass('color move');
    flag = true;
  }, 300);
}
    </script>
</body>
</html>

11. By creme

Made by creme. Uber-like Navigation menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url("https://fonts.googleapis.com/css?family=Noto+Sans:400,700");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Noto Sans", sans-serif;
}

*::-moz-selection {
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
}

*::selection {
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  overflow: hidden;
  display: flex;
  transition: padding 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

a {
  text-decoration: none;
  color: #EF3340;
}

header {
  z-index: 5;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
header .nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 80px;
}
header .nav .title {
  line-height: 80px;
  padding: 0 120px;
  font-size: 24px;
  color: #fff;
  font-weight: 900;
}
header .nav .toggle {
  position: absolute;
  margin: auto;
  width: 46px;
  height: 46px;
  right: 120px;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  cursor: pointer;
}
header .nav .toggle .bar {
  position: relative;
  width: 40px;
  height: 2px;
  background: #fff;
}
header .nav .toggle .bar:before, header .nav .toggle .bar:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  left: 0;
  transform-origin: center center;
  transition: transform 0.25s ease, top 0.25s ease, bottom 0.25s ease;
}
header .nav .toggle .bar:before {
  top: -10px;
}
header .nav .toggle .bar:after {
  bottom: -10px;
}
header .nav .toggle.clicked .bar {
  background: transparent;
}
header .nav .toggle.clicked .bar:before, header .nav .toggle.clicked .bar:after {
  background: #000;
}
header .nav .toggle.clicked .bar:before {
  transform: rotate(45deg);
  top: 0;
}
header .nav .toggle.clicked .bar:after {
  transform: rotate(-45deg);
  bottom: 0;
}
header .nav nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  opacity: 0;
  z-index: 5;
  transition: opacity 0.5s ease;
}
header .nav nav .showcase {
  background: #000;
  flex: 1;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
header .nav nav .showcase .showcase-container {
  width: 50%;
  position: relative;
  overflow: hidden;
}
header .nav nav .showcase .showcase-container:before {
  content: "";
  display: block;
  padding-top: 100%;
}
header .nav nav .showcase .showcase-menu {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: visible;
  list-style-type: none;
  transition: top 0.25s ease;
}
header .nav nav .showcase .showcase-menu li {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 1;
}
header .nav nav .showcase .showcase-menu li.overlay:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: -1;
}
header .nav nav .menu {
  background: #fff;
  flex: 1;
}
header .nav nav .menu ul {
  width: 100%;
  padding: 80px 48px 24px 48px;
  list-style-type: none;
  max-height: 100%;
  overflow-y: auto;
}
header .nav nav .menu ul::-webkit-scrollbar {
  width: 6px;
  height: 10px;
}
header .nav nav .menu ul::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
header .nav nav .menu ul::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.4);
  border: 0px none #ffffff;
  border-radius: 3px;
}
header .nav nav .menu ul::-webkit-scrollbar-thumb:hover {
  background: #000;
}
header .nav nav .menu ul::-webkit-scrollbar-thumb:active {
  background: #000;
}
header .nav nav .menu ul::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border: 0px none #ffffff;
  border-radius: 0;
}
header .nav nav .menu ul::-webkit-scrollbar-track:hover {
  background: rgba(0, 0, 0, 0.1);
}
header .nav nav .menu ul::-webkit-scrollbar-track:active {
  background: rgba(0, 0, 0, 0.1);
}
header .nav nav .menu ul::-webkit-scrollbar-corner {
  background: transparent;
}
header .nav nav .menu ul li {
  display: flex;
  flex-direction: row;
  align-items: center;
}
header .nav nav .menu ul li .number {
  display: inline-block;
  padding: 0 0 0 80px;
  overflow: hidden;
}
header .nav nav .menu ul li .number span {
  display: block;
  font-size: 48px;
  font-weight: 400;
  transition: transform 0.25s ease;
  transform: translateY(100%);
}
header .nav nav .menu ul li a {
  display: inline-block;
  font-size: 48px;
  color: #000;
  line-height: 1;
  padding: 24px 0 24px 80px;
  transition: transform 0.25s ease;
}
header .nav nav .menu ul li:hover a {
  transform: translateX(20px);
}
header .nav nav .menu ul li.hover .number span {
  transform: translateY(0);
}
header .nav nav.hidden {
  display: none;
}
header .nav nav.open {
  opacity: 1;
}
header .nav nav.open .showcase {
  -webkit-animation: slideInLeft 0.5s cubic-bezier(0.3, 0, 0.3, 1) forwards;
          animation: slideInLeft 0.5s cubic-bezier(0.3, 0, 0.3, 1) forwards;
}
header .nav nav.open .menu {
  -webkit-animation: slideInRight 0.5s cubic-bezier(0.3, 0, 0.3, 1) forwards;
          animation: slideInRight 0.5s cubic-bezier(0.3, 0, 0.3, 1) forwards;
}

@-webkit-keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@-webkit-keyframes slideInLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
.content {
  position: relative;
  flex: 1;
  padding: 80px 40px 40px;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/124740/2018-09-28%2009_21_48-https___d2kbkpwf98wmwo.cloudfront.net_videos_hero-lg.mp4.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.content p {
  color: #fff;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.content p a {
  color: #fff;
  box-shadow: 0 1px 0 0 #EF3340;
}
</style>
</head>
<body>
  <header>
	<div class="nav">
		<div class="title">
			Navigation
		</div>
		<div class="toggle">
			<div class="bar"></div>
		</div>
		
		<nav class="">
			<div class="showcase">
				<div class="showcase-container">
					<ul class="showcase-menu">
						<li>Hi!</li>
						<li>Hover over the list items or click them!</li>
						<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/124740/ice-final-white.svg" alt=""></li>
						<li class="overlay" style="background-image:url(https://images.unsplash.com/photo-1537949721120-e8f21f6698e6?ixlib=rb-0.3.5&s=96527c5eff0b3bd24946f77f4dc5a789&auto=format&fit=crop&w=634&q=80);">
							Lorem ipsum
						</li>
						<li style="background-image:url(https://d2kbkpwf98wmwo.cloudfront.net/images/menu/motion.png);"></li>
						<li>ABC</li>
						<li style="background-image:url(https://images.unsplash.com/photo-1537914675540-ec9f82fbd752?ixlib=rb-0.3.5&s=7d427165e9b4e7aa8d80b19c9d0b3128&auto=format&fit=crop&w=1316&q=80);"></li>
						<li style="background-image:url(https://d2kbkpwf98wmwo.cloudfront.net/images/menu/color.png);"></li>
					</ul>
				</div>
			</div>
			
			<div class="menu">
				<ul class="main-menu">
					<li class="active"><a href="#!">Introduction</a></li>
					<li><a href="#!">The System</a></li>
					<li><a href="#!">Logo</a></li>
					<li><a href="#!">Composition</a></li>
					<li><a href="#!">Motion</a></li>
					<li><a href="#!">Typography</a></li>
					<li><a href="#!">Photography</a></li>
					<li><a href="#!">Color</a></li>
				</ul>
			</div>
		</nav>
		
	</div>
</header>

<div class="content">
	<p>
		Navigation like on the <a href="https://www.uber.design/case-studies/rebrand-2018" target="_blank">Uber Rebrand Site</a>
	</p>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js'></script>
      <script>
$(document).ready(function () {
  navNumbers();
  backToDefault();

  // show hovered li stuff
  $('.main-menu').on('mouseover', 'li', function () {
    showTarget($(this));
  });

  // show default .active li stuff
  $('.main-menu').on('mouseleave', backToDefault);

  // change active list item
  $('.main-menu').on('click', 'li', function () {
    changeActive($(this));
  });

  // toggle menu
  $('.toggle').on('click', toggleMenu);

  // for showcase only
  var tl = new TimelineMax(),
  body = $('body'),
  header = $('header'),
  content = $('.content p'),
  toggle = $('.toggle'),
  nav = $('nav');

  tl.to(body, 1, {
    padding: '0 80px 80px',
    delay: .5 });


  tl.to(header, .25, {
    opacity: 1,
    delay: .5 });


  tl.to(content, .25, {
    opacity: 1 },
  '-=.25');

  tl.call(function () {
    toggleMenu();
  }, null, null, 3);

  tl.call(function () {
    toggleMenu();
  }, null, null, 4.5);

});

// toggle menu
function toggleMenu() {
  var toggle = $('.toggle');
  var nav = $('nav');

  if (toggle.hasClass('clicked')) {
    toggle.removeClass('clicked');
    nav.removeClass('open');
    console.log('remove open');
    setTimeout(function () {
      console.log('add hidden');
      nav.addClass('hidden');
    }, 500);
  } else {
    nav.removeClass('hidden');
    toggle.addClass('clicked');
    nav.addClass('open');
  }
}

// give the list items numbers
function navNumbers() {
  var sum = $('.main-menu li').length;
  var i = 0;
  var x = 0;

  $('.showcase-menu li').each(function () {
    $(this).attr('data-target', x);
    x++;
  });

  $('.main-menu li').each(function () {
    var number = ('0' + i).slice(-2);
    var numberElement = '<div class="number"><span>' + number + '</span></div>';
    $(this).prepend(numberElement);
    $(this).attr('data-target', i);
    i++;
  });
}


// show the hovered list item stuff
function showTarget(e) {
  $('.main-menu li').removeClass('hover');

  var target = $(e).attr('data-target');
  var showcaseHeight = $('.showcase-menu').outerHeight();

  showcaseHeight = showcaseHeight * target * -1;

  $('.showcase-menu').css({
    top: showcaseHeight });


  $(e).addClass('hover');
}

// show the list item stuff of .active
function backToDefault() {
  $('.main-menu li').removeClass('hover');

  var activeItem = $('.main-menu li.active');
  var target = activeItem.attr('data-target');
  var showcaseHeight = $('.showcase-menu').outerHeight();

  showcaseHeight = showcaseHeight * target * -1;

  $('.showcase-menu').css({
    top: showcaseHeight });


  activeItem.addClass('hover');
}
// change active list item
function changeActive(e) {
  $('.main-menu li').removeClass('active');
  $(e).addClass('active');
}
    </script>
</body>
</html>