10+ JavaScript Mobile Menu Examples

This post contains a total of 10+ Hand-Picked JavaScript Mobile Menu Examples with Source Code. All these Mobile 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 Mobile Menu Examples

1. By Shahid Shaikh

Made by Shahid Shaikh. Navigation Mobile Menu with Button Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;600;700&display=swap");
body {
  background-color: #320027;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
}
body .container {
  background-color: white;
  width: 320px;
  height: 120px;
  border-radius: 30px;
  box-shadow: 0px 5px 10px 10px rgba(0, 0, 0, 0.01);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 60px;
}
body .container svg {
  height: 40px;
  width: 40px;
  stroke: #ff5157;
  cursor: pointer;
  z-index: 10;
}
body .container .fake {
  position: absolute;
  width: 350px;
  height: 120px;
  bottom: 0;
  padding-top: 300px;
  padding-left: 30px;
  padding-right: 30px;
  overflow: hidden;
  left: 50%;
  transform: translate(-50%);
  pointer-events: none;
}
body .container .fake .circle {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  background-color: #ff5157;
  position: absolute;
  bottom: -50px;
}
body .credits {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 20px;
  color: #595e64;
  font-weight: 500;
}
body .credits p a {
  font-weight: bold;
  text-decoration: none;
  color: #595e64;
}
</style>
</head>
<body>
  <div class="container">
  <svg id="box" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
  </svg>

  <svg id="home" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
  </svg>

  <svg id="calendar" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
  </svg>
  
  <div class="fake">
    <div class="circle"></div>
  </div>
</div>

<div class="credits">
  <p>
    Inspired by
    <a target="_blank" href="https://dribbble.com/shots/6798414-iOS-mobile-menu-interaction">Dribbble Shot</a>
  </p>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js'></script>
      <script>
let isRunning = false;

function animateCircle(distance, icon) {
  let t1 = gsap.timeline();

  if (!isRunning) {
    isRunning = true;
    t1.eventCallback("onComplete", function () {
      isRunning = false;
    });

    gsap.to(
    ".container",
    1.5,
    {
      ease: "elastic.out(.4, 0.3)",
      scale: 0.7 },

    0);


    gsap.to(
    ".container",
    1.5,
    {
      ease: "elastic.out(.4, 0.3)",
      scale: 1 },

    0);


    t1.to(".circle", 0.4, {
      ease: "elastic.out(.4, 0.3)",
      y: 0 });


    t1.to(".circle", 0.3, {
      ease: "power1.inOut",
      x: distance });


    t1.to(
    `#${icon}`,
    0.8,
    {
      ease: "elastic.out(.4, 0.5)",
      y: -160 },

    0.7);


    t1.to(
    ".circle",
    1,
    {
      ease: "elastic.out(.4, 0.3)",
      y: -140 },

    0.7);


    t1.to(`#${icon}`, 1, {
      ease: "elastic.out(.4, 0.3)",
      y: -66,
      stroke: "white" });


    t1.to(
    ".circle",
    0.6,
    {
      ease: "elastic.out(.5, 0.3)",
      y: -135 },

    1.9);


    t1.to(
    ".circle",
    0.4,
    {
      ease: "power1.inOut",
      y: -140 },

    2.1);


    t1.to(
    `#${icon}`,
    1,
    {
      ease: "elastic.out(.4, 0.3)",
      y: 0,
      stroke: "#ff5157" },

    2.6);


    t1.to(
    ".circle",
    1,
    {
      ease: "elastic.out(.5, 0.3)",
      y: 0 },

    2.6);

  }
}

let box = document.querySelector("#box");
let home = document.querySelector("#home");
let calendar = document.querySelector("#calendar");

box.addEventListener("click", function () {
  animateCircle(0, "box");
});

home.addEventListener("click", function () {
  animateCircle(140, "home");
});

calendar.addEventListener("click", function () {
  animateCircle(280, "calendar");
});
    </script>
</body>
</html>

2. By Geoffrey Crofte

Made by Geoffrey Crofte. JavaScript Animated Mobile Menu with Slow motion button. 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>
/* Main menu positionning */
.main-nav {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    text-align: center;
    background: #FFF;
    opacity: 0;
    z-index: -1;
    visibility: hidden;
    transition: all .375s;
}

.main-nav.is-open {
    opacity: 1;
    z-index: 100;
    visibility: visible;
}

/* Yellow band effect */
.main-nav::before {
	 content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -15px;
    background: #FEDC2A;
    transform-origin: 0 0;
    transform: skew(-14deg) translateX(-120%);
    transition: all .275s .1s;
}

.main-nav.is-open::before {
    transform: skew(-14deg) translateX(0);
}

/* Skewing effect on menu links */
.main-nav ul {
    display: inline-flex;
    flex-direction: column;
    height: 93%; /* Should be 100%, but we have a notice message :D */
    align-items: flex-end;
    justify-content: center;
    transform: translateX(-18%) skew(-16deg);
}

.main-nav li {
    display: block;
    margin: .5rem 0;
    text-align: right;
    transform: skew(16deg);
}

/* Apparition effect on links */
.main-nav a {
    opacity: 0;
    transform: translateY(-10px);
}

.main-nav.is-open a {
    opacity: 1;
    transform: translateY(0);
}
.main-nav li:nth-child(1) a {
	transition: all 275ms 175ms
}
.main-nav li:nth-child(2) a {
	transition: all 275ms 225ms
}
.main-nav li:nth-child(3) a {
	transition: all 275ms 275ms
}
.main-nav li:nth-child(4) a {
	transition: all 275ms 325ms
}
.main-nav li:nth-child(5) a {
	transition: all 275ms 375ms
}


/* Decoration */
.main-nav ul,
.main-nav li {
	list-style: none;
	padding: 0;
}
.main-nav a {
	display: block;
	padding: 12px 0;
	color: #5A3B5D;
	font-size: 1.4em;
	text-decoration: none;
	font-weight: bold;
}

/* Burger Style: @see: https://codepen.io/CreativeJuiz/full/oMZNXy */
.open-main-nav {
	position: absolute;
	top: 15px;
	padding-top: 20px;
	right: 15px;
	z-index: 1000;
	background: none;
	border: 0;
	cursor: pointer;
}
.open-main-nav:focus {
	outline: none;
}
.burger {
	position: relative;
	display: block;
	width: 28px;
	height: 4px;
	margin: 0 auto;
	background: #5A3B5D;
	transform: skew(5deg);
	transition: all .275s;
}

.burger:after,
.burger:before {
	content: '';
	display: block;
	height: 100%;
	background: #5A3B5D;
	transition: all .275s;
}

.burger:after {
	transform: translateY(-12px) translateX(-2px) skew(-20deg);
}

.burger:before {
	transform: translateY(-16px) skew(-10deg);
}

/* Toggle State part */
.is-open .burger {
	transform: skew(5deg) translateY(-8px) rotate(-45deg);
}

.is-open .burger:before {
	transform: translateY(0px) skew(-10deg) rotate(75deg);
}

.is-open .burger:after {
	transform: translateY(-12px) translateX(10px) skew(-20deg);
    opacity: 0;
}

/* MENU Text part */

.burger-text {
	display: block;
	font-size: .675rem;
	letter-spacing: .05em;
	margin-top: .5em;
	text-transform: uppercase;
	font-weight: 500;
	text-align: center;
	color: #5A3B5D;
}

.device {
	position: relative;
	width: 345px;
	height: 600px;
	background: #FFF;
	border: 1px solid #EEE;
	border-radius: 3px;
	box-shadow: 0 0 0 10px rgba(0,0,0,.1);
}

.container {
	position: absolute;
	top: 0; right: 0;
	bottom: 0; left: 0;
	overflow: hidden;
	background: linear-gradient(to bottom, #eee, #ddd);
}

html {
	height: 100%;
}
body {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Slow motion button */
[id="slowmo"] {
	position: absolute;
	top: 20px;
	right: 20px;
	padding: 10px;
	border: 0;
	font-size: 1rem;
	background: #FEDC2A;
	color: #5A3B5D;
	font-weight: bold;
	cursor: pointer;
	transition: all .275s;
}

[id="slowmo"] span {
	display: block;
	font-weight: normal;
}

[id="slowmo"]:hover,
[id="slowmo"]:focus {
	background: #5A3B5D;
	color: #FEDC2A;
}

[id="slowmo"].is-slowmo span:after {
	content: 'Activated';
	display: block;
	font-weight: bold;
}

/* When slowmotion is activated */

.is-slowmo + .device .open-main-nav .burger,
.is-slowmo + .device .open-main-nav .burger:before,
.is-slowmo + .device .open-main-nav .burger:after,
.is-slowmo + .device .main-nav,
.is-slowmo + .device .main-nav::before,
.is-slowmo + .device .main-nav a {
	transition-duration: 3s;
}
.is-slowmo + .device .main-nav li:nth-child(1) a {
	transition-delay: 1750ms
}
.is-slowmo + .device .main-nav li:nth-child(2) a {
	transition-delay: 2250ms
}
.is-slowmo + .device .main-nav li:nth-child(3) a {
	transition-delay: 2750ms
}
.is-slowmo + .device .main-nav li:nth-child(4) a {
	transition-delay: 3250ms
}
.is-slowmo + .device .main-nav li:nth-child(5) a {
	transition-delay: 3750ms
}

/* Notice */
.notice {
	position: absolute;
	bottom: -15px;
	left: 0; right: 0;
	padding: 20px;
	background: #F2F2F2;
	color: #5A3B5D;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	z-index: 100;
	text-align: center;
}
.notice strong {
	font-weight: 700;
}
.notice a {
	padding: 2px 3px;
	background: #FEDC2A;
	text-decoration: none;
}
</style>
</head>
<body>
  <button id="slowmo">Slow motion <span>mode</span></button>

<div class="device">
	<div class="container">
		<button id="burger" class="open-main-nav">
			<span class="burger"></span>
			<span class="burger-text">Menu</span>
		</button>
		<nav class="main-nav" id="main-nav">
			<ul>
				<li>
					<a href="#">About me</a>
				</li>
				<li>
					<a href="#">Speaker &amp; Writer</a>
				</li>
				<li>
					<a href="#">Work</a>
				</li>
				<li>
					<a href="#">Contact</a>
				</li>
				<li>
					<a href="#">Blog</a>
				</li>
			</ul>
		</nav>
	</div>
</div>
      <script>
let burger = document.getElementById('burger'),
nav = document.getElementById('main-nav'),
slowmo = document.getElementById('slowmo');

burger.addEventListener('click', function (e) {
  this.classList.toggle('is-open');
  nav.classList.toggle('is-open');
});

slowmo.addEventListener('click', function (e) {
  this.classList.toggle('is-slowmo');
});

/* Onload demo - dirty timeout */
let clickEvent = new Event('click');

window.addEventListener('load', function (e) {
  slowmo.dispatchEvent(clickEvent);
  burger.dispatchEvent(clickEvent);

  setTimeout(function () {
    burger.dispatchEvent(clickEvent);

    setTimeout(function () {
      slowmo.dispatchEvent(clickEvent);
    }, 3500);
  }, 5500);
});
    </script>
</body>
</html>

3. By Oliver Nural

Made by Oliver Nural. Radial menu button centered for mobile, uses react. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Radial menu button centered for mobile</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
html {
  height: 100%;
}

body {
  background: #160C28;
  display: flex;
  justify-content: center;
  align-items: center;
}

.disclaimer {
  color: #fdfdfd;
}

a {
  text-decoration: none;
}

/* Mobile Text Button */
.mobile-menu-button {
  position: fixed;
  top: auto;
  bottom: 20px;
  left: 50%;
  margin-left: -30px;
  background: #fdfdfd;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  transition: background 0.5s;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  -ms-transition: background 0.5s;
  -o-transition: background 0.5s;
  display: flex;
  display: -webkit-flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.mobile-menu-button > i {
  display: block;
  width: 30px;
  height: 2px;
  margin: 5px;
  background-color: #160C28;
  transition: all 0.5s cubic-bezier(.45,0,0,1);
  -webkit-transition: all 0.5s cubic-bezier(.45,0,0,1);
  -moz-transition: all 0.5s cubic-bezier(.45,0,0,1);
  -ms-transition: all 0.5s cubic-bezier(.45,0,0,1);
  -o-transition: all 0.5s cubic-bezier(.45,0,0,1);
  z-index: 10;
}

.menu-button-on > i {
  background-color: #fdfdfd;
}

.menu-button-on > i:nth-child(1) {
  transform: translate3d(0px, 12px, 0px) scale3d(1, 1, 1) rotate(45deg);
  -webkit-transform: translate3d(0px, 12px, 0px) scale3d(1, 1, 1) rotate(45deg);
  -moz-transform: translate3d(0px, 12px, 0px) scale3d(1, 1, 1) rotate(45deg);
  -ms-transform: translate3d(0px, 12px, 0px) scale3d(1, 1, 1) rotate(45deg);
  -o-transform: translate3d(0px, 12px, 0px) scale3d(1, 1, 1) rotate(45deg);
  background-color: yellow;
} 

.menu-button-on > i:nth-child(2) {
  opacity: 0;
}

.menu-button-on > i:nth-child(3) {
  transform: translate3d(0px, -12px, 0px) scale3d(1, 1, 1) rotate(315deg);
  -webkit-transform: translate3d(0px, -12px, 0px) scale3d(1, 1, 1) rotate(315deg);
  -moz-transform: translate3d(0px, -12px, 0px) scale3d(1, 1, 1) rotate(315deg);
  -ms-transform: translate3d(0px, -12px, 0px) scale3d(1, 1, 1) rotate(315deg);
  -o-transform: translate3d(0px, -12px, 0px) scale3d(1, 1, 1) rotate(315deg);
  background-color: yellow;
}

.menu-button-on {
  background: #160C28;
}

/* Expanded menu that appears when clicked */
.mobile-menu-container {
  position: fixed;
  top: auto;
  bottom: 20px;
  left: 50%;
  margin-left: -30px;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  z-index: 1;
}

.mobile-menu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fdfdfd;
  border-radius: 50%;
  height: 100%;
  width: 100%;
  background: #fdfdfd;
  transition: all 0.5s cubic-bezier(.45,0,0,1);
  -webkit-transition: all 0.5s cubic-bezier(.45,0,0,1);
  -moz-transition: all 0.5s cubic-bezier(.45,0,0,1);
  -ms-transition: all 0.5s cubic-bezier(.45,0,0,1);
  -o-transition: all 0.5s cubic-bezier(.45,0,0,1);
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  z-index: 2;
  display: flex;
  display:-webkit-flex;
  align-content: center;
  -webkit-align-content: center;
  justify-content: center;
  -webkit-justify-content: center;
}

.menu-expand {
  width: 400%;
  height: 400%;
}

/* Menu Text */
.material-icons {
  font-size: 3em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  transition: all 0.4s cubic-bezier(.45,0,0,1);
  -webkit-transition: all 0.4s cubic-bezier(.45,0,0,1);
  -moz-transition: all 0.4s cubic-bezier(.45,0,0,1);
  -ms-transition: all 0.4s cubic-bezier(.45,0,0,1);
  -o-transition: all 0.4s cubic-bezier(.45,0,0,1);
  z-index: 3;
}

.material-icons a {
  transition: all 0.4s cubic-bezier(.45,0,0,1);
  -webkit-transition: all 0.4s cubic-bezier(.45,0,0,1);
  -moz-transition: all 0.4s cubic-bezier(.45,0,0,1);
  -ms-transition: all 0.4s cubic-bezier(.45,0,0,1);
  -o-transition: all 0.4s cubic-bezier(.45,0,0,1);
  color: #fdfdfd;
}

.menu-text-open a {
  color: #160C28;
}

.menu-text-open.menu-text-home {
  top: 50%;
  left: 18%;
}

.menu-text-open.menu-text-about {
  top: 21%;
  left: 30%;
}

.menu-text-open.menu-text-work {
  top: 20%;
  left: 70%;
}

.menu-text-open.menu-text-contact {
  top: 50%;
  left: 82%;
}
</style>
</head>
<body>
  <div id="app"></div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js'></script>
      <script>
/*
 * A simple React component
 */
class MobileMenu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false };

  }
  handleMenuClick() {
    this.setState({
      isOpen: !this.state.isOpen });

  }
  render() {
    let isMenuTextShown = this.state.isOpen ? 'menu-text-open' : '';
    return /*#__PURE__*/(
      React.createElement("div", { className: "background" }, /*#__PURE__*/
      React.createElement("div", { className: "disclaimer" }, "\xA0 \xA0 \xA0 "), /*#__PURE__*/

      React.createElement("div", { className: 'mobile-menu-button ' + (this.state.isOpen ? 'menu-button-on' : ''), onClick: () => this.handleMenuClick() }, /*#__PURE__*/
      React.createElement("i", null), /*#__PURE__*/
      React.createElement("i", null), /*#__PURE__*/
      React.createElement("i", null)), /*#__PURE__*/


      React.createElement("div", { className: "mobile-menu-container" }, /*#__PURE__*/
      React.createElement("div", { className: 'mobile-menu ' + (this.state.isOpen ? 'menu-expand' : '') }, /*#__PURE__*/
      React.createElement("i", { className: 'material-icons menu-text-home ' + isMenuTextShown }, /*#__PURE__*/
      React.createElement("a", { href: "#" }, "home")), /*#__PURE__*/

      React.createElement("i", { className: 'material-icons menu-text-about ' + isMenuTextShown }, /*#__PURE__*/
      React.createElement("a", { href: "#" }, "info")), /*#__PURE__*/

      React.createElement("i", { className: 'material-icons menu-text-work ' + isMenuTextShown }, /*#__PURE__*/
      React.createElement("a", { href: "#" }, "work")), /*#__PURE__*/

      React.createElement("i", { className: 'material-icons menu-text-contact ' + isMenuTextShown }, /*#__PURE__*/
      React.createElement("a", { href: "#" }, "email"))))));

  }}


/*
 * Render the above component into the div#app
 */
React.render( /*#__PURE__*/React.createElement(MobileMenu, null), document.getElementById('app'));
//# sourceURL=pen.js
    </script>
</body>
</html>

4. By Ricardo Oliva Alonso

Made by Ricardo Oliva Alonso. Slide up mobile menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
/* Variables */
/* Reset */
*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Generic */
body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffdfe2;
}

li {
  list-style: none;
}

.main {
  width: 170px;
  height: 200px;
  position: relative;
  transform: scale(1.4);
}

.icon {
  width: 25px;
  height: 25px;
  object-fit: contain;
  object-position: center;
  padding: 5px;
  cursor: pointer;
}

/* Menu */
.menu {
  height: 40px;
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 25px;
  background-color: #ffffff;
  box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.075);
}
.menu::before {
  content: "";
  position: absolute;
  width: 45px;
  height: 45px;
  bottom: 22.5px;
  left: calc(50% - 22.5px);
  border-radius: 50%;
  background: #ffdfe2;
}
.menu__icon {
  padding: 3px;
  border-radius: 50%;
}
.menu__trigger {
  position: absolute;
  bottom: 32.5px;
  left: calc(50% - 12.5px);
  border-radius: 50%;
  background-color: #ff4a55;
  z-index: 100;
  transition: 0.35s ease;
  cursor: pointer;
}
.menu__trigger:hover {
  background-color: #ff3a47;
}
.menu__list {
  width: 40px;
  height: 40px;
  position: absolute;
  bottom: 25px;
  left: calc(50% - 20px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: #ff636d;
  border-radius: 20px;
  overflow: hidden;
  transition: 0.35s ease;
  padding-bottom: 30px;
  padding-top: 7px;
  transition: 0.35s ease;
}
.menu__item {
  visibility: hidden;
  opacity: 0;
  transform: scale(0);
}
.menu__link {
  background: #ff7d85;
  border-radius: 50%;
  margin-bottom: 2.5px;
  transition: 0.35s ease;
}
.menu__link:hover {
  background: #ff969d;
}

/**/
.trigger-rotate {
  transform: rotateZ(135deg);
}

.show-list {
  height: 133px;
}

.show-item {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}
.show-item:nth-of-type(1) {
  transition: 0.35s ease 0.05s;
}
.show-item:nth-of-type(2) {
  transition: 0.35s ease 0.1s;
}
.show-item:nth-of-type(3) {
  transition: 0.35s ease 0.15s;
}
</style>
</head>
<body>
  <div class="main">
  <nav class="menu"><img class="menu__icon icon" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGZp%0D%0AbGw9IiNmZmRmZTIiIGlkPSJzdmdfMSIgZD0ibTIwLDQwbDAsLTEybDgsMGwwLDEybDEwLDBsMCwt%0D%0AMTZsNiwwbC0yMCwtMThsLTIwLDE4bDYsMGwwLDE2bDEwLDB6Ii8+CiA8L2c+Cjwvc3ZnPg==" alt="Icon"/><img class="menu__icon icon" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGlk%0D%0APSJzdmdfMSIgZmlsbD0ibm9uZSIgZD0ibTAsMGw0OCwwbDAsNDhsLTQ4LDBsMCwtNDh6Ii8+CiAg%0D%0APHBhdGggZmlsbD0iI2ZmZGZlMiIgaWQ9InN2Z18yIiBkPSJtMzguODYsMjUuOTVjMC4wOCwtMC42%0D%0ANCAwLjE0LC0xLjI5IDAuMTQsLTEuOTVzLTAuMDYsLTEuMzEgLTAuMTQsLTEuOTVsNC4yMywtMy4z%0D%0AMWMwLjM4LC0wLjMgMC40OSwtMC44NCAwLjI0LC0xLjI4bC00LC02LjkzYy0wLjI1LC0wLjQzIC0w%0D%0ALjc3LC0wLjYxIC0xLjIyLC0wLjQzbC00Ljk4LDIuMDFjLTEuMDMsLTAuNzkgLTIuMTYsLTEuNDYg%0D%0ALTMuMzgsLTEuOTdsLTAuNzUsLTUuM2MtMC4wOSwtMC40NyAtMC41LC0wLjg0IC0xLC0wLjg0bC04%0D%0ALDBjLTAuNSwwIC0wLjkxLDAuMzcgLTAuOTksMC44NGwtMC43NSw1LjNjLTEuMjIsMC41MSAtMi4z%0D%0ANSwxLjE3IC0zLjM4LDEuOTdsLTQuOTgsLTIuMDFjLTAuNDUsLTAuMTcgLTAuOTcsMCAtMS4yMiww%0D%0ALjQzbC00LDYuOTNjLTAuMjUsMC40MyAtMC4xNCwwLjk3IDAuMjQsMS4yOGw0LjIyLDMuMzFjLTAu%0D%0AMDgsMC42NCAtMC4xNCwxLjI5IC0wLjE0LDEuOTVzMC4wNiwxLjMxIDAuMTQsMS45NWwtNC4yMiwz%0D%0ALjMxYy0wLjM4LDAuMyAtMC40OSwwLjg0IC0wLjI0LDEuMjhsNCw2LjkzYzAuMjUsMC40MyAwLjc3%0D%0ALDAuNjEgMS4yMiwwLjQzbDQuOTgsLTIuMDFjMS4wMywwLjc5IDIuMTYsMS40NiAzLjM4LDEuOTds%0D%0AMC43NSw1LjNjMC4wOCwwLjQ3IDAuNDksMC44NCAwLjk5LDAuODRsOCwwYzAuNSwwIDAuOTEsLTAu%0D%0AMzcgMC45OSwtMC44NGwwLjc1LC01LjNjMS4yMiwtMC41MSAyLjM1LC0xLjE3IDMuMzgsLTEuOTds%0D%0ANC45OCwyLjAxYzAuNDUsMC4xNyAwLjk3LDAgMS4yMiwtMC40M2w0LC02LjkzYzAuMjUsLTAuNDMg%0D%0AMC4xNCwtMC45NyAtMC4yNCwtMS4yOGwtNC4yMiwtMy4zMXptLTE0Ljg2LDUuMDVjLTMuODcsMCAt%0D%0ANywtMy4xMyAtNywtN3MzLjEzLC03IDcsLTdzNywzLjEzIDcsN3MtMy4xMyw3IC03LDd6Ii8+CiA8%0D%0AL2c+Cjwvc3ZnPg==" alt="Icon"/><img class="menu__trigger icon" id="trigger" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGZp%0D%0AbGw9IiNmZmZmZmYiIHN0cm9rZT0ibnVsbCIgaWQ9InN2Z18xIiBmaWxsLXJ1bGU9ImV2ZW5vZGQi%0D%0AIGQ9Im0yMS4zNTY3NDksMTQuMTI2NTM0bC03LjIzMDIxNSwwbDAsNy4yMzAyMTVjMCwwLjIzNDc2%0D%0AOSAtMC4xOTA1MzcsMC40MjUzMDcgLTAuNDI1MzA3LDAuNDI1MzA3bC0zLjQwMjQ1NCwwYy0wLjIz%0D%0ANDc2OSwwIC0wLjQyNTMwNywtMC4xOTA1MzcgLTAuNDI1MzA3LC0wLjQyNTMwN2wwLC03LjIzMDIx%0D%0ANWwtNy4yMzAyMTUsMGMtMC4yMzQ3NjksMCAtMC40MjUzMDcsLTAuMTkwNTM3IC0wLjQyNTMwNywt%0D%0AMC40MjUzMDdsMCwtMy40MDI0NTRjMCwtMC4yMzQ3NjkgMC4xOTA1MzcsLTAuNDI1MzA3IDAuNDI1%0D%0AMzA3LC0wLjQyNTMwN2w3LjIzMDIxNSwwbDAsLTcuMjMwMjE1YzAsLTAuMjM0NzY5IDAuMTkwNTM3%0D%0ALC0wLjQyNTMwNyAwLjQyNTMwNywtMC40MjUzMDdsMy40MDI0NTQsMGMwLjIzNDc2OSwwIDAuNDI1%0D%0AMzA3LDAuMTkwNTM3IDAuNDI1MzA3LDAuNDI1MzA3bDAsNy4yMzAyMTVsNy4yMzAyMTUsMGMwLjIz%0D%0ANDc2OSwwIDAuNDI1MzA3LDAuMTkwNTM3IDAuNDI1MzA3LDAuNDI1MzA3bDAsMy40MDI0NTRjMCww%0D%0ALjIzNDc2OSAtMC4xOTA1MzcsMC40MjUzMDcgLTAuNDI1MzA3LDAuNDI1MzA3eiIgY2xpcC1ydWxl%0D%0APSJldmVub2RkIi8+CiA8L2c+Cjwvc3ZnPg==" alt="Icon"/>
    <ul class="menu__list" id="list">   
      <li class="menu__item"><img class="menu__link icon" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGlk%0D%0APSJzdmdfMSIgZmlsbD0ibm9uZSIgZD0ibTAsMGw0OCwwbDAsNDhsLTQ4LDBsMCwtNDh6Ii8+CiAg%0D%0APHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18yIiBkPSJtMjQsNDIuN2wtMi45LC0yLjYzYy0x%0D%0AMC4zLC05LjM1IC0xNy4xLC0xNS41MiAtMTcuMSwtMjMuMDdjMCwtNi4xNyA0LjgzLC0xMSAxMSwt%0D%0AMTFjMy40OCwwIDYuODIsMS42MiA5LDQuMTdjMi4xOCwtMi41NSA1LjUyLC00LjE3IDksLTQuMTdj%0D%0ANi4xNywwIDExLDQuODMgMTEsMTFjMCw3LjU1IC02LjgsMTMuNzIgLTE3LjEsMjMuMDdsLTIuOSwy%0D%0ALjYzeiIvPgogPC9nPgo8L3N2Zz4=" alt="Icon"/></li>
      <li class="menu__item"><img class="menu__link icon" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGlk%0D%0APSJzdmdfMSIgZmlsbD0ibm9uZSIgZD0ibTAsMGw0OCwwbDAsNDhsLTQ4LDBsMCwtNDh6Ii8+CiAg%0D%0APHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18yIiBkPSJtMjQsNGMtMTEuMDUsMCAtMjAsOC45%0D%0ANSAtMjAsMjBzOC45NSwyMCAyMCwyMHMyMCwtOC45NSAyMCwtMjBzLTguOTUsLTIwIC0yMCwtMjB6%0D%0AbS00LDI5bDAsLTE4bDEyLDlsLTEyLDl6Ii8+CiA8L2c+Cjwvc3ZnPg==" alt="Icon"/></li>
      <li class="menu__item"><img class="menu__link icon" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAw%0D%0AL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5v%0D%0AbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0x%0D%0AIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIGZp%0D%0AbGw9IiNmZmZmZmYiIGlkPSJzdmdfMSIgZD0ibTI0LDhjLTQuNDIsMCAtOCwzLjU4IC04LDhjMCw0%0D%0ALjQxIDMuNTgsOCA4LDhzOCwtMy41OSA4LC04YzAsLTQuNDIgLTMuNTgsLTggLTgsLTh6bTAsMjBj%0D%0ALTUuMzMsMCAtMTYsMi42NyAtMTYsOGwwLDRsMzIsMGwwLC00YzAsLTUuMzMgLTEwLjY3LC04IC0x%0D%0ANiwtOHoiLz4KIDwvZz4KPC9zdmc+" alt="Icon"/></li>
    </ul>
  </nav>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script>
let trigger = document.querySelector("#trigger");
let list = document.querySelector("#list");
let mItem = document.querySelectorAll(".menu__item");

let showMenu = event => {

  trigger.classList.toggle("trigger-rotate");
  list.classList.toggle("show-list");

  for (var i = 0; i < mItem.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    mItem[i].classList.toggle("show-item");
  }window.CP.exitedLoop(0);
};

trigger.addEventListener("click", showMenu);
    </script>
</body>
</html>

5. By Narendra N Shetty

Made by Narendra N Shetty. JavaScript Mobile menu slider prototype. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
html, body {
  width: 100%;
  height: 100%;
}

/*Setting font and bg color*/
/* line 12, ../sass/_timer.scss */
body {
  background-color: #322830;
  font-family: 'Roboto', sans-serif;
}

.container {
  height: 100%;
}

.mobile-holder {
  width: 300px;
  height: 550px;
  margin: 50px auto;
  border: 2px solid #848484;
  border-radius: 7px;
  overflow: hidden;
  background-color: #445369;
}

.hamburger-container {
  background-color: #FD898A;
  width: 200px;
  height: 200px;
  position: relative;
  cursor: pointer;
  border-radius: 50%;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin-top: -115px;
  margin-left: -123px;
  z-index: 10;
}

.hamburger {
  width: 22px;
  position: absolute;
  left: 142px;
  border-top: 2px solid #fff;
  cursor: pointer;
  z-index: 1;
  top: 136px;
}

.hamburger:after {
  content: "";
  display: block;
  border-top: 2px solid #fff;
  margin-top: 4px;
}
.hamburger:before {
  content: "";
  display: block;
  border-top: 2px solid #fff;
  margin-top: 4px;
}

.plus {
  width: 20px;
  position: absolute;
  border-top: 3px solid #fff;
  cursor: pointer;
  z-index: 1;
  left: 86px;
  top: 165px;
}
.plus:after {
  content: "";
  display: block;
  border-top: 3px solid #fff;
  margin-top: -3px;
  transform: rotate(90deg);
}

.page-body {
  width: 100%;
  height: 100%;
  position: relative;
  top: -85px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transform-origin: 0 0;
}

.hamburger-container.open {
  transform: rotate(-50deg);
}

.page-body.open {
  transform: rotate(-30deg);
}

.row {
  height: 140px;
}
.first {
  background-color: #FDEECF;
}
.second {
  background-color: #FDD0BC;
}
.third {
  background-color: #EDB4B5;
}
.fourth {
  background-color: #CB86A0;
}
.fifth {
  background-color: #E6A6A8;
}
</style>
</head>
<body>
  <div class="container">
  	<div class="mobile-holder">
  		<div class="hamburger-container">
  			<div class="hamburger"></div>
  			<div class="plus"></div>
  		</div>
  		<div class="menu">
  		
	  	</div>
	  	<div class="page-body">
	  		<div class="row first"></div>
	  		<div class="row second"></div>
	  		<div class="row third"></div>
	  		<div class="row fourth"></div>
	  		<div class="row fifth"></div>
	  	</div>
  	</div>
  </div>
      <script>
var $ham = document.querySelector('.hamburger-container'),
$pageBody = document.querySelector('.page-body');
$ham.onclick = function () {
  if ($ham.classList.contains('open')) {
    $pageBody.classList.remove('open');
    $ham.classList.remove('open');
  } else {
    $pageBody.classList.add('open');
    $ham.classList.add('open');
  }
};
    </script>
</body>
</html>

6. By Ricardo Oliva Alonso

Made by Ricardo Oliva Alonso. Modern looking mobile menu with cool animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
<style>
:root{
    --blue: #008EFA;
    --pink: #FF207A;
    --bg: #EEEEEE;
    --white: #FEFEFE;
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: var(--bg);
	
	
}
.main{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 300px;
    height: 200px;
    position: relative;
}
.menu{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 300px;
    height: 100px;
    padding: 30px;

    border-radius: 5px;
    box-shadow: 0 0 5px 1px rgba(0,0,0,.05);
    background-color: var(--white);
}
.menu__trigger{
    position: absolute;
    top: 50px;
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
    background-color: var(--blue);
    border: 10px solid var(--bg);
    border-radius: 50%;
    padding: 20px;
    cursor: pointer;
    transition: .35s ease;
}
.menu__base{
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: .7;
}
.menu__item{
    position: absolute;
    width: 60px;
    height: 60px;
    top: 70px;
    padding: 20px;
    border-radius: 50%;


    background-color: var(--white);
    border: none;
    box-shadow: 0 0 5px 1px rgba(0,0,0,.05);
    z-index: -1000;
    opacity: 0;
}
.menu__item--0{ transition: .35s ease; left: calc(50% - 30px);}
.menu__item--1{ transition: .35s ease .1s; left: calc(50% - 30px);}
.menu__item--2{ transition: .35s ease .2s; right: calc(50% - 30px);}

.is-rotate {
    transform: rotateZ(225deg);
    background-color: var(--pink);
}
.item-0 { top: 20px; left: calc(50% - 110px); opacity: 1;}
.item-1 { top: -25px; left: calc(50% - 30px); opacity: 1;}
.item-2 { top: 20px; right: calc(50% - 110px); opacity: 1;}
</style>
</head>
<body>
  <div class="main">
    <div class="menu">
        <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxMnB4IiB2ZXJzaW9uPSIxLjEiIHZp%0D%0AZXdCb3g9IjAgMCAxOCAxMiIgd2lkdGg9IjE4cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8y%0D%0AMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0%0D%0AY2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUv%0D%0APjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iUGFn%0D%0AZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iIzAwMDAwMCIgaWQ9%0D%0AIkNvcmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04Ny4wMDAwMDAsIC0zNDIuMDAwMDAwKSI+PGcg%0D%0AaWQ9Im1lbnUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg3LjAwMDAwMCwgMzQyLjAwMDAwMCkiPjxw%0D%0AYXRoIGQ9Ik0wLDEyIEwxOCwxMiBMMTgsMTAgTDAsMTAgTDAsMTIgTDAsMTIgWiBNMCw3IEwxOCw3%0D%0AIEwxOCw1IEwwLDUgTDAsNyBMMCw3IFogTTAsMCBMMCwyIEwxOCwyIEwxOCwwIEwwLDAgTDAsMCBa%0D%0AIiBpZD0iU2hhcGUiLz48L2c+PC9nPjwvZz48L3N2Zz4=" class="menu__base">
        <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQg%0D%0AU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3Zn%0D%0AMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIGhlaWdodD0i%0D%0ANTEycHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3%0D%0AaWR0aD0iNTEycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9y%0D%0AZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxw%0D%0AYXRoIGQ9Ik00OTcuOTEzLDQ5Ny45MTNjLTE4Ljc4MiwxOC43ODItNDkuMjI1LDE4Ljc4Mi02OC4w%0D%0AMDgsMGwtODQuODYyLTg0Ljg2M2MtMzQuODg5LDIyLjM4Mi03Ni4xMywzNS43MTctMTIwLjY1OSwz%0D%0ANS43MTcgIEMxMDAuNDY5LDQ0OC43NjcsMCwzNDguMzEyLDAsMjI0LjM4M1MxMDAuNDY5LDAsMjI0%0D%0ALjM4NCwwYzEyMy45MzEsMCwyMjQuMzg0LDEwMC40NTIsMjI0LjM4NCwyMjQuMzgzICBjMCw0NC41%0D%0AMTQtMTMuMzUyLDg1Ljc3MS0zNS43MTgsMTIwLjY3Nmw4NC44NjMsODQuODYzQzUxNi42OTUsNDQ4%0D%0ALjcwNCw1MTYuNjk1LDQ3OS4xMzEsNDk3LjkxMyw0OTcuOTEzeiBNMjI0LjM4NCw2NC4xMDkgIGMt%0D%0AODguNTExLDAtMTYwLjI3NCw3MS43NDctMTYwLjI3NCwxNjAuMjczYzAsODguNTI2LDcxLjc2NCwx%0D%0ANjAuMjc0LDE2MC4yNzQsMTYwLjI3NGM4OC41MjUsMCwxNjAuMjczLTcxLjc0OCwxNjAuMjczLTE2%0D%0AMC4yNzQgIEMzODQuNjU3LDEzNS44NTYsMzEyLjkwOSw2NC4xMDksMjI0LjM4NCw2NC4xMDl6Ii8+%0D%0APC9zdmc+" class="menu__base">

        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIw%0D%0AMDAvc3ZnIj4KCiA8Zz4KICA8dGl0bGU+YmFja2dyb3VuZDwvdGl0bGU+CiAgPHJlY3QgZmlsbD0i%0D%0Abm9uZSIgaWQ9ImNhbnZhc19iYWNrZ3JvdW5kIiBoZWlnaHQ9IjQwMiIgd2lkdGg9IjU4MiIgeT0i%0D%0ALTEiIHg9Ii0xIi8+CiA8L2c+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPHBvbHln%0D%0Ab24gc3Ryb2tlPSIjZmZmZmZmIiBpZD0ic3ZnXzEiIHBvaW50cz0iODAuMiw1MS42IDUxLjQsNTEu%0D%0ANiA1MS40LDIyLjYgNDguOSwyMi42IDQ4LjksNTEuNiAxOS45LDUxLjYgMTkuOSw1NC4xIDQ4Ljks%0D%0ANTQuMSA0OC45LDgzLjEgICA1MS40LDgzLjEgNTEuNCw1NC4xIDgwLjQsNTQuMSA4MC40LDUxLjYg%0D%0AIiBmaWxsPSIjZmZmZmZmIi8+CiA8L2c+Cjwvc3ZnPg==" class="menu__trigger" id="btn">
        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIw%0D%0AMDAvc3ZnIj4KCiA8Zz4KICA8dGl0bGU+YmFja2dyb3VuZDwvdGl0bGU+CiAgPHJlY3QgZmlsbD0i%0D%0Abm9uZSIgaWQ9ImNhbnZhc19iYWNrZ3JvdW5kIiBoZWlnaHQ9IjQwMiIgd2lkdGg9IjU4MiIgeT0i%0D%0ALTEiIHg9Ii0xIi8+CiA8L2c+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPHJlY3Qg%0D%0AaWQ9InN2Z18xIiB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgZmlsbC1ydWxlPSJldmVub2RkIiBm%0D%0AaWxsPSJub25lIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KICA8cGF0aCBpZD0iWW91dHViZSIgZmls%0D%0AbC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNWM1YzVjIiBkPSJtMTI2LjcyLDM4LjIyNGMwLDAgLTEu%0D%0AMjUyLC04Ljg4MyAtNS4wODgsLTEyLjc5NGMtNC44NjgsLTUuMTM2IC0xMC4zMjQsLTUuMTYgLTEy%0D%0ALjgyNCwtNS40NThjLTE3LjkxMiwtMS4zMDUgLTQ0Ljc4LC0xLjMwNSAtNDQuNzgsLTEuMzA1bC0w%0D%0ALjA1NiwwYzAsMCAtMjYuODY4LDAgLTQ0Ljc4LDEuMzA1Yy0yLjUwNCwwLjI5OCAtNy45NTYsMC4z%0D%0AMjIgLTEyLjgyOCw1LjQ1OGMtMy44MzYsMy45MTIgLTUuMDg0LDEyLjc5NCAtNS4wODQsMTIuNzk0%0D%0Acy0xLjI4LDEwLjQzNCAtMS4yOCwyMC44NjNsMCw5Ljc4MWMwLDEwLjQzMyAxLjI4LDIwLjg2MyAx%0D%0ALjI4LDIwLjg2M3MxLjI0OCw4Ljg4MyA1LjA4NCwxMi43OTRjNC44NzIsNS4xMzYgMTEuMjY4LDQu%0D%0AOTc1IDE0LjExNiw1LjUxMWMxMC4yNCwwLjk5MSA0My41MiwxLjI5NyA0My41MiwxLjI5N3MyNi44%0D%0AOTYsLTAuMDQgNDQuODA4LC0xLjM0NWMyLjUsLTAuMzAyIDcuOTU2LC0wLjMyNiAxMi44MjQsLTUu%0D%0ANDYyYzMuODM2LC0zLjkxMiA1LjA4OCwtMTIuNzk0IDUuMDg4LC0xMi43OTRzMS4yOCwtMTAuNDMg%0D%0AMS4yOCwtMjAuODY0bDAsLTkuNzgxYzAsLTEwLjQyOSAtMS4yOCwtMjAuODYzIC0xLjI4LC0yMC44%0D%0ANjN6bS03NS45MzYsNDIuNDk2bC0wLjAwNCwtMzYuMjE5bDM0LjU4NCwxOC4xNzJsLTM0LjU4LDE4%0D%0ALjA0N3oiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgogPC9nPgo8L3N2Zz4=" class="menu__item menu__item--0">
        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYuNjkzIiBoZWlnaHQ9IjU2LjY5MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMu%0D%0Ab3JnLzIwMDAvc3ZnIj4KCiA8Zz4KICA8dGl0bGU+YmFja2dyb3VuZDwvdGl0bGU+CiAgPHJlY3Qg%0D%0AZmlsbD0ibm9uZSIgaWQ9ImNhbnZhc19iYWNrZ3JvdW5kIiBoZWlnaHQ9IjQwMiIgd2lkdGg9IjU4%0D%0AMiIgeT0iLTEiIHg9Ii0xIi8+CiA8L2c+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAg%0D%0APHBhdGggZmlsbD0iIzVjNWM1YyIgaWQ9InN2Z18xIiBkPSJtNTIuODM3LDE1LjA2NWMtMS44MTEs%0D%0AMC44MDUgLTMuNzYsMS4zNDggLTUuODA1LDEuNTkxYzIuMDg4LC0xLjI1IDMuNjg5LC0zLjIzIDQu%0D%0ANDQ0LC01LjU5MmMtMS45NTMsMS4xNTkgLTQuMTE1LDIgLTYuNDE4LDIuNDU0Yy0xLjg0MywtMS45%0D%0ANjQgLTQuNDcsLTMuMTkyIC03LjM3NywtMy4xOTJjLTUuNTgxLDAgLTEwLjEwNiw0LjUyNSAtMTAu%0D%0AMTA2LDEwLjEwN2MwLDAuNzkxIDAuMDg5LDEuNTYyIDAuMjYyLDIuMzAzYy04LjQsLTAuNDIyIC0x%0D%0ANS44NDgsLTQuNDQ1IC0yMC44MzMsLTEwLjU2Yy0wLjg3LDEuNDkyIC0xLjM2OCwzLjIyOCAtMS4z%0D%0ANjgsNS4wODJjMCwzLjUwNiAxLjc4NCw2LjYgNC40OTYsOC40MTJjLTEuNjU2LC0wLjA1MyAtMy4y%0D%0AMTUsLTAuNTA4IC00LjU3OCwtMS4yNjVjLTAuMDAxLDAuMDQyIC0wLjAwMSwwLjA4NSAtMC4wMDEs%0D%0AMC4xMjhjMCw0Ljg5NiAzLjQ4NCw4Ljk4IDguMTA4LDkuOTFjLTAuODQ4LDAuMjMgLTEuNzQxLDAu%0D%0AMzU0IC0yLjY2MywwLjM1NGMtMC42NTIsMCAtMS4yODUsLTAuMDYzIC0xLjkwMiwtMC4xODJjMS4y%0D%0AODcsNC4wMTUgNS4wMTksNi45MzggOS40NDEsNy4wMTljLTMuNDU5LDIuNzExIC03LjgxNiw0LjMy%0D%0ANyAtMTIuNTUyLDQuMzI3Yy0wLjgxNSwwIC0xLjYyLC0wLjA0OCAtMi40MTEsLTAuMTQyYzQuNDc0%0D%0ALDIuODY5IDkuNzg2LDQuNTQxIDE1LjQ5Myw0LjU0MWMxOC41OTEsMCAyOC43NTYsLTE1LjQgMjgu%0D%0ANzU2LC0yOC43NTZjMCwtMC40MzggLTAuMDA5LC0wLjg3NSAtMC4wMjgsLTEuMzA5YzEuOTc0LC0x%0D%0ALjQyMiAzLjY4OCwtMy4yMDMgNS4wNDIsLTUuMjN6Ii8+CiA8L2c+Cjwvc3ZnPg==" class="menu__item menu__item--1">
        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYuNjkzIiBoZWlnaHQ9IjU2LjY5MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMu%0D%0Ab3JnLzIwMDAvc3ZnIj4KCiA8Zz4KICA8dGl0bGU+YmFja2dyb3VuZDwvdGl0bGU+CiAgPHJlY3Qg%0D%0AZmlsbD0ibm9uZSIgaWQ9ImNhbnZhc19iYWNrZ3JvdW5kIiBoZWlnaHQ9IjQwMiIgd2lkdGg9IjU4%0D%0AMiIgeT0iLTEiIHg9Ii0xIi8+CiA8L2c+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAg%0D%0APHBhdGggZmlsbD0iIzVjNWM1YyIgaWQ9InN2Z18xIiBkPSJtNDAuNDMsMjEuNzM5bC03LjY0NSww%0D%0AbDAsLTUuMDE0YzAsLTEuODgzIDEuMjQ4LC0yLjMyMiAyLjEyNywtMi4zMjJjMC44NzcsMCA1LjM5%0D%0ANSwwIDUuMzk1LDBsMCwtOC4yNzhsLTcuNDMsLTAuMDI5Yy04LjI0OCwwIC0xMC4xMjUsNi4xNzQg%0D%0ALTEwLjEyNSwxMC4xMjVsMCw1LjUxOGwtNC43NywwbDAsOC41M2w0Ljc3LDBjMCwxMC45NDcgMCwy%0D%0ANC4xMzcgMCwyNC4xMzdsMTAuMDMzLDBjMCwwIDAsLTEzLjMyIDAsLTI0LjEzN2w2Ljc3LDBsMC44%0D%0ANzUsLTguNTN6Ii8+CiA8L2c+Cjwvc3ZnPg==" class="menu__item menu__item--2">


    </div>
</div>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script>
/*
Designed by: Nicholas.design
Original image: https://dribbble.com/shots/7160097-Add-Interaction
*/

const btn = document.querySelector("#btn");
const item = document.querySelectorAll(".menu__item");

let showCard = event => {
  btn.classList.toggle("is-rotate");
  for (var i = 0; i < item.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    item[i].classList.toggle(`item-${i}`);
  }window.CP.exitedLoop(0);
};

btn.addEventListener("click", showCard);
    </script>
</body>
</html>

7. By Vijaya Kumar Vulchi

Made by Vijaya Kumar Vulchi. Mobile menu widget. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHjx4wWw.ttf) format('truetype');
}
* {
  margin: 0;
  padding: 0;
}
*,
*:after,
*:before {
  box-sizing: border-box;
}
::-webkit-scrollbar {
  display: none;
}
ol,
ul {
  list-style: none;
}
a {
  color: #000;
  text-decoration: none;
}
html {
  line-height: 1.2;
}
body {
  background-color: #fff;
  color: #000;
  font-family: "Lato", arial, sans-serif;
  font-size: 16px;
}
.cusbody {
  background-color: #2c3e50;
  border: 0 solid #333;
  border-width: 50px 15px;
  border-radius: 12px;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.6);
  margin: 20px auto;
  max-width: 320px;
  height: 560px;
  overflow-x: hidden;
  position: relative;
}
.cusbody.act {
  overflow: hidden;
}
.cusbody.act .mainMenu a {
  opacity: 1;
  transform: translateX(0);
}
.cusbody.act .mainContainer {
  transform: translate(80%, 3%);
}
.mainContainer {
  min-height: 100%;
  transition: all 350ms;
  position: relative;
  z-index: 1;
}
header {
  background-color: #34495e;
  padding: 10px 15px;
  text-align: center;
  position: relative;
}
.logo {
  color: #fff;
  display: inline-block;
  font-size: 20px;
  letter-spacing: -4px;
  line-height: 30px;
  text-transform: uppercase;
  vertical-align: top;
}
/* menu button */
.menuBtn {
  height: 30px;
  width: 30px;
  position: absolute;
  left: 15px;
  top: 10px;
  z-index: 101;
}
.menuBtn > span {
  background-color: #fff;
  border-radius: 1px;
  height: 2px;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -1px 0 0 -15px;
  transition: height 100ms;
}
.menuBtn > span:after,
.menuBtn > span:before {
  content: '';
  background-color: #fff;
  border-radius: 1px;
  height: 2px;
  width: 100%;
  position: absolute;
  left: 50%;
  margin-left: -15px;
  transition: all 200ms;
}
.menuBtn > span:after {
  top: -7px;
}
.menuBtn > span:before {
  bottom: -7px;
}
.menuBtn.act > span {
  height: 0;
}
.menuBtn.act > span:after,
.menuBtn.act > span:before {
  background-color: #fff;
  top: 1px;
}
.menuBtn.act > span:after {
  transform: rotate(45deg);
}
.menuBtn.act > span:before {
  transform: rotate(-45deg);
}
/* main menu block */
.mainMenu {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.mainMenu ul {
  margin-top: 30px;
}
.mainMenu li {
  padding: 15px;
}
.mainMenu li.act {
  border-left: 3px solid #fff;
}
.mainMenu li i,
.mainMenu li a {
  font-size: 18px;
  display: inline-block;
  vertical-align: middle;
}
.mainMenu li i {
  margin-right: 15px;
}
.mainMenu a {
  color: #fff;
  opacity: 0;
  transition: all 750ms;
  transform: translateX(50%);
}
/* container */
.contentBlock {
  background-color: #fff;
  color: #000;
  padding: 15px;
}
.contentBlock p {
  font-size: 15px;
  line-height: 1.4;
  padding-top: 15px;
}
.contentBlock p:first-child {
  padding-top: 0;
}
/* media queries */
</style>
</head>
<body>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<div class="cusbody">
	<nav class="mainMenu">
		<ul>
			<li class="act">
				<a href="#"><i class="fa fa-adjust"></i><span>Intro</span></a>
			</li>
			<li>
				<a href="#"><i class="fa fa-server"></i><span>Services</span></a>
			</li>
			<li>
				<a href="#"><i class="fa fa-smile-o"></i><span>Team</span></a>
			</li>
			<li>
				<a href="#"><i class="fa fa-usd"></i><span>Pricing</span></a>
			</li>
			<li>
				<a href="#" class="suBtn"><i class="fa fa-hand-o-right"></i><span>Sing Up</span></a>
			</li>
			</ul>
	</nav>
	<div class="mainContainer">
		<header>
			<a href="#" class="menuBtn">
			<span class="lines"></span>
			</a>
			<a href="#" class="logo">logo</a>
		</header>
		<div class="contentBlock">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a aliquam felis, vel pulvinar felis. Nulla massa quam, elementum sed lacinia eu, faucibus at dui. Praesent urna ante, ultrices sed posuere eget, aliquam eu libero. Morbi vitae mi tellus. Ut vel libero euismod, posuere nisi id, rhoncus odio. Curabitur non magna eget dui ultricies commodo ac quis enim. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
			<p>Pellentesque sit amet aliquet mauris. Proin in elit varius, maximus erat sed, mattis odio. Ut quis consequat mauris. Nulla porttitor congue finibus. Integer quis urna nec dui tincidunt auctor in at diam. Proin imperdiet nisl nec dictum tempor. Integer in gravida eros, eu sodales lorem. Donec hendrerit massa gravida lacinia pharetra. In ac efficitur odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rhoncus ante vel enim tristique, ut bibendum ex molestie. Fusce congue vel turpis nec pulvinar. Nulla eu diam ex. Suspendisse tristique, orci et faucibus cursus, sem nulla hendrerit ex, quis varius nibh nisl a lectus.</p>
		</div>
		<footer>
		</footer>
	</div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script id="rendered-js" >
$(document).ready(function () {
  // menu click event
  $('.menuBtn').click(function () {
    $(this).toggleClass('act');
    $('.cusbody').toggleClass('act');
  });
});
    </script>
</body>
</html>

8. By Patrick Rice

Made by Patrick Rice. Mobile Dropdown Menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
<style>
* {
  margin: 0;
  padding: 0;
}
html body {
  margin: 0;
  padding: 0;
  min-width: 100%;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  height: 100%;
  max-height: 100%;
  background-color: #F4F4F4;
  font-family: 'Raleway', sans-serif;
}
a{
  text-decoration: none;
}
ul{
  padding: none;
}


/*============================== Hamburger Menu ============================*/
.container {
  display: block;
  position: fixed;
  text-align: center;
  margin: 0 auto;
  z-index: 1;
  padding: .5em;
  padding-left: 0em;

  width:100%;
  background-color: white;
}


/* Style Hamburger*/
.bar1, .bar3 {
  display: inline-block;
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}
.bar2{
  cursor: pointer;
  vertical-align: middle;
  height: 5px;
  font-size: 1.2em;
  margin-top: -14px;
  margin-bottom: 10px;
  transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
  transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change .bar2 {
  opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
  transform: rotate(45deg) translate(-8px, -8px) ;
}
/*========= Mobile Menu ==================*/
#mobile-menu{
  position: fixed;
  text-align: center;
  list-style: none;
  background: tomato;
  width: 100%;
  color: white;
  padding-top: 3.9em;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .0), 0 6px 6px rgba(0, 0, 0, 0.1);
}
#mobile-menu ul{
  margin: none !important;

}
#mobile-menu li{
  margin: none !important;
}
#mobile-menu li a{
  border-style: solid;
  border-top:  solid #FF836D;
  border-left-style: none;
  border-bottom: none;
  display:inline-block;
  padding-top: 1em;
  padding-bottom: 1em;
  width: 100%;
  color: white;
  transition: background-color 0.6s ease;

}
#mobile-menu li a:hover{
  transition: background-color 0.6s ease;
  background: #D9391C;

}
.menu-hidden{
  margin-top: -11em;
}
</style>
</head>
<body>
  <div class="container center " onclick="myFunction(this)" >
        <div class="bar1"></div>
        <p class="bar2">menu</p>
        <div class="bar3"></div>
</div>
      <ul id ="mobile-menu" class="menu-hidden">
        <li><a href="">item 1</a></li>
        <li><a href="">item 2</a></li>
        <li><a href="">item 3</a></li>
      </ul>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
      <script>
/*********************************************
 * Uses jQuery!
*********************************************/
function myFunction(x) {
  x.classList.toggle("change");
  $("#mobile-menu").toggleClass("menu-hidden", 800, "easeOutQuint");
};
    </script>
</body>
</html>

9. By Dylan Macnab

Made by Dylan Macnab. 2 Tier Mobile Navigation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
* {
  box-sizing: border-box;
}

html {
  font-size: 10px;
}

body {
  background: #eeeaea;
  color: #eee;
}

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

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

.title {
  text-align: center;
  font-size: 100px;
  color: rgba(0, 0, 0, 0.1);
}
@media (max-width: 800px) {
  .title {
    font-size: 50px;
  }
}

.mobileNav {
  position: relative;
  width: 400px;
  background: white;
  display: none;
}

.mobileNav-open {
  display: block;
}

.mobileNav_tier1 {
  width: 75px;
  font-size: 1rem;
  text-align: center;
  background: #E50B00;
  color: white;
}

.mobileNav_tier1_item {
  display: block;
  height: 75px;
  padding-top: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}

.mobileNav_tier2 {
  display: none;
  position: absolute;
  top: 0;
  left: 75px;
  font-size: 1.5rem;
  text-align: left;
}

.mobileNav_tier2 li {
  width: 325px;
}

.mobileNav_tier2_heading {
  display: block;
  width: 100%;
  margin: 0;
  padding: 20px;
  border-bottom: 1px solid #eee;
  font-size: inherit;
  font-weight: 400;
  color: #888;
}

.mobileNav_tier2_item {
  display: block;
  width: 100%;
  padding: 20px;
  border-bottom: 1px solid #eee;
  color: #E50B00;
  font-weight: bold;
}
.mobileNav_tier2_item:hover {
  background: #fafafa;
}

.mobileNav_tier2_item-search {
  display: block;
  width: 100%;
  padding: 20px 40px;
  color: #111;
  border: none;
  border-bottom: 1px solid #eee;
  background: #fafafa;
}

.mobileNav_tier1 li.active {
  background: #ff2419;
}
.mobileNav_tier1 li.active > a {
  color: white;
}
.mobileNav_tier1 li.active .mobileNav_tier2 {
  display: block;
}

.navbar {
  height: 75px;
  width: 100%;
  background: white;
  border-bottom: 1px solid #ccc;
}

.burger {
  padding: 25px 15px;
}

[class^=line-] {
  display: block;
  height: 5px;
  width: 40px;
  background: #E50B00;
  border-radius: 2px;
}

.line-1 {
  margin-bottom: 5px;
}

.line-2 {
  margin-bottom: 5px;
}

[class^=icon-] {
  margin: 0 auto;
  display: block;
}

/* .burger-closed {

}
 */
.burger-open .line-1 {
  -webkit-animation: burger-line1-open 0.2s forwards ease-in;
          animation: burger-line1-open 0.2s forwards ease-in;
}
.burger-open .line-2 {
  -webkit-animation: burger-line2-open 0.2s forwards ease-in;
          animation: burger-line2-open 0.2s forwards ease-in;
}
.burger-open .line-3 {
  -webkit-animation: burger-line3-open 0.2s forwards ease-in;
          animation: burger-line3-open 0.2s forwards ease-in;
}

@-webkit-keyframes burger-line1-open {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(10px) rotate(45deg);
  }
}

@keyframes burger-line1-open {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(10px) rotate(45deg);
  }
}
@-webkit-keyframes burger-line2-open {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes burger-line2-open {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes burger-line3-open {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-10px) rotate(-45deg);
  }
}
@keyframes burger-line3-open {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-10px) rotate(-45deg);
  }
}
</style>
</head>
<body>
  <div class="navbar">
  <div class="burger">
    <span class="line-1"></span>
    <span class="line-2"></span>
    <span class="line-3"></span>
  </div>
</div>

<nav class="mobileNav">
  <ul class="mobileNav_tier1">
    <li class="active">
      <a href="#" class="mobileNav_tier1_item">
        <span class="icon-sections">
          <svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="40px" height="35px" viewBox="0 0 75 20" xml:space="preserve">
	<g>
		<path fill="#FFFFFF" d="M55.496,31.991c0,1.627-1.002,2.947-2.239,2.947H31.614c-1.236,0-2.239-1.32-2.239-2.947l0,0
			c0-1.628,1.002-2.948,2.239-2.948h21.643C54.494,29.043,55.496,30.363,55.496,31.991L55.496,31.991z"/>
		<circle fill="#FFFFFF" cx="23.004" cy="31.991" r="3.5"/>
	</g>
	<g>
		<path fill="#FFFFFF" d="M55.496,21.324c0,1.627-1.002,2.947-2.239,2.947H31.614c-1.236,0-2.239-1.32-2.239-2.947l0,0
			c0-1.628,1.002-2.948,2.239-2.948h21.643C54.494,18.376,55.496,19.696,55.496,21.324L55.496,21.324z"/>
		<circle fill="#FFFFFF" cx="23.004" cy="21.324" r="3.5"/>
	</g>
	<g>
		<path fill="#FFFFFF" d="M55.496,10.657c0,1.627-1.002,2.947-2.239,2.947H31.614c-1.236,0-2.239-1.32-2.239-2.947l0,0
			c0-1.628,1.002-2.948,2.239-2.948h21.643C54.494,7.709,55.496,9.029,55.496,10.657L55.496,10.657z"/>
		<circle fill="#FFFFFF" cx="23.004" cy="10.657" r="3.5"/>
	</g>
</svg>
        </span>
        <span class="icon-text">Sections</span>
      </a>
      <ul class="mobileNav_tier2">
        <li>
          <h1 class="mobileNav_tier2_heading">Sections</h1>
        </li>
        <li><a href="#" class="mobileNav_tier2_item">News</a></li>
        <li><a href="#" class="mobileNav_tier2_item">Reviews</a></li>
        <li><a href="#" class="mobileNav_tier2_item">Streaming</a></li>
        <li><a href="#" class="mobileNav_tier2_item">Deep Dive</a></li>
      </ul>
    </li>
    <li>
      <a href="#" class="mobileNav_tier1_item">
        <span class="icon-locations">
          <svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="40px" height="35px" viewBox="0 0 16 16" xml:space="preserve">
<path fill="#FFFFFF" d="M8.032,1.194c-2.5,0-4.526,2.026-4.526,4.526s4.526,8.085,4.526,8.085s4.526-5.585,4.526-8.085
	S10.533,1.194,8.032,1.194z M8.032,8.182c-1.392,0-2.52-1.128-2.52-2.52s1.128-2.52,2.52-2.52s2.52,1.128,2.52,2.52
	S9.424,8.182,8.032,8.182z"/>
</svg>
        </span>
        <span class="icon-text">Locations</span>
      </a>
      <ul class="mobileNav_tier2">
        <li>
          <h1 class="mobileNav_tier2_heading">Locations</h1>
        </li>
        <li><a href="#" class="mobileNav_tier2_item">Portland, OR</a></li>
        <li><a href="#" class="mobileNav_tier2_item">Eugene, OR</a></li>
        <li><a href="#" class="mobileNav_tier2_item">Houston, TX</a></li>
        <li><a href="#" class="mobileNav_tier2_item">Los Angeles, CA</a></li>
      </ul>
    </li>
    <li>
      <a href="#" class="mobileNav_tier1_item">
        <span class="icon-partners">
          <svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="40px" height="35px" viewBox="29.782 0 16 16" xml:space="preserve">
<polygon fill="#FFFFFF" points="38.199,2.549 39.552,6.713 43.931,6.713 40.388,9.287 41.742,13.451 38.199,10.878 34.656,13.451 
	36.01,9.287 32.467,6.713 36.845,6.713 "/>
</svg>
        </span>
        <span class="icon-text">Partners</span>

      </a>
      <ul class="mobileNav_tier2">
        <li>
          <h1 class="mobileNav_tier2_heading">Partners</h1>
        </li>
        <li><a href="#" class="mobileNav_tier2_item">pitchfork.com</a></li>
        <li><a href="#" class="mobileNav_tier2_item">espn.com</a></li>
        <li><a href="#" class="mobileNav_tier2_item">grantland.com</a></li>
        <li><a href="#" class="mobileNav_tier2_item">blazersedge.com</a></li>
        <li><a href="" class="mobileNav_tier2_item">willametteweek.com</a></li>
      </ul>
    </li>
    <li>
      <a href="#" class="mobileNav_tier1_item">
        <span class="icon-contact">
          <svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="40px" height="35px" viewBox="51.282 0 16 16" xml:space="preserve">
<g>
	<path fill="#FFFFFF" d="M53.768,4.261c-0.018,0.08-0.049,0.155-0.049,0.24v6.997c0,0.178,0.049,0.338,0.122,0.488l2.763-5.702
		L53.768,4.261z"/>
	<path fill="#FFFFFF" d="M64.754,11.939c0.059-0.135,0.092-0.283,0.092-0.441V4.501c0-0.085-0.031-0.161-0.049-0.24l-2.834,2.022
		L64.754,11.939z"/>
	<path fill="#FFFFFF" d="M63.725,3.381H54.84c-0.197,0-0.374,0.065-0.535,0.155l4.978,3.551l4.979-3.551
		C64.099,3.446,63.923,3.381,63.725,3.381z"/>
	<path fill="#FFFFFF" d="M59.282,8.195l-1.933-1.379l-2.786,5.747c0.09,0.023,0.179,0.057,0.276,0.057h8.886
		c0.115,0,0.222-0.033,0.326-0.066l-2.833-5.74L59.282,8.195z"/>
</g>
</svg>
        </span>
        <span class="icon-text">Contact</span>

      </a>
      <ul class="mobileNav_tier2">
        <li><a href="#" class="mobileNav_tier2_item">Call</a></li>
        <li><a href="#" class="mobileNav_tier2_item">Email</a></li>
        <li><a href="#" class="mobileNav_tier2_item">Chat</a></li>
        <li><a href="#" class="mobileNav_tier2_item">FAQ</a></li>
      </ul>
    </li>
    <li>
      <a href="#" class="mobileNav_tier1_item">
        <span class="icon-search">
          <svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="40px" height="35px" viewBox="51.282 0 16 16" xml:space="preserve">
<path fill="#FFFFFF" d="M60.6,2.794c-2.15,0-3.893,1.743-3.893,3.893c0,0.848,0.277,1.627,0.738,2.267l-0.529,0.53L56.71,9.276
	c-0.035-0.035-0.088-0.042-0.115-0.013l-2.505,2.504c-0.029,0.029-0.023,0.081,0.013,0.115l1.291,1.292
	c0.035,0.035,0.088,0.041,0.116,0.014l2.504-2.506c0.028-0.027,0.022-0.079-0.013-0.116L57.733,10.3l0.522-0.522
	c0.653,0.497,1.46,0.803,2.345,0.803c2.15,0,3.894-1.743,3.894-3.893C64.494,4.538,62.751,2.794,60.6,2.794z M60.6,8.732
	c-1.129,0-2.044-0.916-2.044-2.045c0-1.128,0.915-2.044,2.044-2.044c1.13,0,2.044,0.916,2.044,2.044
	C62.644,7.817,61.73,8.732,60.6,8.732z"/>
</svg>
        </span>
        <span class="icon-text">Search</span>
      </a>
      <ul class="mobileNav_tier2">
        <li>
          <input class="mobileNav_tier2_item-search" placeholder="Search" />
        </li>
      </ul>
    </li>
  </ul>

</nav>

<h1 class="title">2 Tier Mobile Navigation</h1>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
// Show and Hide Mobile Menu
$('.burger').on('click', function () {
  $('.burger').toggleClass('burger-open');
  $('.mobileNav').toggleClass('mobileNav-open');
});

// Click event changes between different tier1 lists
$('.mobileNav_tier1 li').on('click', function () {
  $('.mobileNav_tier1 li').removeClass('active');
  $(this).toggleClass('active');
});
    </script>
</body>
</html>

10. By Kyle Lavery

Made by Kyle Lavery. Mobile Menu Concept. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1173082/reset.css'>
  
<style>
@import url("https://fonts.googleapis.com/css?family=Josefin+Sans:700");
:root {
  --dark: #333;
  --light: #fff;
  --neutral: #f6f6f6;
  --neutral-dark: #d1d1d1;
  --color: #5607d7;
  --color-light: #941ed2;
  --color-dark: #2719cd;
  --font-stack: "Josefin Sans", "Montserrat", "sans-serif";
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('data:image/svg+xml,%3Csvg width="300" height="300" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="%239C92AC" fill-opacity="0.1" fill-rule="evenodd"/%3E%3C/svg%3E') fixed;
  font-family: var(--font-stack);
}
body:before {
  content: "";
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, orange, orangered);
  border-radius: 50%;
  position: fixed;
  top: -50px;
  left: 10vw;
  z-index: -1;
}
body:after {
  content: "";
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, cyan, blue);
  border-radius: 50%;
  position: fixed;
  bottom: -50px;
  right: -5vw;
  z-index: -1;
}

.hero__wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
}
.hero__wrapper:before {
  content: "";
  width: 150px;
  height: 150px;
  background: linear-gradient(135deg, var(--color-light), var(--color-dark));
  border-radius: 50%;
  position: fixed;
  bottom: 50px;
  left: 10px;
  z-index: -1;
}
.hero__wrapper > * {
  margin: 15px;
}

.hero__header {
  flex: 0 1 1px;
  padding-right: 50px;
  color: var(--dark);
  font-size: 8vmax;
}

.hero__phone {
  width: 300px;
  height: 630px;
  background: var(--light);
  background-color: #ffffff;
  background: #fff url("https://codepenworldsfair.com/images/small-worlds-fair.png") center/250px no-repeat;
  border: 12px solid var(--dark);
  border-radius: 36px;
  position: relative;
  overflow: hidden;
}
.hero__phone:before {
  content: "";
  width: 175px;
  height: 25px;
  background: var(--dark);
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translatex(-50%);
  z-index: 1000;
}
.hero__phone:after {
  content: "";
  width: 100px;
  height: 5px;
  background: var(--dark);
  border-radius: 2px;
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translatex(-50%);
  z-index: 1000;
}

.menu__button {
  --x: -50%;
  --y: 0;
  --z: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to right, var(--color-light), var(--color-dark));
  padding: 10px 20px;
  border-radius: 28px;
  box-shadow: 0 2px 40px -10px var(--color);
  color: var(--light);
  font-size: 16px;
  white-space: nowrap;
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translate3d(var(--x), var(--y), var(--z));
  cursor: pointer;
  z-index: 105;
  transition: 0.15s cubic-bezier(0.33, 1, 0.53, 1);
}
.menu__button[hidden] {
  --y: 200%;
}
.menu__button div {
  display: flex;
  align-items: center;
  width: 12px;
  height: 12px;
  margin-right: 20px;
}
.menu__button div div {
  display: table;
  height: 1px;
  background: var(--light);
  box-shadow: 0 4px 0 var(--light), 0 -4px 0 var(--light);
}

.menu__overlay {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  z-index: 100;
}

.menu__body {
  --x: 0;
  --y: 0;
  --z: 0;
  display: block;
  width: 100%;
  background: var(--light);
  padding-bottom: 15px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0px -9px 50px -30px black;
  font-family: "Montserrat", sans-serif;
  position: absolute;
  bottom: 0;
  z-index: 105;
  transform: translate3d(var(--x), var(--y), var(--z));
  transition: 0.2s cubic-bezier(0.33, 1, 0.53, 1);
}
.menu__body[hidden] {
  --y: 150%;
}
.menu__body > *:not(:last-child) {
  border-bottom: 2px solid var(--neutral);
}

.menu__header {
  display: flex;
  justify-content: space-between;
  padding: 15px 20px;
}
.menu__header label div {
  width: 15px;
  height: 15px;
  border: 2px solid var(--dark);
  border-radius: 50%;
  position: relative;
  transform: rotate(5.5rad);
}
.menu__header label div:after {
  content: "";
  width: 2px;
  height: 10px;
  background: var(--dark);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.menu__header p {
  font-size: 18px;
  font-weight: bold;
  vertical-align: center;
  white-space: nowrap;
}
.menu__header h3 {
  font-weight: normal;
}
.menu__header button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  background: var(--neutral-dark);
  border-radius: 50%;
  cursor: pointer;
}
.menu__header button div {
  width: 15px;
  height: 3px;
  background: var(--light);
  position: relative;
  transform: rotate(5.5rad);
}
.menu__header button div:before {
  content: "";
  width: 3px;
  height: 15px;
  background: var(--light);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.menu__links {
  display: flex;
  padding: 10px 15px;
  font-weight: bold;
  overflow-x: auto;
}
.menu__links a {
  flex: 1 1 1px;
  padding: 10px 8px;
  color: var(--dark);
  text-decoration: none;
  white-space: nowrap;
}

.menu__contact {
  display: flex;
  padding: 8px;
}
.menu__contact svg {
  width: 100%;
  fill: var(--color);
}
.menu__contact a {
  flex: 1 1 30%;
  padding: 5px;
  margin: 5px;
  border-radius: 8px;
  background: var(--neutral);
  color: var(--color);
  text-align: center;
  font-size: 14px;
  font-weight: bold;
}
</style>
</head>
<body>
  <div class="hero__wrapper">
  <h1 class="hero__header">Mobile Menu Concept</h1>
  <div class="hero__phone">
    <button class="menu__button">
      <div>
        <div></div>
      </div>Quick Menu
    </button>
    <section class="menu__body" hidden="hidden">
      <div class="menu__header">
        <label> 
          <div></div>
        </label>
        <p>Quick Navigation</p>
        <button title="Close">
          <div></div>
        </button>
      </div>
      <div class="menu__links"><a href="#0">About Us</a><a href="#0">Services</a><a href="#0">Pricing</a><a href="#0">Blog</a><a href="#0">Contact</a></div>
      <div class="menu__contact"><a href="#0"> 
          <svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="24" viewbox="0 0 24 24" width="24">
            <path d="M0 0h24v24H0z" fill="none"></path>
            <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"></path>
          </svg><span>Call</span></a><a href="#0">
          <svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="24" viewbox="0 0 24 24" width="24">
            <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"></path>
            <path d="M0 0h24v24H0z" fill="none"></path>
          </svg><span>Email</span></a><a href="#0"> 
          <svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="24" viewbox="0 0 24 24" width="24">
            <path d="M21.71 11.29l-9-9c-.39-.39-1.02-.39-1.41 0l-9 9c-.39.39-.39 1.02 0 1.41l9 9c.39.39 1.02.39 1.41 0l9-9c.39-.38.39-1.01 0-1.41zM14 14.5V12h-4v3H8v-4c0-.55.45-1 1-1h5V7.5l3.5 3.5-3.5 3.5z"></path>
            <path d="M0 0h24v24H0z" fill="none"></path>
          </svg><span>Directions</span></a></div>
    </section>
    <div class="menu__overlay" hidden="hidden"></div>
  </div>
</div>
      <script>
const button = document.querySelector('.menu__button');
const menu = document.querySelector('.menu__body');
const close = document.querySelector('.menu__header button');
const overlay = document.querySelector('.menu__overlay');

function showMenu() {
  button.setAttribute('hidden', '');
  menu.removeAttribute('hidden');
  overlay.removeAttribute('hidden');
};

function hideMenu() {
  menu.setAttribute('hidden', '');
  overlay.setAttribute('hidden', '');
  button.removeAttribute('hidden');
};

button.addEventListener('click', showMenu);
close.addEventListener('click', hideMenu);
overlay.addEventListener('click', hideMenu);
//# sourceURL=pen.js
    </script>
</body>
</html>

11. By Gianmarco

Made by Gianmarco. Fancy Mobile Menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css'>
  
<style>
html, body {
  height: 100%;
  background: #313;
  font-family: lato, sans-serif;
  font-weight: 400;
  width: 100%;
  overflow: hidden;
}

.page {
  position: relative;
  height: 100%;
}

.control-menu {
  position: absolute;
  font-size: 24px;
  top: 10px;
  border-radius: 24px;
  right: 10px;
  color: white;
  z-index: 200;
  text-decoration: none;
}
.control-menu .fa {
  width: 32px;
  height: 32px;
  display: block;
  line-height: 32px;
  border-radius: 32px;
  text-align: center;
}
.control-menu.open .fa-bars {
  display: block;
}
.control-menu.open .fa-times {
  display: none;
}
.control-menu.close .fa-bars {
  display: none;
}
.control-menu.close .fa-times {
  display: block;
  background-color: #666;
}

.menu {
  width: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
  height: 100%;
}

.menu-wrapper {
  transition: all 0.3s ease;
  height: 100%;
}

.menu.closed {
  transform: translateX(100%) scale(0.6) !important;
  transform-origin: top right;
  transition: all 0.4s ease;
}

.element {
  display: block;
  height: 25%;
  width: 100%;
  font-size: 32px;
  text-align: center;
  color: white;
  display: table;
  text-decoration: none;
  transition: all 0.3s;
}
.element.one {
  background-color: #F1C40F;
}
.element.two {
  background-color: #E67E22;
}
.element.three {
  background-color: #E74C3C;
}
.element.four {
  background-color: #E30E82;
}
.element .element-wrapper {
  display: table-cell;
  vertical-align: middle;
  position: relative;
}
.element .icon {
  display: block;
}
.element .tag {
  display: block;
  padding-top: 10px;
  font-size: 28px;
  text-decoration: none;
  opacity: 0;
  height: 0;
  text-transform: uppercase;
  transform: translateY(200px);
  width: 100%;
}
.element .loading {
  height: 0;
  opacity: 0;
}

.element.element--closed {
  height: 0%;
  overflow: hidden;
  display: block;
}
.element.element--closed * {
  opacity: 0;
  transition: all 1s ease;
}

.element.element--active {
  font-size: 64px;
  transition: all 0.3s;
  height: 100%;
}
.element.element--active .tag {
  opacity: 1;
  height: 100px;
  transform: translateY(0);
  transition: all 0.2s 0.3s ease;
}
.element.element--active .tag small {
  font-size: 0.4em;
  display: block;
}
</style>
</head>
<body>
  <div class="page"><a class="control-menu close" href="#">
    <div class="fa fa-bars"></div>
    <div class="fa fa-times"></div></a>
  <div class="menu-wrapper">
    <div class="menu"><a class="element one" href="#">
        <div class="element-wrapper"><i class="icon fa fa-camera"></i><span class="tag">portfolio</span>
          <div class="loading">loading</div>
        </div></a><a class="element two" href="#">
        <div class="element-wrapper"><i class="icon fa fa-coffee"></i><span class="tag">coffee</span></div></a><a class="element three" href="#">
        <div class="element-wrapper"><i class="icon fa fa-heart"></i><span class="tag">love</span></div></a><a class="element four" href="#">
        <div class="element-wrapper"><i class="icon fa fa-dribbble"></i><span class="tag">dribbble<small>I wouldn't mind an invite</small></span></div></a></div>
  </div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

      <script>
var menu = function () {
  'use strict';

  function elementController() {

    $('.element').on('click', function () {

      var $this = $(this),
      height = $this.height(),
      i = $this.index();

      if ($this.hasClass('element--active')) {

        $this.
        removeClass('element--active').
        siblings().
        removeClass('element--closed');

      } else {

        $this.
        addClass('element--active').
        siblings().
        addClass('element--closed');

      }

      return false;

    });

  }

  function bindUI() {


    $('.control-menu').on('click', function () {

      $(this).
      toggleClass('open').
      toggleClass('close');

      $('.menu').
      toggleClass('closed');

    });

    elementController();

  }

  function init() {

    bindUI();

  }

  return {
    init: init };


}();

$(function () {

  menu.init();

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