12+ JavaScript Menu Examples

This post contains a total of 12+ Hand-Picked JavaScript Menu Examples with Source Code. All these Menus are made using JavaScript and Styled using CSS, there are different types of menus like Fullscreen, hamburger, navigational, mobile menu, offcanvas menu etc.

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

Related Posts

JavaScript Menu Examples

1. By Mathieu Lavoie

Made by Mathieu Lavoie. Responsive Apple style mobile menu with Dropdown animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://i.icomoon.io/public/temp/d3a8c9b913/UntitledProject/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
@import url(https://fonts.googleapis.com/css?family=Ek+Mukta:200);
body {
  margin: 0;
  line-height: 1.4;
  background: #E1E1E1;
}

.window {
  position: relative;
  display: block;
  width: 360px;
  height: 567px;
  margin: 100px auto 0;
  box-shadow: 0 0 65px 15px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  border-radius: 3px;
  background: #F1F1F1;
}
.window .header {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  transition: all 0.5s ease-out, background 1s ease-out;
  transition-delay: 0.2s;
  z-index: 1;
}
.window .header .burger-container {
  position: relative;
  display: inline-block;
  height: 50px;
  width: 50px;
  cursor: pointer;
  transform: rotate(0deg);
  transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.window .header .burger-container #burger {
  width: 18px;
  height: 8px;
  position: relative;
  display: block;
  margin: -4px auto 0;
  top: 50%;
}
.window .header .burger-container #burger .bar {
  width: 100%;
  height: 1px;
  display: block;
  position: relative;
  background: #FFF;
  transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  transition-delay: 0s;
}
.window .header .burger-container #burger .bar.topBar {
  transform: translateY(0px) rotate(0deg);
}
.window .header .burger-container #burger .bar.btmBar {
  transform: translateY(6px) rotate(0deg);
}
.window .header .icon {
  display: inline-block;
  position: absolute;
  height: 100%;
  line-height: 50px;
  width: 50px;
  height: 50px;
  text-align: center;
  color: #FFF;
  font-size: 22px;
  left: 50%;
  transform: translateX(-50%);
}
.window .header .icon.icon-bag {
  right: 0;
  top: 0;
  left: auto;
  transform: translateX(0px);
  transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  transition-delay: 0.65s;
}
.window .header ul.menu {
  position: relative;
  display: block;
  padding: 0px 48px 0;
  list-style: none;
}
.window .header ul.menu li.menu-item {
  border-bottom: 1px solid #333;
  margin-top: 5px;
  transform: scale(1.15) translateY(-30px);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.window .header ul.menu li.menu-item:nth-child(1) {
  transition-delay: 0.49s;
}
.window .header ul.menu li.menu-item:nth-child(2) {
  transition-delay: 0.42s;
}
.window .header ul.menu li.menu-item:nth-child(3) {
  transition-delay: 0.35s;
}
.window .header ul.menu li.menu-item:nth-child(4) {
  transition-delay: 0.28s;
}
.window .header ul.menu li.menu-item:nth-child(5) {
  transition-delay: 0.21s;
}
.window .header ul.menu li.menu-item:nth-child(6) {
  transition-delay: 0.14s;
}
.window .header ul.menu li.menu-item:nth-child(7) {
  transition-delay: 0.07s;
}
.window .header ul.menu li.menu-item a {
  display: block;
  position: relative;
  color: #FFF;
  font-family: "Ek Mukta", sans-serif;
  font-weight: 100;
  text-decoration: none;
  font-size: 22px;
  line-height: 2.35;
  font-weight: 200;
  width: 100%;
}
.window .header.menu-opened {
  height: 100%;
  background-color: #000;
  transition: all 0.3s ease-in, background 0.5s ease-in;
  transition-delay: 0.25s;
}
.window .header.menu-opened .burger-container {
  transform: rotate(90deg);
}
.window .header.menu-opened .burger-container #burger .bar {
  transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  transition-delay: 0.2s;
}
.window .header.menu-opened .burger-container #burger .bar.topBar {
  transform: translateY(4px) rotate(45deg);
}
.window .header.menu-opened .burger-container #burger .bar.btmBar {
  transform: translateY(3px) rotate(-45deg);
}
.window .header.menu-opened ul.menu li.menu-item {
  transform: scale(1) translateY(0px);
  opacity: 1;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(1) {
  transition-delay: 0.27s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(2) {
  transition-delay: 0.34s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(3) {
  transition-delay: 0.41s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(4) {
  transition-delay: 0.48s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(5) {
  transition-delay: 0.55s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(6) {
  transition-delay: 0.62s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(7) {
  transition-delay: 0.69s;
}
.window .header.menu-opened .icon.icon-bag {
  transform: translateX(75px);
  transition-delay: 0.3s;
}
.window .content {
  font-family: "Ek Mukta", sans-serif;
  padding: 67px 4% 0;
  text-align: justify;
  overflow: scroll;
  max-height: 100%;
}
.window .content::-webkit-scrollbar {
  display: none;
}
.window .content h2 {
  margin-bottom: 0px;
  letter-spacing: 1px;
}
.window .content img {
  width: 95%;
  position: relative;
  display: block;
  margin: 75px auto 75px;
}
.window .content img:nth-of-type(2) {
  margin: 75px auto;
}
@media (max-width: 600px) {
  .window {
    width: 100%;
    height: 100vh;
    margin: 0;
    border-radius: 0px;
  }
  .window .header {
    position: fixed;
  }
}
</style>
</head>
<body>
  <div class="window">
  <div class="header">
    <div class="burger-container">
      <div id="burger">
        <div class="bar topBar"></div>
        <div class="bar btmBar"></div>
      </div>
    </div>
    <div class="icon icon-apple"></div>
    <ul class="menu">
      <li class="menu-item"><a href="#">Mac</a></li>
      <li class="menu-item"><a href="#">iPad</a></li>
      <li class="menu-item"><a href="#">iPhone</a></li>
      <li class="menu-item"><a href="#">Watch</a></li>
      <li class="menu-item"><a href="#">TV</a></li>
      <li class="menu-item"><a href="#">Music</a></li>
      <li class="menu-item"><a href="#">Support</a></li>
    </ul>
    <div class="shop icon icon-bag"></div>
  </div>
  <div class="content"> <img src="https://images.apple.com/v/ipad-air-2/c/images/overview/performance_large.png" alt=""/>
    <h2>Thin. Light. Epic.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas recusandae ullam repellat, soluta, reprehenderit suscipit reiciendis minus ratione alias dolor eveniet rerum.</p>
  </div>
</div>
      <script>
(function () {
  var burger = document.querySelector('.burger-container'),
  header = document.querySelector('.header');

  burger.onclick = function () {
    header.classList.toggle('menu-opened');
  };
})();
    </script>
</body>
</html>

2. By Stas Melnikov

Made by Stas Melnikov. JavaScript Mobile menu with Color fill Fullscreen Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
.r-button{
  --uirButtonBackgroundColor: var(--rButtonBackgroundColor, transparent);
  --uirButtonPadding: var(--rButtonPadding, var(--rButtonPaddingTop, 0) var(--rButtonPaddingRight, 0) var(--rButtonPaddingBottom, 0) var(--rButtonPaddingLeft, 0));
  --uirButtonBorderWidth: var(--rButtonBorderWidth, 0);
  --uirButtonBorderStyle: var(--rButtonBorderStyle, solid);
  --uirButtonBorderColor: var(--rButtonBorderColor, currentColor);
  --uirButtonFontFamily: var(--rButtonFontFamily, inherit);
  --uirButtonFontSize: var(--rButtonFontSize,  inherit);
  --uirButtonColor: var(--rButtonColor);

  background-color: var(--uirButtonBackgroundColor);
  padding: var(--uirButtonPadding);

  border-width: var(--uirButtonBorderWidth);
  border-style: var(--uirButtonBorderStyle);
  border-color: var(--uirButtonBorderColor);

  cursor: pointer;

  font-family: var(--uirButtonFontFamily);
  font-size: var(--uirButtonFontSize);
}

.r-button::-moz-focus-inner,
.r-button[type="button"]::-moz-focus-inner,
.r-button[type="reset"]::-moz-focus-inner,
.r-button[type="submit"]::-moz-focus-inner {
  
  /* Remove the inner border and padding in Firefox. */
  
  border-style: none;
  padding: 0;
}

/* The component will reset browser's styles of link */

.r-link{
    --uirLinkDisplay: var(--rLinkDisplay, inline-flex);
    --uirLinkTextColor: var(--rLinkTextColor);
    --uirLinkTextDecoration: var(--rLinkTextDecoration, none);

    display: var(--uirLinkDisplay) !important;
    color: var(--uirLinkTextColor) !important;
    text-decoration: var(--uirLinkTextDecoration) !important;
}

/* The component will reset browser's styles of list */

.r-list{
    --uirListPaddingLeft: var(--rListPaddingLeft, 0);
    --uirListMarginTop: var(--rListMarginTop, 0);
    --uirListMarginBottom: var(--rListMarginBottom, 0);
    --uirListListStyle: var(--rListListStyle, none);

    padding-left: var(--uirListPaddingLeft) !important;
    margin-top: var(--uirListMarginTop) !important;
    margin-bottom: var(--uirListMarginBottom) !important;
    list-style: var(--uirListListStyle) !important;
}

/* Basic styles of the hamburger component */

.m-hamburger{  
  --uiHamburgerThickness: var(--hamburgerThickness, 4px);

  display: var(--hamburgerDisplay, inline-flex);
  width: var(--hamburgerWidth, 28px);
  height: var(--hamburgerHeight, 20px);

  position: relative;
}

.m-hamburger::before, 
.m-hamburger::after, 
.m-hamburger__label{
  width: 100%;
  height: var(--uiHamburgerThickness);
  border-radius: var(--hamburgerBorderRadius, 5px);
  background-color: var(--hamburgerBackgroundColor, currentColor);

  position: absolute;
  left: 0;
}

.m-hamburger::before, 
.m-hamburger::after{
  content:"";
}

.m-hamburger::before{
  top: 0;
}

.m-hamburger::after{
  bottom: 0;
}

.m-hamburger__label{
  /* The calculation of middle hamburger button line position */
  
  top: calc(50% - calc(var(--uiHamburgerThickness) / 2));
}

/* helper to hide elements that are available only for screen readers. */

.screen-reader{
  width: var(--screenReaderWidth, 1px) !important;
  height: var(--screenReaderHeight, 1px) !important;
  padding: var(--screenReaderPadding, 0) !important;
  border: var(--screenReaderBorder, none) !important;

  position: var(--screenReaderPosition, absolute) !important;
  clip: var(--screenReaderClip, rect(1px, 1px, 1px, 1px)) !important;
  overflow: var(--screenReaderOverflow, hidden) !important;
}

/*
=====
MENU STYLES
=====
*/

.menu{
  --uiMenuCircleSize: var(--menuCircleSize, 6.25rem);
  --uiMenuCircleOffset: var(--menuCircleOffset, 1rem);
  --uiMenuCircleHeight: calc(var(--uiMenuCircleSize) / 2);  
  --uiMenuCircleBackgroundColor: var(--menuCircleBackgroundColor, currentColor);

  --uiMenuHamburgerWidth: var(--menuHamburgerWidth, 1.75rem);
  --uiMenuHamburgerHeight: var(--menuHamburgerHeight, 1.25rem);
  
  --rButtonPaddingTop: calc(var(--uiMenuCircleHeight) - var(--uiMenuHamburgerHeight) - var(--uiMenuCircleOffset));
  
  --hamburgerWidth: var(--uiMenuHamburgerWidth);
  --hamburgerHeight: var(--uiMenuHamburgerHeight);
  --hamburgerBackgroundColor: var(--menuHamburgerBackgroundColor, #fff);

  width: 100%;
  
  display: flex;
  flex-direction: column;
  align-items: center;  

  position: fixed;
  bottom: 0;
  left: 0;
  z-index: var(--menuZindex, 9998);
}

.menu__nav{
  box-sizing: border-box;
  width: 100%;
  height: 0;

  transition: opacity .2s ease-out;
  opacity: 0;

  display: flex;
  align-items: flex-end;
  z-index: 2;
}

.menu__list{
  width: 100%;
  max-height: 100%;

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.menu__toggle{
  box-sizing: border-box;
  width: var(--uiMenuCircleSize);
  height: var(--uiMenuCircleHeight);
  flex: none;

  position: relative;
}

.menu__toggle::before{
  /*
  1. The font-size property is used to simplify calculations of the element's sizes and position
  2. The negative value for the bottom property need for hiding half of circle. 
  */

  content: "";
  width: 1em;
  height: 1em;
  font-size: var(--uiMenuCircleSize); /* 1 */

  background-color: var(--uiMenuCircleBackgroundColor);
  border-radius: 50%;

  position: absolute;
  bottom: -.5em; /* 2 */
  left: calc(50% - .5em);
  z-index: -1;

  will-change: width, height;
  transition: transform .25s cubic-bezier(0.04, -0.1, 0.29, 0.98),
              width .25s cubic-bezier(0.04, -0.1, 0.29, 0.98),
              height .25s cubic-bezier(0.04, -0.1, 0.29, 0.98);
}

/* styles of hamburger's animation */

.m-hamburger::before, 
.m-hamburger::after, 
.m-hamburger__label{
  transition-timing-function: ease;
  transition-duration: .15s;  
}

.m-hamburger::before, 
.m-hamburger::after{
  transition-property: transform;
}

.m-hamburger__label{
  transition-property: transform, opacity;
}

/*
=====
MENU STATES
=====
*/

.menu__toggle:focus{
  outline: var(--menuHaburgerOutlineOWidth, 2px) solid var(--menuHaburgerOutlineColor);
  outline-offset: var(--menuHaburgerOutlineOffset, 5px);
}

.menu_activated{
  height: 100%;
}

.menu_activated .menu__nav{
  flex-grow: 1;
  opacity: 1;

  will-change: opacity;
  transition-duration: .2s;
  transition-delay: .3s;
}

.menu_activated .menu__toggle::before{
  width: 100vmax;
  height: 100vmax;
  transform: translate3d(-50vh, -50vh, 0) scale(5);
  transition-duration: 1s;
}

.menu:not(.menu_activated) .menu__list{
  display: none;
}

.menu_activated .m-hamburger::before{
  top: 50%;
  transform: translate3d(0, -50%, 0) rotate(45deg);
}

.menu_activated .m-hamburger::after{
  transform: translate3d(0, -50%, 0) rotate(135deg);
  top: 50%;
}

.menu_activated .m-hamburger__label{
  transform: rotate(-45deg) translate3d(-.285em,-.3em, 0);
  opacity: 0;
}

/*
=====
SETTINGS
=====
*/
:root{
  --colorWhite: #fff;
  --colorMain: #4557bb;
  --menuCircleBackgroundColor: var(--colorMain);
  --menuHamburgerBackgroundColor: var(--colorWhite);
  --menuHaburgerOutlineColor: var(--colorMain);
}
.menu_activated{
  --menuHaburgerOutlineColor: var(--colorWhite);
}
body{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;  
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif;
  font-size: 1rem;
}

.page{
  max-width: 380px;
  padding: 1rem;
  margin: auto;  
  text-align: center;
}

.page__name{
  display: block;
  font-size: 2rem;
  font-weight: 700;
}

.page__hint{
  display: block;
  line-height: 1.45;
  margin-top: 1rem;
}

.menu__group{
  --rLinkTextColor: var(--colorWhite);

  padding: .5rem 2rem; 
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
}

.linktr{
  order: -1;
  padding: 1.75rem;
  text-align: center;
}

.linktr__goal{
  background-color: rgb(209, 246, 255);
  color: rgb(8, 49, 112);
  box-shadow: rgb(8 49 112 / 24%) 0px 2px 8px 0px;
  border-radius: 2rem;
  padding: .5rem 1.25rem;
}
@media (min-width: 1024px){
  
  .linktr{
    position: absolute; 
    right: 1rem; 
    bottom: 1rem;
  }
}
</style>
</head>
<body>
  <div class="page">
  <span class="page__name">Mobile Menu Animation</span>
  <span class="page__hint">
    Push the button below to see the animation
  </span>
</div>
<div class="menu">
  <nav class="menu__nav">
    <ul class="menu__list r-list">
      <li class="menu__group">
        <a href="#0" class="menu__link r-link">Home</a>
      </li>
      <li class="menu__group">
        <a href="#0" class="menu__link r-link">About me</a>
      </li>
      <li class="menu__group">
        <a href="#0" class="menu__link r-link">Services</a>
      </li>
      <li class="menu__group">
        <a href="#0" class="menu__link r-link">Portfolio</a>
      </li>
      <li class="menu__group">
        <a href="#0" class="menu__link r-link">Blog</a>
      </li>
      <li class="menu__group">
        <a href="#0" class="menu__link r-link">Contacts</a>
      </li>
    </ul>
  </nav>
  <button class="menu__toggle r-button" type="button">
    <span class="menu__hamburger m-hamburger">
      <span class="m-hamburger__label">
        <span class="menu__toggle-hint screen-reader">Open menu</span>
      </span>
    </span>
  </button>
</div>
<div class="linktr">
  <a href="https://linktr.ee/melnik909" target="_blank" class="linktr__goal r-link">Get more things from me πŸ’ͺπŸ’ͺπŸ’ͺ</a>
</div>
      <script>
(function () {
  'use strict';
  class Menu {
    constructor(settings) {
      this.menuRootNode = settings.menuRootNode;
      this.isOpened = false;
    }
    changeMenuState(menuState) {
      return this.isOpened = !menuState;
    }
    changeToggleHint(toggleHint, toggleNode) {
      toggleNode.textContent = toggleHint;
      return toggleHint;
    }}
  const menuClassesNames = {
    rootClass: 'menu',
    activeClass: 'menu_activated',
    toggleClass: 'menu__toggle',
    toggleHintClass: 'menu__toggle-hint' };
  const jsMenuNode = document.querySelector(`.${menuClassesNames.rootClass}`);
  const demoMenu = new Menu({
    menuRootNode: jsMenuNode });

  function getCurrentToggleHint(currentMenuState) {
    return currentMenuState !== true ? 'Open menu' : 'Close menu';
  }

  function toggleMenu(event) {

    let currentMenuState = demoMenu.changeMenuState(demoMenu.isOpened);
    let toggleHint = getCurrentToggleHint(currentMenuState);

    demoMenu.changeToggleHint(
    toggleHint,
    demoMenu.menuRootNode.querySelector(`.${menuClassesNames.toggleHintClass}`));

    demoMenu.menuRootNode.classList.toggle(`${menuClassesNames.activeClass}`);

    return currentMenuState;
  }

  jsMenuNode.querySelector(`.${menuClassesNames.toggleClass}`).addEventListener('click', toggleMenu);
})();
    </script>
</body>
</html>

3. By StΓ©phanie Walter

Made by StΓ©phanie Walter. A multilevel Responsive Menu with Hover and Dropdown Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<meta name="viewport" content="initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Economica' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
body,
html {
  height: 100% ;
  /* correct bug for chrome display on codepen ? */
}
/* colors mixins and all the good stuff */
nav {
  display: block;
}
.right {
  float: right;
  margin-left: 1em;
}
/* icons */
@font-face {
  font-family: 'icomoon';
  src: url('https://dl.dropbox.com/u/26865764/icomoon.eot');
  src: url('https://dl.dropbox.com/u/26865764/icomoon.eot?#iefix') format('embedded-opentype'), url('https://dl.dropbox.com/u/26865764/icomoon.dev.svg#icomoon') format('svg'), url('https://dl.dropbox.com/u/26865764/icomoon.woff') format('woff'), url('https://dl.dropbox.com/u/26865764/icomoon.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
.ico-heart:before,
.ico-letter:before,
.ico-file:before,
.ico-real:before,
.ico-pen:before,
.ico-user:before,
.ico-rocket:before,
.ico-arrow-right:before,
.ico-arrow-left:before,
.ico-arrow-left-2:before,
.ico-arrow-right-2:before,
.ico-caret-down:before,
.ico-caret-up:before,
.ico-caret-left:before,
.ico-caret-right:before,
.ico-facebook:before,
.ico-twitter:before,
.ico-google-plus:before {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.ico-caret-down:before {
  content: "\f0d7";
}
.ico-caret-up:before {
  content: "\f0d8";
}
/* ----------------------------- */
/* == Menu */
/* ----------------------------- */
.menu-wrapper {
  position: relative;
  z-index: 10;
  font-family: 'Economica', sans-serif;
  font-size: 1.857em;
  text-transform: uppercase;
  padding-top: 2px;
  padding-bottom: 2px;
  background: #b92120;
  /* the hidden link for RWD nav */
  /* the rest of the menu lvl 1 */
  /* current links */
  /* submenu ! */
  /* unhide the 2nd level */
}
.menu-wrapper .menu {
  margin: 0;
  padding-left: 0;
  list-style: none;
  text-align: center;
}
.menu-wrapper .menu > li {
  position: relative;
  padding: 0.7em 0;
  display: inline-block;
}
.menu-wrapper ul.menu,
.menu-wrapper a.menu-link {
  border-top: 1px dashed #dd4949;
  border-bottom: 1px dashed #dd4949;
}
.menu-wrapper a.menu-link {
  display: none;
  padding: 0.7em 0;
  background: #b92120;
}
.menu-wrapper a {
  display: block;
  position: relative;
  padding: 0 0.5em;
  margin: 0 0.2em;
  line-height: 1.3em;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.menu-wrapper a:hover {
  border-bottom: 1px solid rgba(255, 255, 255, 0.9);
  transition: all 0.5s;
}
.menu-wrapper .menu > .current-menu-item > a,
.menu-wrapper .menu > .current-menu-ancestor > a {
  position: relative;
  z-index: 12;
  background: #f5d4d4;
  color: #b92120;
  border-bottom: 1px solid transparent;
}
.menu-wrapper .menu > .current-menu-item > a:hover,
.menu-wrapper .menu > .current-menu-ancestor > a:hover {
  background: #fffdfd;
}
.menu-wrapper .menu > .current-menu-item > a:hover:after,
.menu-wrapper .menu > .current-menu-ancestor > a:hover:after {
  border-top-color: #fffdfd;
}
.menu-wrapper .menu > .current-menu-item > a:after,
.menu-wrapper .menu > .current-menu-ancestor > a:after {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #f5d4d4;
  border-width: 5px;
  left: 50%;
  margin-left: -5px;
}
.menu-wrapper li + li a:before {
  content: "*";
  position: absolute;
  left: -0.5em;
  top: 0.2em;
  color: #ffffff;
  opacity: 0.8;
  font-family: Arial, Verdana, sans-serif;
}
.menu-wrapper .sub-menu {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  margin: 18px 0 0 -0.7em;
  padding: 3px 0 0 0;
  position: absolute;
  max-height: 0em;
  overflow: hidden;
  list-style: none outside none;
  text-align: left;
  text-transform: none;
}
.menu-wrapper .sub-menu li {
  display: block;
  background: #9b1c1b;
  margin-left: 0.7em;
  margin-right: 0.7em;
}
.menu-wrapper .sub-menu a {
  margin: 0;
  white-space: nowrap;
  line-height: 1.8em;
  border: none;
}
.menu-wrapper .sub-menu a:hover {
  background: #781515;
}
.menu-wrapper .sub-menu li:last-child {
  padding-bottom: 0.26em;
}
.menu-wrapper .sub-menu li:last-child a {
  border-bottom: 1px dashed #dd4949;
}
.menu-wrapper li:hover .sub-menu {
  max-height: 30em;
  transition: max-height 0.5s;
}
/* Responsive Menu */
@media screen and (max-width: 768px) {
  .js .menu-wrapper nav[role=navigation] {
    overflow: hidden;
    max-height: 0em;
  }
  .js .menu-wrapper nav[role=navigation].active {
    max-height: 30em;
    transition: max-height 0.5s ease-out;
  }
  .menu-wrapper {
    /* unhide the 2nd level */
    /* styling the toggle menu */
    /* arrow to indicate that we have subnav*/
  }
  .menu-wrapper a.menu-link {
    display: block;
    width: auto;
    padding-right: 15px;
    padding-left: 10px;
    border: none;
    margin: 0;
  }
  .menu-wrapper a.menu-link:hover {
    background: #9b1c1b;
  }
  .menu-wrapper a.menu-link.active .ico-caret-down:before {
    content: "\f0d8";
  }
  .menu-wrapper .menu .menu {
    padding-bottom: 5px;
  }
  .menu-wrapper .menu li {
    display: block;
    border: 1px solid pink;
    border: none;
  }
  .menu-wrapper .menu > li {
    padding: 0px;
    border: none;
  }
  .menu-wrapper .menu > li + li {
    border-top: 1px dashed #dd4949;
  }
  .menu-wrapper .menu a {
    padding: 0.5em 0;
    margin: 0px;
    border: none;
  }
  .menu-wrapper .menu a:hover {
    background: #9b1c1b;
  }
  .menu-wrapper .menu .rightalign {
    float: none;
  }
  .menu-wrapper li + li a:before {
    content: "";
  }
  .menu-wrapper li:hover .sub-menu {
    max-height: 0em;
    transition: none;
  }
  .menu-wrapper .sub-menu {
    background: none;
    margin-left: 0px;
    margin-top: 1px;
    display: block;
    width: 100%;
  }
  .menu-wrapper .sub-menu li,
  .menu-wrapper .sub-menu li a {
    margin: 0;
    display: block;
    width: 100%;
  }
  .menu-wrapper .sub-menu a {
    padding-left: 0.8em;
  }
  .menu-wrapper .sub-menu a:hover {
    background: #781515;
  }
  .menu-wrapper .sub-menu li {
    border-bottom: 1px dashed #dd4949;
  }
  .menu-wrapper .sub-menu li:last-child {
    padding: 0;
  }
  .menu-wrapper .sub-menu li:last-child a {
    border: none;
  }
  .menu-wrapper .menu .has-subnav {
    position: relative;
  }
  .menu-wrapper li .sub-menu.active {
    max-height: 30em;
    overflow: visible;
    position: relative;
    z-index: 9;
    transition: max-height 0.5s ease-out;
  }
  .menu-wrapper .toggle-link {
    height: 67px;
    width: 60px;
    display: block;
    position: absolute;
    right: 0px;
    z-index: 200;
    font-size: 0em;
    cursor: pointer;
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
  }
  .menu-wrapper .toggle-link:hover {
    transition: all 0.2s;
    background: #cf2524;
  }
  .menu-wrapper .menu .has-subnav > .toggle-link:after {
    content: "\f0d7";
    position: absolute;
    width: 50px;
    top: 50%;
    margin-top: -15px;
    bottom: 50%;
    right: 4px;
    font-size: 28px;
    color: #fff;
  }
  .menu-wrapper .menu .has-subnav > .toggle-link.active:after {
    content: "\f0d8";
    margin-top: -18px;
  }
}
.content {
  max-width: 950px;
  min-height: 500px;
  margin: 30px auto;
}
</style>
</head>
<body>
  <div class="menu-wrapper">

	<a href="#menu" class="menu-link">	Menu<span class="ico-caret-down right" aria-hidden="true"></span>
	</a>
	<nav id="menu" role="navigation">
		<div class="menu">
			<ul  class="menu">
				<li>
					<a href="#">Team</a>
				</li>
				<li  class=" current-menu-item">
					<a href="#">News</a>
				</li>
				<li  class="has-subnav">
					<a href="#">Our services</a>
					<ul class="sub-menu">
						<li>
							<a href="#">Webdesign</a>
						</li>
						<li>
							<a href="#">Graphic identity</a>
						</li>
						<li>
							<a href="#">Copywriting</a>
						</li>
						<li>
							<a href="#">SEO & a longer menu item</a>
						</li>
						<li>
							<a href="#">Social networking</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">Our Work</a>
				</li>
				<li>
					<a href="#">Contact us</a>
				</li>
			</ul>
		</div>
	</nav>
</div>
<div class="content">
  <p>Text</p>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(document).ready(function () {


  /* the Responsive menu script */
  $('body').addClass('js');
  var $menu = $('#menu'),
  $menulink = $('.menu-link'),
  $menuTrigger = $('.has-subnav > a');

  $menulink.click(function (e) {
    e.preventDefault();
    $menulink.toggleClass('active');
    $menu.toggleClass('active');
  });

  var add_toggle_links = function () {
    if ($('.menu-link').is(":visible")) {
      if ($(".toggle-link").length > 0) {
      } else
      {
        $('.has-subnav > a').before('<span class="toggle-link"> Open submenu </span>');
        $('.toggle-link').click(function (e) {
          var $this = $(this);
          $this.toggleClass('active').siblings('ul').toggleClass('active');
        });
      }
    } else
    {
      $('.toggle-link').empty();
    }
  };
  add_toggle_links();
  $(window).bind("resize", add_toggle_links);

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

4. By James Bosworth

Made by James Bosworth. Cool Fullscreen Menu made with JavaScript that has Split text animation on hover. 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/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/183516/gilroy-webfont.css'> 
<style>
body {
  font-family: "Gilroy ExtraBold", system-ui, sans-serif;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-font-kerning: normal;
  -webkit-text-size-adjust: 100%;
}

html,
body {
  width: 100vw;
  height: 100vh;
}

body {
  background: linear-gradient(45deg, #02001F, #1F1B4E);
  transform-style: preserve-3d;
  transform: perspective(60rem);
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Menu-list {
  font-size: 4.25rem;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: rotateX(-10deg) rotateY(20deg);
}

.Menu-list-item {
  position: relative;
  color: transparent;
  cursor: pointer;
}
.Menu-list-item::before {
  content: "";
  display: block;
  position: absolute;
  top: 49%;
  left: -10%;
  right: -10%;
  height: 4px;
  border-radius: 4px;
  margin-top: -2px;
  background: #FF2C75;
  transform: scale(0);
  transition: transform 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98);
  z-index: 1;
}

.Mask {
  display: block;
  position: absolute;
  overflow: hidden;
  color: #FF2C75;
  top: 0;
  height: 49%;
  transition: all 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98);
}
.Mask span {
  display: block;
}

.Mask + .Mask {
  top: 48.9%;
  height: 51.1%;
}
.Mask + .Mask span {
  transform: translateY(-49%);
}

.Menu-list-item:hover .Mask,
.Menu-list-item:active .Mask {
  color: #FFF;
  transform: skewX(12deg) translateX(5px);
}
.Menu-list-item:hover .Mask + .Mask,
.Menu-list-item:active .Mask + .Mask {
  transform: skewX(12deg) translateX(-5px);
}
.Menu-list-item:hover::before,
.Menu-list-item:active::before {
  transform: scale(1);
}
</style>
</head>
<body>
  <!-- @NOTE: the onclicks are used for touch devices since I'm lazy and didnt use <a> tags -->
<div class="Menu">
  <ul class="Menu-list" data-offset="10">
    <li class="Menu-list-item" data-offset="20" onclick>
      Home
      <span class="Mask"><span>Home</span></span>
      <span class="Mask"><span>Home</span></span>
    </li>
    <li class="Menu-list-item" data-offset="16" onclick>
      About
      <span class="Mask"><span>About</span></span>
      <span class="Mask"><span>About</span></span>
    </li>
    <li class="Menu-list-item" data-offset="12" onclick>
      Work
      <span class="Mask"><span>Work</span></span>
      <span class="Mask"><span>Work</span></span>
    </li>
    <li class="Menu-list-item" data-offset="8" onclick>
      Contact
      <span class="Mask"><span>Contact</span></span>
      <span class="Mask"><span>Contact</span></span>
    </li>
  </ul>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
      <script>
var $menu = $('.Menu-list'),
$item = $('.Menu-list-item'),
w = $(window).width(), //window width
h = $(window).height(); //window height

$(window).on('mousemove', function (e) {
  var offsetX = 0.5 - e.pageX / w, //cursor position X
  offsetY = 0.5 - e.pageY / h, //cursor position Y
  dy = e.pageY - h / 2, //@h/2 = center of poster
  dx = e.pageX - w / 2, //@w/2 = center of poster
  theta = Math.atan2(dy, dx), //angle between cursor and center of poster in RAD
  angle = theta * 180 / Math.PI - 90, //convert rad in degrees
  offsetPoster = $menu.data('offset'),
  transformPoster = 'translate3d(0, ' + -offsetX * offsetPoster + 'px, 0) rotateX(' + -offsetY * offsetPoster + 'deg) rotateY(' + offsetX * (offsetPoster * 2) + 'deg)'; //poster transform

  //get angle between 0-360
  if (angle < 0) {
    angle = angle + 360;
  }

  //poster transform
  $menu.css('transform', transformPoster);

  //parallax for each layer
  $item.each(function () {
    var $this = $(this),
    offsetLayer = $this.data('offset') || 0,
    transformLayer = 'translate3d(' + offsetX * offsetLayer + 'px, ' + offsetY * offsetLayer + 'px, 20px)';

    $this.css('transform', transformLayer);
  });
});
    </script>
</body>
</html>

5. By HΓ₯vard Brynjulfsen

Made by HΓ₯vard Brynjulfsen. Context Menu with Feather Icons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected];400;500;600;700;800;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
*,
*:after,
*:before {
  box-sizing: border-box;
}

:root {
  --color-bg-primary: #d0d6df;
  --color-bg-primary-offset: #f1f3f7;
  --color-bg-secondary: #fff;
  --color-text-primary: #3a3c42;
  --color-text-primary-offset: #898c94;
  --color-orange: #dc9960;
  --color-green: #1eb8b1;
  --color-purple: #657cc4;
  --color-black: var(--color-text-primary);
  --color-red: #d92027;
}

body {
  font-family: "Inter", sans-serif;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

.menu {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-secondary);
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(64, 64, 64, 0.15);
}

.menu-list {
  margin: 0;
  display: block;
  width: 100%;
  padding: 8px;
}
.menu-list + .menu-list {
  border-top: 1px solid #ddd;
}

.menu-sub-list {
  display: none;
  padding: 8px;
  background-color: var(--color-bg-secondary);
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(64, 64, 64, 0.15);
  position: absolute;
  left: 100%;
  right: 0;
  z-index: 100;
  width: 100%;
  top: 0;
  flex-direction: column;
}
.menu-sub-list:hover {
  display: flex;
}

.menu-item {
  position: relative;
}

.menu-button {
  font: inherit;
  border: 0;
  padding: 8px 8px;
  padding-right: 36px;
  width: 100%;
  border-radius: 8px;
  text-align: left;
  display: flex;
  align-items: center;
  position: relative;
  background-color: var(--color-bg-secondary);
}
.menu-button:hover {
  background-color: var(--color-bg-primary-offset);
}
.menu-button:hover + .menu-sub-list {
  display: flex;
}
.menu-button:hover svg {
  stroke: var(--color-text-primary);
}
.menu-button svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  stroke: var(--color-text-primary-offset);
}
.menu-button svg:nth-of-type(2) {
  margin-right: 0;
  position: absolute;
  right: 8px;
}
.menu-button--delete:hover {
  color: var(--color-red);
}
.menu-button--delete:hover svg:first-of-type {
  stroke: var(--color-red);
}
.menu-button--orange svg:first-of-type {
  stroke: var(--color-orange);
}
.menu-button--green svg:first-of-type {
  stroke: var(--color-green);
}
.menu-button--purple svg:first-of-type {
  stroke: var(--color-purple);
}
.menu-button--black svg:first-of-type {
  stroke: var(--color-black);
}
.menu-button--checked svg:nth-of-type(2) {
  stroke: var(--color-purple);
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
</head>
<body>
  <div class="container">
  <!-- code here -->
  <div class="menu">
    <ul class="menu-list">
      <li class="menu-item"><button class="menu-button"><i data-feather="corner-up-right"></i>Share</button></li>
      <li class="menu-item"><button class="menu-button"><i data-feather="edit-2"></i>Rename</button></li>
    </ul>
    <ul class="menu-list">
      <li class="menu-item"><button class="menu-button menu-button--black"><i data-feather="circle"></i>No status<i data-feather="chevron-right"></i></button>
      <ul class="menu-sub-list">
        <li class="menu-item"><button class="menu-button menu-button--orange"><i data-feather="square"></i>Needs review</button></li>
                <li class="menu-item"><button class="menu-button menu-button--purple"><i data-feather="octagon"></i>In progress</button></li>
                <li class="menu-item"><button class="menu-button menu-button--green"><i data-feather="triangle"></i>Approved</button></li>
                <li class="menu-item"><button class="menu-button menu-button--black menu-button--checked"><i data-feather="circle"></i>No status<i data-feather="check"></i></button></li>
      </ul>
      </li>
      <li class="menu-item"><button class="menu-button"><i data-feather="link"></i>Copy Link Address</button></li>
      <li class="menu-item"><button class="menu-button"><i data-feather="folder-plus"></i>Move to</button></li>
      <li class="menu-item"><button class="menu-button"><i data-feather="copy"></i>Copy to</button></li>
      <li class="menu-item"><button class="menu-button"><i data-feather="lock"></i>Make Private</button></li>
      <li class="menu-item"><button class="menu-button"><i data-feather="download"></i>Download</button></li>
    </ul>
    <ul class="menu-list">
      <li class="menu-item"><button class="menu-button menu-button--delete"><i data-feather="trash-2"></i>Delete</button></li>
    </ul>
  </div>
</div>
  <script src='https://unpkg.com/feather-icons'></script>
      <script>
feather.replace();
    </script>
</body>
</html>

6. By Mark Murray

Made by Mark Murray. Offcanvas Menu with Dropdown Animation. 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://markmurray.co/codepen/customstyle.css);
@import url(https://fonts.googleapis.com/css?family=Raleway:100);
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  background: #111;
  height: 100%;
  font-family: Raleway, sans-serif;
}

.container {
  background: #eff0f1;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  -moz-transition: all 0.3s ease 0.6s;
  -o-transition: all 0.3s ease 0.6s;
  -webkit-transition: all 0.3s ease;
  -webkit-transition-delay: 0.6s;
  transition: all 0.3s ease 0.6s;
  z-index: 10;
  padding: 2em;
  position: relative;
}

.container.nav-open {
  margin-top: 8em;
  width: 90%;
  transition: all 0.3s ease;
}

/*
  menu icon css3
*/
.menu-icon {
  position: relative;
  display: block;
  width: 2.5em;
  height: 2.5em;
  cursor: pointer;
}
.menu-icon:hover span {
  background: #222;
}
.menu-icon:hover span:before, .menu-icon:hover span:after {
  background: #222;
}

.menu-icon > span {
  position: absolute;
  top: 50%;
  display: block;
  width: 100%;
  height: 0.25em;
  background-color: #bbbbbb;
  border-radius: 3px;
  transition: transform 0.3s, background 0.25s ease;
}

.menu-icon > span:before,
.menu-icon > span:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #bbbbbb;
  border-radius: 3px;
  transition: transform 0.3s, background 0.25s ease;
}

.menu-icon > span:before {
  transform: translateY(-0.75em);
}

.menu-icon > span:after {
  transform: translateY(0.75em);
}

/* OPENED */
.menu-icon.open {
  transform: rotate(45deg);
}

.menu-icon.open > span:before {
  transform: rotate(90deg);
}

.menu-icon.open > span:after {
  transform: rotate(90deg);
}

nav {
  position: fixed;
  top: 0;
  left: 5%;
  color: white;
  z-index: 1;
}
nav ul li.animate {
  top: 0;
}
nav ul li {
  display: inline-block;
  text-align: center;
  margin: 1em 2em;
  cursor: pointer;
  position: relative;
  top: -8em;
}
nav ul li:nth-child(1) {
  -moz-transition: top 0.3s ease 0.15s;
  -o-transition: top 0.3s ease 0.15s;
  -webkit-transition: top 0.3s ease;
  -webkit-transition-delay: 0.15s;
  transition: top 0.3s ease 0.15s;
}
nav ul li:nth-child(2) {
  -moz-transition: top 0.3s ease 0.2s;
  -o-transition: top 0.3s ease 0.2s;
  -webkit-transition: top 0.3s ease;
  -webkit-transition-delay: 0.2s;
  transition: top 0.3s ease 0.2s;
}
nav ul li:nth-child(3) {
  -moz-transition: top 0.3s ease 0.25s;
  -o-transition: top 0.3s ease 0.25s;
  -webkit-transition: top 0.3s ease;
  -webkit-transition-delay: 0.25s;
  transition: top 0.3s ease 0.25s;
}
nav ul li:nth-child(4) {
  -moz-transition: top 0.3s ease 0.3s;
  -o-transition: top 0.3s ease 0.3s;
  -webkit-transition: top 0.3s ease;
  -webkit-transition-delay: 0.3s;
  transition: top 0.3s ease 0.3s;
}
nav ul li:nth-child(5) {
  -moz-transition: top 0.3s ease 0.35s;
  -o-transition: top 0.3s ease 0.35s;
  -webkit-transition: top 0.3s ease;
  -webkit-transition-delay: 0.35s;
  transition: top 0.3s ease 0.35s;
}
nav ul li:hover {
  opacity: 1;
}
nav ul li i {
  font-size: 1.5em;
  background: #10d7af;
  padding: 0.75em;
  border-radius: 50%;
  color: white;
  display: inline-block;
  overflow: hidden;
  text-shadow: 0px 0px #0ca888, 1px 1px #0ca888, 2px 2px #0ca888, 3px 3px #0ca888, 4px 4px #0ca888, 5px 5px #0ca888, 6px 6px #0ca888, 7px 7px #0ca888, 8px 8px #0ca888, 9px 9px #0ca888, 10px 10px #0ca888, 11px 11px #0ca888, 12px 12px #0ca888, 13px 13px #0ca888, 14px 14px #0ca888, 15px 15px #0ca888, 16px 16px #0ca888, 17px 17px #0ca888, 18px 18px #0ca888, 19px 19px #0ca888, 20px 20px #0ca888, 21px 21px #0ca888, 22px 22px #0ca888, 23px 23px #0ca888, 24px 24px #0ca888, 25px 25px #0ca888, 26px 26px #0ca888, 27px 27px #0ca888, 28px 28px #0ca888, 29px 29px #0ca888, 30px 30px #0ca888, 31px 31px #0ca888, 32px 32px #0ca888, 33px 33px #0ca888, 34px 34px #0ca888, 35px 35px #0ca888, 36px 36px #0ca888, 37px 37px #0ca888, 38px 38px #0ca888, 39px 39px #0ca888, 40px 40px #0ca888, 41px 41px #0ca888, 42px 42px #0ca888, 43px 43px #0ca888, 44px 44px #0ca888, 45px 45px #0ca888, 46px 46px #0ca888, 47px 47px #0ca888, 48px 48px #0ca888, 49px 49px #0ca888, 50px 50px #0ca888, 51px 51px #0ca888, 52px 52px #0ca888, 53px 53px #0ca888, 54px 54px #0ca888, 55px 55px #0ca888, 56px 56px #0ca888, 57px 57px #0ca888, 58px 58px #0ca888, 59px 59px #0ca888, 60px 60px #0ca888;
}
nav ul li h4 {
  line-height: 2.5;
}
</style>
</head>
<body>
  <nav>
  <ul>
    <li>
      <i class="icon-tools"></i>
      <h4>TOOLS</h4>
    </li>
    <li>
      <i class="icon-cog"></i>
      <h4>SETTINGS</h4>
    </li>
    <li>
      <i class="icon-lifebuoy"></i>
      <h4>LEARN</h4>
    </li>
    <li>
      <i class="icon-air"></i>
      <h4>WAVES</h4>
    </li>
    <li>
      <i class="icon-suitcase"></i>
      <h4>TRAVEL</h4>
    </li>
  </ul>
</nav>
<div class="container"><div class="menu-icon"><span></span></div></div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
(function ($) {

  $(".menu-icon").on("click", function () {
    $(this).toggleClass("open");
    $(".container").toggleClass("nav-open");
    $("nav ul li").toggleClass("animate");
  });

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

7. By Una Kravets

Made by Una Kravets. A simple JavaScript Fullscreen menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
  background: tomato;
  margin: 0;
  padding: 0;
}

.menu-toggle {
  width: 40px;
  height: 30px;
  position: absolute;
  top: 20px;
  right: 25px;
  cursor: pointer;
}
.menu-toggle.on .one {
  -moz-transform: rotate(45deg) translate(7px, 7px);
  -ms-transform: rotate(45deg) translate(7px, 7px);
  -webkit-transform: rotate(45deg) translate(7px, 7px);
  transform: rotate(45deg) translate(7px, 7px);
}
.menu-toggle.on .two {
  opacity: 0;
}
.menu-toggle.on .three {
  -moz-transform: rotate(-45deg) translate(8px, -10px);
  -ms-transform: rotate(-45deg) translate(8px, -10px);
  -webkit-transform: rotate(-45deg) translate(8px, -10px);
  transform: rotate(-45deg) translate(8px, -10px);
}

.one,
.two,
.three {
  width: 100%;
  height: 5px;
  background: white;
  margin: 6px auto;
  backface-visibility: hidden;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

nav ul {
  margin: 0;
  padding: 0;
  font-family: Open Sans;
  list-style: none;
  margin: 4em auto;
  text-align: center;
}
nav ul.hidden {
  display: none;
}
nav ul a {
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  text-decoration: none;
  color: white;
  font-size: 3em;
  line-height: 1.5;
  width: 100%;
  display: block;
}
nav ul a:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.menu-section.on {
  z-index: 10;
  width: 100%;
  height: 100%;
  display: block;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
}
</style>
</head>
<body>
  <div class="menu-section">
  <div class="menu-toggle">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
  </div>
  <nav>
		<ul role="navigation" class="hidden">
			<li><a href="#">work</a></li>
			<li><a href="#">about</a></li>
			<li><a href="#">resume</a></li>
			<li><a href="#">contact</a></li>
		</ul>
	</nav>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(".menu-toggle").on('click', function () {
  $(this).toggleClass("on");
  $('.menu-section').toggleClass("on");
  $("nav ul").toggleClass('hidden');
});
    </script>
</body>
</html>

8. By Ivan Grozdic

Made by Ivan Grozdic. Overlay menu with dark mode, mouse hover effect, menu wave animation and split text animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');

body{
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.7;
	color: #c4c3ca;
	background-color: #1f2029;
	overflow-x: hidden;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear;
}
a {
	cursor: pointer;
}
a:hover {
	text-decoration: none;
}

/* #Cursor
================================================== */

.cursor,
.cursor2,
.cursor3{
	position: fixed;
	border-radius: 50%;	
	transform: translateX(-50%) translateY(-50%);
	pointer-events: none;
	left: -100px;
	top: 50%;
	mix-blend-mode: difference;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear;
}
.cursor{
	background-color: #fff;
	height: 0;
	width: 0;
	z-index: 99999;
}
.cursor2,.cursor3{
	height: 36px;
	width: 36px;
	z-index:99998;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out
}
.cursor2.hover,
.cursor3.hover{
	-webkit-transform:scale(2) translateX(-25%) translateY(-25%);
	transform:scale(2) translateX(-25%) translateY(-25%);
	border:none
}
.cursor2{
	border: 2px solid #fff;
	box-shadow: 0 0 22px rgba(255, 255, 255, 0.6);
}
.cursor2.hover{
	background: rgba(255,255,255,1);
	box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

@media screen and (max-width: 1200px){
	.cursor,.cursor2,.cursor3{
		display: none
	}
}

/* #Primary style
================================================== */

.section {
    position: relative;
	width: 100%;
	display: block;
}
.over-hide{
	overflow: hidden;
}
.full-height {
	height: 100vh;
}

/* #Navigation
================================================== */
 
.cd-header{
    position: fixed;
	width:100%;
	top:0;
	left:0;
	z-index:100;
} 
.header-wrapper{
    position: relative;
	width: calc(100% - 100px);
	margin-left: 50px;
} 
.logo-wrap {
	position: absolute;
	display:block;
	left:0;
	top: 40px;
	cursor: pointer;
}
.logo-wrap a {
	cursor: pointer;
	font-family: 'Montserrat', sans-serif;
	font-weight: 900;
	font-size: 20px;
	line-height: 20px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #fff;
	transition : all 0.3s ease-out;
}
.logo-wrap a span{ 
	color: #8167a9;
}
.logo-wrap a:hover {
	opacity: 0.9;
}
.nav-but-wrap{ 
	position: relative;
	display: inline-block;
	float: right;
	padding-left: 15px;
	padding-top: 15px;
	margin-top: 26px;
	transition : all 0.3s ease-out;
}
.menu-icon {
	height: 30px;
	width: 30px;
	position: relative;
	z-index: 2;
	cursor: pointer;
	display: block;
}
.menu-icon__line {
	height: 2px;
	width: 30px;
	display: block;
	background-color: #fff;
	margin-bottom: 7px;
	cursor: pointer;
	-webkit-transition: background-color .5s ease, -webkit-transform .2s ease;
	transition: background-color .5s ease, -webkit-transform .2s ease;
	transition: transform .2s ease, background-color .5s ease;
	transition: transform .2s ease, background-color .5s ease, -webkit-transform .2s ease;
}
.menu-icon__line-left {
	width: 16.5px;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
}
.menu-icon__line-right {
	width: 16.5px;
	float: right;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}
.menu-icon:hover .menu-icon__line-left,
.menu-icon:hover .menu-icon__line-right {
	width: 30px;
}
.nav {
	position: fixed;
	z-index: 98;
}
.nav:before, .nav:after {
	content: "";
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: rgba(20, 21, 26,0.6);
	border-bottom-left-radius: 200%;
	z-index: -1;
	-webkit-transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
	transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
	transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
	transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s, border-radius linear 0.8s;
	-webkit-transform: translateX(100%) translateY(-100%);
          transform: translateX(100%) translateY(-100%);
}
.nav:after {
	background: rgba(9,9,12,1);
	-webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.nav:before {
	-webkit-transition-delay: .2s;
          transition-delay: .2s;
}
.nav__content {
	position: fixed;
	visibility: hidden;
	top: 50%;
	margin-top: 20px;
	-webkit-transform: translate(0%, -50%);
          transform: translate(0%, -50%);
	width: 100%;
	text-align: center;
}
.nav__list {
	position: relative;
	padding: 0;
	margin: 0;
	z-index: 2;
}
.nav__list-item {
	position: relative;
	display: block;
	-webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
	opacity: 0;
	text-align: center;
	color: #fff;
	overflow: hidden; 
	font-family: 'Montserrat', sans-serif;
	font-size: 8vh;
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: 3px;
	-webkit-transform: translate(100px, 0%);
          transform: translate(100px, 0%);
	-webkit-transition: opacity .2s ease, -webkit-transform .3s ease;
	transition: opacity .2s ease, -webkit-transform .3s ease;
	transition: opacity .2s ease, transform .3s ease;
	transition: opacity .2s ease, transform .3s ease, -webkit-transform .3s ease;
	margin-top: 0;
	margin-bottom: 0;
}
.nav__list-item a{ 
	position: relative;
	text-decoration: none;
	color: rgba(255,255,255,0.6);
	overflow: hidden; 
	cursor: pointer;
	padding-left: 5px;
	padding-right: 5px;
	font-weight: 900;
	z-index: 2;
	display: inline-block;
	text-transform: uppercase;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear; 
}
.nav__list-item a:after{ 
	position: absolute;
	content: '';
	top: 50%;
	margin-top: -2px;
	left: 50%;
	width: 0;
	height: 0;
	opacity: 0;
	background-color: #8167a9;
	z-index: 1;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear; 
}
.nav__list-item a:hover:after{ 
	height: 4px;
	opacity: 1;
	left: 0;
	width: 100%;
}
.nav__list-item a:hover{
	color: rgba(255,255,255,1);
}
.nav__list-item.active-nav a{
	color: rgba(255,255,255,1);
}
.nav__list-item.active-nav a:after{ 
	height: 4px;
	opacity: 1;
	left: 0;
	width: 100%;
}
body.nav-active .nav__content {
	visibility: visible;
}
body.nav-active .menu-icon__line {
	background-color: #fff;
	-webkit-transform: translate(0px, 0px) rotate(-45deg);
          transform: translate(0px, 0px) rotate(-45deg);
}
body.nav-active .menu-icon__line-left {
	width: 15px;
	-webkit-transform: translate(2px, 4px) rotate(45deg);
          transform: translate(2px, 4px) rotate(45deg);
}
body.nav-active .menu-icon__line-right {
	width: 15px;
	float: right;
	-webkit-transform: translate(-3px, -3.5px) rotate(45deg);
          transform: translate(-3px, -3.5px) rotate(45deg);
}
body.nav-active .menu-icon:hover .menu-icon__line-left,
body.nav-active .menu-icon:hover .menu-icon__line-right {
	width: 15px;
}
body.nav-active .nav {
	visibility: visible;
}
body.nav-active .nav:before, body.nav-active .nav:after {
	-webkit-transform: translateX(0%) translateY(0%);
          transform: translateX(0%) translateY(0%);
	border-radius: 0;
}
body.nav-active .nav:after {
	-webkit-transition-delay: .1s;
          transition-delay: .1s;
}
body.nav-active .nav:before {
	-webkit-transition-delay: 0s;
          transition-delay: 0s;
}
body.nav-active .nav__list-item {
	opacity: 1;
	-webkit-transform: translateX(0%);
          transform: translateX(0%);
	-webkit-transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
	transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
	transition: opacity .3s ease, transform .3s ease, color .3s ease;
	transition: opacity .3s ease, transform .3s ease, color .3s ease, -webkit-transform .3s ease;
}
body.nav-active .nav__list-item:nth-child(0) {
	-webkit-transition-delay: 0.7s;
          transition-delay: 0.7s;
}
body.nav-active .nav__list-item:nth-child(1) {
	-webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
body.nav-active .nav__list-item:nth-child(2) {
	-webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}
body.nav-active .nav__list-item:nth-child(3) {
	-webkit-transition-delay: 1s;
          transition-delay: 1s;
}
body.nav-active .nav__list-item:nth-child(4) {
	-webkit-transition-delay: 1.1s;
          transition-delay: 1.1s;
}
body.nav-active .nav__list-item:nth-child(5) {
	-webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}
body.nav-active .nav__list-item:nth-child(6) {
	-webkit-transition-delay: 1.3s;
          transition-delay: 1.3s;
}
body.nav-active .nav__list-item:nth-child(7) {
	-webkit-transition-delay: 1.4s;
          transition-delay: 1.4s;
}
body.nav-active .nav__list-item:nth-child(8) {
	-webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}
body.nav-active .nav__list-item:nth-child(9) {
	-webkit-transition-delay: 1.6s;
          transition-delay: 1.6s;
}
body.nav-active .nav__list-item:nth-child(10) {
	-webkit-transition-delay: 1.7s;
          transition-delay: 1.7s;
}

.switch-wrap {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 10;
    transform: translateY(-50%);
	width: 100%;
	-webkit-transition: all 500ms linear;
	transition: all 500ms linear; 
	margin: 0 auto;
	text-align: center;
}
.switch-wrap h1 {
	font-weight: 900;
	font-size: 46px;
	line-height: 1;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 40px;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
@media screen and (max-width: 580px){
  .switch-wrap h1 {
    font-size: 32px;
  }
}
.switch-wrap p {
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 1;
	color: #8167a9;
	text-align: center;
	margin-top: 15px;
}
.switch-wrap p span {
	position: relative;
}
.switch-wrap p span:before {
	position: absolute;
	content: '';
	width: 100%;
	height: 2px;
	background-color: #fff;
	left: 0;
	bottom: -4px;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.switch-wrap p span:nth-child(2):before {
	opacity: 0;
}
#switch,
#circle {
	cursor: pointer;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
} 
#switch {
	width: 60px;
	height: 8px;
	margin: 0 auto;
	text-align: center;
	border: 2px solid #000;
	border-radius: 27px;
	background: #8167a9;
	position: relative;
	display: inline-block;
}
#circle {
	position: absolute;
	top: -11px;
	left: -13px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
	background: #fff;
}
.switched {
	border-color: #8167a9 !important;
	background: #000 !important;
}
.switched #circle {
	left: 43px;
	background: #000;
}

/* #Light
================================================== */

body.light{
	background-color: #fff;
}
body.light .cursor,
body.light .cursor2,
body.light .cursor3{
	mix-blend-mode: normal;
}
body.light .cursor2{
	border: 2px solid #1f2029;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}
body.light .cursor2.hover{
	background: rgba(0,0,0,0.06);
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
	border-color: transparent;
}
body.light .logo-wrap a {
	color: #1f2029;
}
body.light .menu-icon__line {
	background-color: #1f2029;
}
body.light .nav:before {
	background: rgba(235, 235, 235,0.6);
}
body.light .nav:after {
	background: rgba(250,250,250,1);
}
body.light .nav__list-item a{ 
	color: rgba(0,0,0,0.6); 
}
body.light .nav__list-item a:hover{
	color: #1f2029;
}
body.light .nav__list-item.active-nav a{
	color: #1f2029;
}
body.light .switch-wrap h1 {
	color: #000;
}
body.light .switch-wrap p span:nth-child(2):before {
	opacity: 1;
	background-color: #000;
}
body.light .switch-wrap p span:nth-child(1):before {
	opacity: 0;
}

/* #Link to page
================================================== */

.link-to-portfolio {
	  position: fixed;
    bottom: 40px;
    right: 50px;
    z-index: 200;
    cursor: pointer;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 3px;
    background-position: center center;
    background-size: 65%;
  background-repeat: no-repeat;
    background-image: url('https://assets.codepen.io/1462889/fcy.png');
    box-shadow: 0 0 0 2px rgba(255,255,255,.1);
    transition: opacity .2s, border-radius .2s, box-shadow .2s;
    transition-timing-function: ease-out;
}
.link-to-portfolio:hover {
    opacity: 0.8;
    border-radius: 50%;
    box-shadow: 0 0 0 20px rgba(255,255,255,.1);
}
</style>
</head>
<body>
  <header class="cd-header">
		<div class="header-wrapper">
			<div class="logo-wrap">
				<a href="#" class="hover-target"><span>your</span>logo</a>
			</div>
			<div class="nav-but-wrap">
				<div class="menu-icon hover-target">
					<span class="menu-icon__line menu-icon__line-left"></span>
					<span class="menu-icon__line"></span>
					<span class="menu-icon__line menu-icon__line-right"></span>
				</div>					
			</div>					
		</div>				
	</header>

	<div class="nav">
		<div class="nav__content">
			<ul class="nav__list">
				<li class="nav__list-item active-nav"><a href="#" class="hover-target">home</a></li>
				<li class="nav__list-item"><a href="#" class="hover-target">studio</a></li>
				<li class="nav__list-item"><a href="#" class="hover-target">news</a></li>
				<li class="nav__list-item"><a href="#" class="hover-target">contact</a></li>
			</ul>
		</div>
	</div>		

	<div class="section full-height over-hide">	
		<div class="switch-wrap">
			<h1>overlay menu</h1>
			<div id="switch" class="hover-target">
				<div id="circle"></div>
			</div>
			<p><span>dark</span> - <span>light</span></p>
		</div>
	</div>	
	
	<div class='cursor' id="cursor"></div>
	<div class='cursor2' id="cursor2"></div>
	<div class='cursor3' id="cursor3"></div>

<!-- Link to page
================================================== -->

<a href="https://front.codes/" class="link-to-portfolio hover-target" target=”_blank”></a>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
      <script>
(function ($) {"use strict";
  //Page cursors

  document.getElementsByTagName("body")[0].addEventListener("mousemove", function (n) {
    t.style.left = n.clientX + "px",
    t.style.top = n.clientY + "px",
    e.style.left = n.clientX + "px",
    e.style.top = n.clientY + "px",
    i.style.left = n.clientX + "px",
    i.style.top = n.clientY + "px";
  });
  var t = document.getElementById("cursor"),
  e = document.getElementById("cursor2"),
  i = document.getElementById("cursor3");
  function n(t) {
    e.classList.add("hover"), i.classList.add("hover");
  }
  function s(t) {
    e.classList.remove("hover"), i.classList.remove("hover");
  }
  s();
  for (var r = document.querySelectorAll(".hover-target"), a = r.length - 1; a >= 0; a--) {if (window.CP.shouldStopExecution(0)) break;
    o(r[a]);
  }window.CP.exitedLoop(0);
  function o(t) {
    t.addEventListener("mouseover", n), t.addEventListener("mouseout", s);
  }

  //Navigation

  var app = function () {
    var body = undefined;
    var menu = undefined;
    var menuItems = undefined;
    var init = function init() {
      body = document.querySelector('body');
      menu = document.querySelector('.menu-icon');
      menuItems = document.querySelectorAll('.nav__list-item');
      applyListeners();
    };
    var applyListeners = function applyListeners() {
      menu.addEventListener('click', function () {
        return toggleClass(body, 'nav-active');
      });
    };
    var toggleClass = function toggleClass(element, stringClass) {
      if (element.classList.contains(stringClass)) element.classList.remove(stringClass);else element.classList.add(stringClass);
    };
    init();
  }();


  //Switch light/dark

  $("#switch").on('click', function () {
    if ($("body").hasClass("light")) {
      $("body").removeClass("light");
      $("#switch").removeClass("switched");
    } else
    {
      $("body").addClass("light");
      $("#switch").addClass("switched");
    }
  });

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

9. By Arjun Amgain

Made by Arjun Amgain. Responsive Mega Menu. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  	<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>
    <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<style>
body{
	margin: 0;
	padding: 0;
	font: 300 14px/18px Roboto;
	background-image: url('../images/texture.png');
 }
  

 *,
:after,
:before {
  box-sizing: border-box
}

.clearfix:after,
.clearfix:before {
  content: '';
  display: table
}

.clearfix:after {
  clear: both;
  display: block
}
ul{
	list-style:none;
	margin: 0;
	padding: 0;
}
a, a:hover, a.active, a:active, a:visited, a:focus{
	color:#fefefe;
	text-decoration:none;
}
.content{
	margin: 50px 100px 0px 100px;
}

.exo-menu{
	width: 100%;
	float: left;
	list-style: none;
	position:relative;
	background: #23364B;
}
.exo-menu > li {	display: inline-block;float:left;}
.exo-menu > li > a{
	color: #ccc;
	text-decoration: none;
	text-transform: uppercase;
	border-right: 1px #365670 dotted;
	-webkit-transition: color 0.2s linear, background 0.2s linear;
	-moz-transition: color 0.2s linear, background 0.2s linear;
	-o-transition: color 0.2s linear, background 0.2s linear;
	transition: color 0.2s linear, background 0.2s linear;
}
.exo-menu > li > a.active,
.exo-menu > li > a:hover,
li.drop-down ul > li > a:hover{
	background:#009FE1;
	color:#fff;
}
.exo-menu i {
  float: left;
  font-size: 18px;
  margin-right: 6px;
  line-height: 20px !important;
}
li.drop-down,
.flyout-right,
.flyout-left{position:relative;}
li.drop-down:before {
  content: "\f103";
  color: #fff;
  font-family: FontAwesome;
  font-style: normal;
  display: inline;
  position: absolute;
  right: 6px;
  top: 20px;
  font-size: 14px;
}
li.drop-down>ul{
	left: 0px;
	min-width: 230px;

}
.drop-down-ul{display:none;}
.flyout-right>ul,
.flyout-left>ul{
  top: 0;
  min-width: 230px;
  display: none;
  border-left: 1px solid #365670;
  }

li.drop-down>ul>li>a,
.flyout-right ul>li>a ,
.flyout-left ul>li>a {
	color: #fff;
	display: block;
	padding: 20px 22px;
	text-decoration: none;
	background-color: #365670;
	border-bottom: 1px dotted #547787;
	-webkit-transition: color 0.2s linear, background 0.2s linear;
	-moz-transition: color 0.2s linear, background 0.2s linear;
	-o-transition: color 0.2s linear, background 0.2s linear;
	transition: color 0.2s linear, background 0.2s linear;
}
.flyout-right ul>li>a ,
.flyout-left ul>li>a {
	border-bottom: 1px dotted #B8C7BC;
}


/*Flyout Mega*/
.flyout-mega-wrap {
	top: 0;
	right: 0;
	left: 100%;
	width: 100%;
	display:none;
	height: 100%;
	padding: 15px;
	min-width: 742px;

}
h4.row.mega-title {
  color:#eee;
  margin-top: 0px;
  font-size: 14px;
  padding-left: 15px;
  padding-bottom: 13px;
  text-transform: uppercase;
  border-bottom: 1px solid #ccc;
 }
.flyout-mega ul > li > a {
  font-size: 90%;
  line-height: 25px;
  color: #fff;
  font-family: inherit;
}
.flyout-mega ul > li > a:hover,
.flyout-mega ul > li > a:active,
.flyout-mega ul > li > a:focus{
  text-decoration: none;
  background-color: transparent !important;
  color: #ccc !important
}
/*mega menu*/

.mega-menu {
  left: 0;
  right: 0;
  padding: 15px;
  display:none;
  padding-top: 0;
  min-height: 100%;

}
h4.row.mega-title {
  color: #eee;
  margin-top: 0px;
  font-size: 14px;
  padding-left: 15px;
  padding-bottom: 13px;
  text-transform: uppercase;
  border-bottom: 1px solid #547787;
  padding-top: 15px;
  background-color: #365670
  }
 .mega-menu ul li a {
  line-height: 25px;
  font-size: 90%;
  display: block;
}
ul.stander li a {
    padding: 3px 0px;
}

ul.description li {
    padding-bottom: 12px;
    line-height: 8px;
}

ul.description li span {
    color: #ccc;
    font-size: 85%;
}
a.view-more{
  border-radius: 1px;
  margin-top:15px;
  background-color: #009FE1;
  padding: 2px 10px !important;
  line-height: 21px !important;
  display: inline-block !important;
}
a.view-more:hover{
	color:#fff;
	background:#0DADEF;
}
ul.icon-des li a i {
    color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    text-align: center;
    background-color: #009FE1;
    line-height: 35px !important;
}

ul.icon-des li {
    width: 100%;
    display: table;
    margin-bottom: 11px;
}
/*Blog DropDown*/
.Blog{
	left:0;
	display:none;
	color:#fefefe;
	padding-top:15px;
	background:#547787;
	padding-bottom:15px;
}
.Blog .blog-title{
	color:#fff;
	font-size:15px;
	text-transform:uppercase;

}
.Blog .blog-des{
	color:#ccc;
	font-size:90%;
	margin-top:15px;
}
.Blog a.view-more{
	margin-top:0px;
}
/*Images*/
.Images{
	left:0;
   width:100%;
	 display:none;
	color:#fefefe;
	padding-top:15px;
	background:#547787;
	padding-bottom:15px;
}
.Images h4 {
  font-size: 15px;
  margin-top: 0px;
  text-transform: uppercase;
}
/*common*/
.flyout-right ul>li>a ,
.flyout-left ul>li>a,
.flyout-mega-wrap,
.mega-menu{
	background-color: #547787;
}

/*hover*/
.Blog:hover,
.Images:hover,
.mega-menu:hover,
.drop-down-ul:hover,
li.flyout-left>ul:hover,
li.flyout-right>ul:hover,
.flyout-mega-wrap:hover,
li.flyout-left a:hover +ul,
li.flyout-right a:hover +ul,
.blog-drop-down >a:hover+.Blog,
li.drop-down>a:hover +.drop-down-ul,
.images-drop-down>a:hover +.Images,
.mega-drop-down a:hover+.mega-menu,
li.flyout-mega>a:hover +.flyout-mega-wrap{
	display:block;
}
/*responsive*/
 @media (min-width:767px){
	.exo-menu > li > a{
	display:block;
	padding: 20px 22px;
 }
.mega-menu, .flyout-mega-wrap, .Images, .Blog,.flyout-right>ul,
.flyout-left>ul, li.drop-down>ul{
		position:absolute;
}
 .flyout-right>ul{
	left: 100%;
	}
	.flyout-left>ul{
	right: 100%;
}
 }
@media (max-width:767px){

	.exo-menu {
		min-height: 58px;
		background-color: #23364B;
		width: 100%;
	}
	
	.exo-menu > li > a{
		width:100% ;
	    display:none ;
	
	}
	.exo-menu > li{
		width:100%;
	}
	.display.exo-menu > li > a{
	  display:block ;
	  	padding: 20px 22px;
	}
	
.mega-menu, .Images, .Blog,.flyout-right>ul,
.flyout-left>ul, li.drop-down>ul{
		position:relative;
}

}
a.toggle-menu{
    position: absolute;
    right: 0px;
    padding: 20px;
    font-size: 27px;
    background-color: #ccc;
    color: #23364B;
    top: 0px;
}
</style>
</head>
<body class="background">
	 <div class="content">
	 
		<ul class="exo-menu">
			<li><a class="active" href="#"><i class="fa fa-home"></i> Home</a></li>
			<li class="drop-down"><a href="#"><i class="fa fa-cogs"></i> Flyout</a>
				<!--Drop Down-->
				<ul class="drop-down-ul animated fadeIn">
				<li class="flyout-right"><a href="#">Flyout Right</a><!--Flyout Right-->
					<ul class="animated fadeIn">
						<li><a href="#">Mobile</a></li>
						<li><a href="#">Computer</a></li>
						<li><a href="#">Watch</a></li>
					</ul>
				</li>
				
				<li class="flyout-left"><a href="#">Flyout Left</a><!--Flyout Left-->
					<ul class="animated fadeIn">
						<li><a href="#">Mobile</a></li>
						<li><a href="#">Computer</a></li>
						<li><a href="#">Watch</a></li>
					</ul>			
				</li>
				
				<li><a href="#">No Flyout</a></li>
				 
				</ul>
				<!--//End drop down-->
			
			</li>
			<li><a href="#"><i class="fa fa-cogs"></i> Services</a></li>
			<li><a href="#"><i class="fa fa-briefcase"></i> Portfolio</a></li>
			<li class="mega-drop-down"><a href="#"><i class="fa fa-list"></i> Mega Menu</a>
				<div class="animated fadeIn mega-menu">
					<div class="mega-menu-wrap">
						<div class="row">
						<div class="col-md-4">
							<h4 class="row mega-title">Feature</h4>
								<img class="img-responsive" src="https://3.bp.blogspot.com/-rUk36pd-LbM/VcLb48X4f-I/AAAAAAAAGCI/Y_UxBAgEqwA/s1600/Magento_themes.jpg">
							</div>
							<div class="col-md-2">
									<h4 class="row mega-title">Standers</h4>
								<ul class="stander">
									<li><a href="#">Mobile</a></li>
									<li><a href="#">Computer</a></li>
									<li><a href="#">Watch</a></li>
									<li><a href="#">laptop</a></li>
									<li><a href="#">Camera</a></li>
									<li><a href="#">I pad</a></li>
									<li><a class="view-more btn- btn-sm" href="#">View more</a></li>
								</ul>
							</div>
							<div class="col-md-3">
								<h4 class="row mega-title">Description</h4>
								<ul class="description">
									<li><a href="#">Women</a>
										<span>Description of Women</span>
									</li>
									<li><a href="#">Men</a>
											<span>Description of men Cloths</span>
									</li>
									<li><a href="#">Kids</a>
											<span>Description of Kids Cloths</span>
									</li>
									<li><a href="#">Others</a>
											<span>Description of Others Cloths</span>
									</li>
									<li>
									<a class="view-more btn btn-sm " href="#">View more</a>
											 
									</li>
								</ul>
							</div>
							<div class="col-md-3">
							<h4 class="row mega-title">Icon + Description</h4>
								<ul class="icon-des">
									<li><a href="#"><i class="fa fa-globe"></i>Web</a></li>
									<li><a href="#"><i class="fa fa-mobile"></i>Mobile</a></li>
									<li><a href="#"><i class="fa fa-arrows-h"></i>Responsive</a></li>
									<li><a href="#"><i class="fa fa-desktop"></i>Desktop</a></li>
									<li><a href="#"><i class="fa fa-paint-brush"></i>UI/UX</a></li>
								</ul>
							</div>
							
						</div>
					</div>	
				</div>
			</li>
			<li class="blog-drop-down"><a href="#"><i class="fa fa-bullhorn"></i> Blog</a>
				<div class="Blog animated fadeIn">
					<div class="col-md-4">
						<img class="img-responsive" src="https://2.bp.blogspot.com/-VG_e0pKfrDo/VcLb6JwZqfI/AAAAAAAAGCk/8ZgA9kZqTQ8/s1600/images3.jpg">
						<div class="blog-des">
					<h4 class="blog-title">Lorem ipsum</p>
							<a class="view-more btn- btn-sm" href="#">Read More</a>
						</div>
					</div>
					<div class="col-md-4">
						<img class="img-responsive" src="https://3.bp.blogspot.com/-hUt5FrdZHio/VcLb5dlwTBI/AAAAAAAAGCU/UUH5N1JkoQc/s1600/images1.jpg">
						<div class="blog-des">
						<h4 class="blog-title">Lorem ipsum dolor sit amet</h4>
							<p>Lorem ipsum</p>
									<a class="view-more btn- btn-sm" href="#">Read More</a>
						</div>
					</div>
					<div class="col-md-4">
						<img class="img-responsive" src="https://4.bp.blogspot.com/-A7U1uPlSq6Y/VcLb5kKHCkI/AAAAAAAAGCc/7WghyndTEuY/s1600/images2.jpg">
						<div class="blog-des">
						<h4 class="blog-title">Lorem ipsum dolor sit amet</h4>
							<p>Lorem ipsum</p>
									<a class="view-more btn- btn-sm" href="#">Read More</a>
						</div>
					</div>
					 
					
				</div>
			</li>
			<li  class="images-drop-down"><a  href="#"><i class="fa fa-photo"></i> Images</a>
				<div class="Images animated fadeIn">
					<div class="col-md-3">
						<h4>Images Title </h4>
						<img class="img-responsive" src="https://2.bp.blogspot.com/-VG_e0pKfrDo/VcLb6JwZqfI/AAAAAAAAGCk/8ZgA9kZqTQ8/s1600/images3.jpg">
					</div>
					<div class="col-md-3">
					<h4>Images Title </h4>
						<img class="img-responsive" src="https://3.bp.blogspot.com/-hUt5FrdZHio/VcLb5dlwTBI/AAAAAAAAGCU/UUH5N1JkoQc/s1600/images1.jpg">
					</div>
					<div class="col-md-3">
					<h4>Images Title </h4>
						<img class="img-responsive" src="https://4.bp.blogspot.com/-A7U1uPlSq6Y/VcLb5kKHCkI/AAAAAAAAGCc/7WghyndTEuY/s1600/images2.jpg">
					</div>
					<div class="col-md-3">
					<h4>Images Title </h4>
						<img class="img-responsive"  src="https://3.bp.blogspot.com/-hGrnZIjzL2k/VcLb47kyQKI/AAAAAAAAGCQ/J6Q2IAHIQvQ/s1600/image4.jpg">
					</div>
					
				</div>
			
			</li>
			<li><a href="#"><i class="fa fa-envelope"></i> Contact</a>
				<div class="contact">
			
				</div>
			</li>
			<a href="#" class="toggle-menu visible-xs-block">|||</a>		
	</ul>
	 </div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(function () {
  $('.toggle-menu').click(function () {
    $('.exo-menu').toggleClass('display');

  });

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

10. By Michael Leonard

Made by Michael Leonard. SVG Gooey Hover Menu made using JavaScript. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body, html {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			background-color:#26394E ;
		}

		#menu {
			height: 100%;
			position: fixed;
			background-color: #FED057;
			width: 300px;
			transition: 1000ms all cubic-bezier(0.19, 1, 0.22, 1);
			transform: translateX(-100%);
			left: 60px;
		}

		#menu.expanded {
			transform: translateX(0%);
			left: 0px;
		}

		.menu-inner {
			width: 100%;
			height: 100%;
			position: relative;
		}

		#blob {
			top: 0;
			z-index: -1;
			right: 60px;
			transform: translateX(100%);
			height: 100%;
			position: absolute;
		}

		#blob-path {
			height: 100%;
			fill:  #FED057;
		}

		.hamburger {
			right: 20px;
			position: absolute;
			width: 20px;
			height: 20px;
			margin-top: -10px;	
		}

		.hamburger .line {
			width: 100%;
			height: 4px;
			background-color: #fff;
			position: absolute;
		}

		.hamburger .line:nth-child(2) {
			top: 50%;
			margin-top: -2px;
		}

		.hamburger .line:nth-child(3) {
			bottom: 0;
		}

		h1 {
			position: fixed;
			right: 0;
			margin: 0;
		}

		ul {
			padding: 0;
			list-style: none;
			width: 80%;
			margin-left: 10%;
			position: absolute;
			top: 10px;
		}

		ul li {
			color: #fff;
			font-family: sans-serif;
			padding: 20px 0;
		}

		h2 {
			position: absolute;
		   left: 50%;
      color: #fff;
			margin: 0;
      font-size: 16px;
      font-family: sans-serif;
      font-weight: 100;
		}
</style>
</head>
<body>
  <div id="menu">
		<div class="hamburger">
			<div class="line"></div>
			<div class="line"></div>
			<div class="line"></div>
		</div>
		<div class="menu-inner">
			
			<ul>
				<li>Menu Item</li>
				<li>Menu Item</li>
				<li>Menu Item</li>
				<li>Menu Item</li>
				<li>Menu Item</li>
				<li>Menu Item</li>
			</ul>
		</div>
		<svg version="1.1" id="blob"xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
			<path id="blob-path" d="M60,500H0V0h60c0,0,20,172,20,250S60,900,60,500z"/>
		</svg>
	</div>

<h2> hover close to the menu </h2>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(window).load(function () {
  var height = window.innerHeight,
  x = 0,y = height / 2,
  curveX = 10,
  curveY = 0,
  targetX = 0,
  xitteration = 0,
  yitteration = 0,
  menuExpanded = false;
  blob = $('#blob'),
  blobPath = $('#blob-path'),
  hamburger = $('.hamburger');

  $(this).on('mousemove', function (e) {
    x = e.pageX;

    y = e.pageY;
  });

  $('.hamburger, .menu-inner').on('mouseenter', function () {
    $(this).parent().addClass('expanded');
    menuExpanded = true;
  });

  $('.menu-inner').on('mouseleave', function () {
    menuExpanded = false;
    $(this).parent().removeClass('expanded');
  });

  function easeOutExpo(currentIteration, startValue, changeInValue, totalIterations) {
    return changeInValue * (-Math.pow(2, -10 * currentIteration / totalIterations) + 1) + startValue;
  }
  var hoverZone = 150;
  var expandAmount = 20;
  function svgCurve() {
    if (curveX > x - 1 && curveX < x + 1) {
      xitteration = 0;
    } else {
      if (menuExpanded) {
        targetX = 0;
      } else {
        xitteration = 0;
        if (x > hoverZone) {
          targetX = 0;
        } else {
          targetX = -((60 + expandAmount) / 100 * (x - hoverZone));
        }
      }
      xitteration++;
    }
    if (curveY > y - 1 && curveY < y + 1) {
      yitteration = 0;
    } else {
      yitteration = 0;
      yitteration++;
    }
    curveX = easeOutExpo(xitteration, curveX, targetX - curveX, 100);
    curveY = easeOutExpo(yitteration, curveY, y - curveY, 100);
    var anchorDistance = 200;
    var curviness = anchorDistance - 40;
    var newCurve2 = "M60," + height + "H0V0h60v" + (curveY - anchorDistance) + "c0," + curviness + "," + curveX + "," + curviness + "," + curveX + "," + anchorDistance + "S60," + curveY + ",60," + (curveY + anchorDistance * 2) + "V" + height + "z";
    blobPath.attr('d', newCurve2);
    blob.width(curveX + 60);
    hamburger.css('transform', 'translate(' + curveX + 'px, ' + curveY + 'px)');
    $('h2').css('transform', 'translateY(' + curveY + 'px)');
    window.requestAnimationFrame(svgCurve);
  }
  window.requestAnimationFrame(svgCurve);
});
    </script>
</body>
</html>

11. By Larry Geams Parangan

Made by Larry Geams Parangan. Menu with Long dropdown items. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body{
  margin: 0px;
  padding: 0px;
  background: #e74c3c;
  font-family: 'Lato', sans-serif;
}

h1{
  margin: 2em 0px;
  padding: 0px;
  color: #fff;
  text-align: center;
  font-weight: 100;
  font-size: 50px;
}

nav{
  width: 750px;
  margin: 1em auto;
}

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

ul.dropdown{ 
  position: relative; 
  width: 100%; 
}

ul.dropdown li{ 
  font-weight: bold; 
  float: left; 
  width: 180px; 
  position: relative;
  background: #ecf0f1;
}

ul.dropdown a:hover{ 
  color: #000; 
}

ul.dropdown li a { 
  display: block; 
  padding: 20px 8px;
  color: #34495e; 
  position: relative; 
  z-index: 2000; 
  text-align: center;
  text-decoration: none;
  font-weight: 300;
}

ul.dropdown li a:hover,
ul.dropdown li a.hover{ 
  background: #3498db;
  position: relative;
  color: #fff;
}


ul.dropdown ul{ 
 display: none;
 position: absolute; 
  top: 0; 
  left: 0; 
  width: 180px; 
  z-index: 1000;
}

ul.dropdown ul li { 
  font-weight: normal; 
  background: #f6f6f6; 
  color: #000; 
  border-bottom: 1px solid #ccc; 
}

ul.dropdown ul li a{ 
  display: block; 
  color: #34495e !important;
  background: #eee !important;
} 

ul.dropdown ul li a:hover{
  display: block; 
  background: #3498db !important;
  color: #fff !important;
} 

.drop > a{
  position: relative;
}

.drop > a:after{
  content:"";
  position: absolute;
  right: 10px;
  top: 40%;
  border-left: 5px solid transparent;
  border-top: 5px solid #333;
  border-right: 5px solid transparent;
  z-index: 999;
}

.drop > a:hover:after{
  content:"";
   border-left: 5px solid transparent;
  border-top: 5px solid #fff;
  border-right: 5px solid transparent;
}
</style>
</head>
<body>
<nav>
<ul class="dropdown">
        	<li class="drop"><a href="#">Really Tall Menu</a>
        		<ul class="sub_menu">
							<li><a href="#">Lorem</a></li>
							<li><a href="#">Ipsum</a></li>
							<li><a href="#">Dolor</a></li>
							<li><a href="#">Lipsum</a></li>
							<li><a href="#">Consectetur </a></li>
							<li><a href="#">Duis</a></li>
							<li><a href="#">Sed</a></li>
							<li><a href="#">Natus</a></li>
							<li><a href="#">Excepteur</a></li>
							<li><a href="#">Voluptas</a></li>
							<li><a href="#">Voluptate</a></li>
							<li><a href="#">Malorum</a></li>
							<li><a href="#">Bonorum</a></li>
							<li><a href="#">Nemo</a></li>
							<li><a href="#">Quisquam</a></li>
							<li><a href="#">Adipisci </a></li>
							<li><a href="#">Excepteur</a></li>
							<li><a href="#">Consectetur </a></li>
							<li><a href="#">Duis</a></li>
							<li><a href="#">Voluptate</a></li>
							<li><a href="#">Ipsum</a></li>
							<li><a href="#">Dolor</a></li>
							<li><a href="#">Lipsum</a></li>
        		</ul>
        	</li>
        	<li class="drop"><a href="#">Kinda Tall Menu</a>
        		<ul class="sub_menu">
        			<li><a href="#">Lorem</a></li>
							<li><a href="#">Ipsum</a></li>
							<li><a href="#">Dolor</a></li>
							<li><a href="#">Lipsum</a></li>
							<li><a href="#">Consectetur </a></li>
							<li><a href="#">Duis</a></li>
							<li><a href="#">Sed</a></li>
							<li><a href="#">Natus</a></li>
							<li><a href="#">Excepteur</a></li>
							<li><a href="#">Voluptas</a></li>
							<li><a href="#">Voluptate</a></li>
							<li><a href="#">Malorum</a></li>
							<li><a href="#">Bonorum</a></li>
							<li><a href="#">Nemo</a></li>
							<li><a href="#">Quisquam</a></li>
							
        		</ul>
        	</li>
        	<li class="drop"><a href="#">Average Menu</a>
        		<ul class="sub_menu">
        			<li><a href="#">Lorem</a></li>
							<li><a href="#">Ipsum</a></li>
							<li><a href="#">Dolor</a></li>
							<li><a href="#">Lipsum</a></li>
							<li><a href="#">Consectetur </a></li>
        		</ul>
        	</li>
        	<li><a href="#">No Menu</a>
        	</li>
        </ul>
</nav>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
var maxHeight = 400;

$(function () {

  $(".dropdown > li").hover(function () {

    var $container = $(this),
    $list = $container.find("ul"),
    $anchor = $container.find("a"),
    height = $list.height() * 1.1, // make sure there is enough room at the bottom
    multiplier = height / maxHeight; // needs to move faster if list is taller

    // need to save height here so it can revert on mouseout            
    $container.data("origHeight", $container.height());

    // so it can retain it's rollover color all the while the dropdown is open
    $anchor.addClass("hover");

    // make sure dropdown appears directly below parent list item    
    $list.
    show().
    css({
      paddingTop: $container.data("origHeight") });


    // don't do any animation if list shorter than max
    if (multiplier > 1) {
      $container.
      css({
        height: maxHeight,
        overflow: "hidden" }).

      mousemove(function (e) {
        var offset = $container.offset();
        var relativeY = (e.pageY - offset.top) * multiplier - $container.data("origHeight") * multiplier;
        if (relativeY > $container.data("origHeight")) {
          $list.css("top", -relativeY + $container.data("origHeight"));
        };
      });
    }

  }, function () {

    var $el = $(this);

    // put things back to normal
    $el.
    height($(this).data("origHeight")).
    find("ul").
    css({ top: 0 }).
    hide().
    end().
    find("a").
    removeClass("hover");
  });
});
    </script>
</body>
</html>

12. By Praveen Bisht

Made by Praveen Bisht. Sticky Navigation Menu With Smooth Scrolling. 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/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
<style>
/*** Mixins & Default Styles ***/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  overflow-x: hidden;
  overflow-y: scroll;
}

/*** Color Variables ***/
/*** Centering Hack ***/
/*** Header Styles ***/
header {
  width: 100vw;
  height: 100vh;
  background: #5661f2;
  display: flex;
}

/*** Navigation Styles ***/
nav {
  width: 100vw;
  height: 160px;
  background: #46b2f0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: fixed;
  z-index: 10;
  transition: all 0.3s;
}
nav.navShadow {
  box-shadow: 0 4px 30px -5px rgba(0, 0, 0, 0.2);
  height: 100px;
}
nav.navShadow #word-mark {
  opacity: 0;
}

#brand,
#menu,
ul {
  display: flex;
  align-items: center;
}

#brand {
  padding-left: 40px;
}

#logo {
  width: 55px;
  height: 55px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
}

#word-mark {
  width: 120px;
  height: 20px;
  background: #fff;
  border-radius: 90px;
  margin-left: 20px;
  opacity: 1;
  transition: all 0.3s;
}

/*** Menu Styles ***/
#menu {
  justify-content: flex-end;
  padding-right: 40px;
}

li {
  margin-left: 20px;
}
li a {
  width: 80px;
  height: 20px;
  background: #fff;
  display: block;
  border-radius: 90px;
}

#menu-toggle {
  width: 55px;
  height: 55px;
  background: #2ea8ee;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  display: none;
}
#menu-toggle:hover .bar {
  width: 25px;
}
#menu-toggle.closeMenu .bar {
  width: 25px;
}
#menu-toggle.closeMenu .bar:first-child {
  transform: translateY(7px) rotate(45deg);
}
#menu-toggle.closeMenu .bar:nth-child(2) {
  transform: scale(0);
}
#menu-toggle.closeMenu .bar:last-child {
  transform: translateY(-7px) rotate(-45deg);
}

.bar {
  width: 25px;
  height: 2px;
  background: #fff;
  transition: 0.3s ease-in-out;
}
.bar:nth-child(2) {
  width: 20px;
  margin: 5px 0;
}
.bar:last-child {
  width: 15px;
}

/*** Hero Section Styles ***/
#hero-section {
  width: 100vw;
  height: calc(100vh - 160px);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 160px;
}

#head-line {
  width: 520px;
  height: 30px;
  background: #fff;
  border-radius: 90px;
  position: relative;
}
#head-line:before, #head-line:after {
  content: "";
  height: 30px;
  border-radius: 90px;
}
#head-line:before {
  width: 360px;
  background: #fff;
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translate(-50%, 0);
}
#head-line:after {
  width: 200px;
  background: #fff;
  position: absolute;
  left: 50%;
  bottom: -60px;
  transform: translate(-50%, 0);
}

/*** Section Styles ***/
section {
  width: 100vw;
  height: calc(100vh - 100px);
  display: flex;
  justify-content: center;
}
section:nth-child(odd) {
  background: #fa6c98;
}
section:nth-child(even) {
  background: #79edfc;
}

#heading {
  width: 120px;
  height: 20px;
  background: #fff;
  border-radius: 90px;
  margin-top: 40px;
}

/*** Responsive Menu For Smaller Device ***/
@media screen and (max-width: 767px) {
  #menu-toggle {
    display: flex;
  }

  ul {
    display: inline-block;
    width: 100vw;
    height: 0;
    background: #79edfc;
    position: absolute;
    top: 160px;
    transform: translate(, );
    box-shadow: 0 5px 30px -4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
  }
  ul.showMenu {
    height: 250px;
  }
  ul.showMenu li {
    height: 80px;
    opacity: 1;
    visibility: visible;
  }

  li {
    width: 50%;
    height: 80px;
    float: left;
    padding-left: 40px;
    opacity: 0;
    visibility: hidden;
    margin-left: 0;
    transition: all 0.3s 0.1s;
  }
  li:first-child, li:nth-child(2) {
    margin-top: 80px;
  }

  #head-line {
    transform: scale(0.8);
  }
}
#youtube {
  position: fixed;
  right: 2vw;
  bottom: 2vh;
  font-size: 30px;
  color: #fff;
}
</style>
</head>
<body>
  <header>
  <nav>
    <div id="brand">
      <div id="logo"></div>
      <div id="word-mark"></div>
    </div>
    <div id="menu">
      <div id="menu-toggle">
        <div id="menu-icon">
          <div class="bar"></div>
          <div class="bar"></div>
          <div class="bar"></div>
        </div>
      </div>
      <ul>
        <li><a href="#section00"></a></li>
        <li><a href="#section01"></a></li>
        <li><a href="#section02"></a></li>
        <li><a href="#section03"></a></li>
      </ul>
    </div>
  </nav>
  <div id="hero-section">
    <div id="head-line"></div>
  </div>
</header>
<section id="section00">
  <div id="heading"></div>
</section>
<section id="section01">
  <div id="heading"></div>
</section>
<section id="section02">
  <div id="heading"></div>
</section>
<section id="section03">
  <div id="heading"></div>
</section><a href="https://youtu.be/m1IU7zjl1k4" id="youtube"><i class="fa fa-youtube-play"></i></a>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
      <script>
$(() => {

  //On Scroll Functionality
  $(window).scroll(() => {
    var windowTop = $(window).scrollTop();
    windowTop > 100 ? $('nav').addClass('navShadow') : $('nav').removeClass('navShadow');
    windowTop > 100 ? $('ul').css('top', '100px') : $('ul').css('top', '160px');
  });

  //Click Logo To Scroll To Top
  $('#logo').on('click', () => {
    $('html,body').animate({
      scrollTop: 0 },
    500);
  });

  //Smooth Scrolling Using Navigation Menu
  $('a[href*="#"]').on('click', function (e) {
    $('html,body').animate({
      scrollTop: $($(this).attr('href')).offset().top - 100 },
    500);
    e.preventDefault();
  });

  //Toggle Menu
  $('#menu-toggle').on('click', () => {
    $('#menu-toggle').toggleClass('closeMenu');
    $('ul').toggleClass('showMenu');

    $('li').on('click', () => {
      $('ul').removeClass('showMenu');
      $('#menu-toggle').removeClass('closeMenu');
    });
  });

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

13. By Karlo Videk

Made by Karlo Videk. Mobile navigation animation using JavaScript. 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">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'> 
<style>
@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700);
body {
  background-color: #3c3c3c;
  padding: 50px 0;
  font-family: "Noto Sans", sans-serif;
  text-align: center;
}

.container {
  background-color: #222222;
  margin: 0 auto;
  width: 100%;
  max-width: 320px;
  min-height: 568px;
  margin: 0 auto;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  -webkit-box-shadow: 0px 9px 13px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 9px 13px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 9px 13px 0px rgba(0, 0, 0, 0.3);
  -webkit-transform: scale(1);
}

.menu-trigger, .close-trigger {
  position: absolute;
  top: 32px;
  right: 20px;
  display: block;
  width: 42px;
  height: 42px;
  cursor: pointer;
  z-index: 333;
}
.menu-trigger:hover .menu-trigger-bar:before, .close-trigger:hover .menu-trigger-bar:before {
  width: 100%;
}
.menu-trigger:hover .close-trigger-bar:before, .close-trigger:hover .close-trigger-bar:before {
  width: 100%;
}

.close-trigger {
  z-index: 5;
  top: 42px;
}

.menu-trigger-bar {
  display: block;
  width: 100%;
  height: 4px;
  background-color: white;
  margin-bottom: 6px;
  transform: rotate(-45deg);
  position: relative;
}
.menu-trigger-bar:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 0%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.menu-trigger-bar.top {
  width: 50%;
}
.menu-trigger-bar.middle:before {
  left: auto;
  right: 0;
}
.menu-trigger-bar.bottom {
  width: 50%;
  margin-left: 50%;
}

.close-trigger-bar {
  display: block;
  width: 100%;
  height: 4px;
  background-color: #222222;
  position: relative;
}
.close-trigger-bar:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 0%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.close-trigger-bar.left {
  transform: translateX(100px) translateY(-100px) rotate(-45deg);
}
.close-trigger-bar.right {
  transform: translateX(-100px) translateY(-100px) rotate(45deg);
  top: -3px;
}

.logo {
  display: block;
  width: 64px;
  height: 64px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -52px;
  margin-left: -32px;
  text-align: center;
  z-index: 10;
}
.logo span {
  display: block;
  text-align: center;
  line-height: 62px;
  font-size: 72px;
  color: white;
}

.logo-title {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 100%;
  color: #222222;
  font-size: 32px;
  line-height: 82x;
}

.logo-badge {
  position: absolute;
  display: block;
  width: 24px;
  height: 24px;
  top: 6px;
  right: -6px;
  border-radius: 100%;
  background-color: #6295ca;
  font-size: 12px;
  line-height: 2;
  text-align: center;
}

.inner-container, .menu-container {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

.inner-container {
  z-index: 20;
}

.menu-container {
  display: flex;
  align-items: center;
}

.menu {
  display: block;
  width: 100%;
  padding: 20%;
}
.menu li {
  text-align: left;
  display: block;
  padding: 15px 0;
}
.menu a {
  text-decoration: none;
  color: #222222;
  display: inline-block;
  padding: 10px 0;
  position: relative;
}
.menu a:hover:before {
  opacity: 1;
  transform: translateX(0px);
}
.menu a:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 18px;
  height: 4px;
  opacity: 0;
  background-color: #222222;
  transform: translateX(100px);
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}

.menu-bg {
  position: absolute;
  display: block;
  width: 200%;
  left: -53%;
  top: -25%;
  height: 40%;
  background-color: white;
}
.menu-bg.middle {
  top: 29%;
  left: -53%;
  transform: rotate(-45deg) scaleY(0);
}
.menu-bg.top {
  left: -34%;
  top: 0;
  transform: rotate(-45deg) translateY(-152%);
}
.menu-bg.bottom {
  top: 105%;
  transform: rotate(-45deg) translateY(25%);
  left: -20%;
}

#links {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 50px;
  font-size: 13px;
  font-family: tahoma;
  color: #fff;
}

#links a {
  text-decoration: none;
  font-size: 2.3em;
  color: #fff;
}

#twitter {
  position: absolute;
  bottom: 15px;
  right: 20px;
}

#pens {
  position: absolute;
  bottom: 15px;
  left: 20px;
}
</style>
</head>
<body>
<div class="container">
  <span class="menu-trigger">
    <i class="menu-trigger-bar top"></i>
    <i class="menu-trigger-bar middle"></i>
    <i class="menu-trigger-bar bottom"></i>
  </span>
  <span class="close-trigger">
    <i class="close-trigger-bar left"></i>
    <i class="close-trigger-bar right"></i>
  </span>
  <span class="logo">
    <span>
      β¬’
      <i class="logo-title">UI</i>
      <i class="logo-badge">6</i>
    </span>
  </span>
  <div class="inner-container">
      <i class="menu-bg top"></i>
      <i class="menu-bg middle"></i>
      <i class="menu-bg bottom"></i>
    <div class="menu-container">
      <ul class="menu">
        <li>
          <a href="#">Login</a>
        </li>
        <li>
          <a href="#">Create account</a>
        </li>
        <li>
          <a href="#">Support</a>
        </li>
        <li>
          <a href="#">About</a>
        </li>
      </ul>
    </div>
  </div>
</div>
<!-- -->
<div id='links'>
<a id='twitter' href="https://twitter.com/karlovidek" target="_blank"><span class='fa fa-twitter'></span></a>
<div id='pens'><a href="https://codepen.io/karlovidek/" target="_blank"><span class='fa fa-codepen'></span></a> my other Pens</div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TimelineMax.min.js'></script>
      <script>
//OPEN TRIGGER
var openTrigger = $('.menu-trigger');
var openTriggerTop = openTrigger.find('.menu-trigger-bar.top');
var openTriggerMiddle = openTrigger.find('.menu-trigger-bar.middle');
var openTriggerBottom = openTrigger.find('.menu-trigger-bar.bottom');

//CLOSE TRIGGER
var closeTrigger = $('.close-trigger');
var closeTriggerLeft = closeTrigger.find('.close-trigger-bar.left');
var closeTriggerRight = closeTrigger.find('.close-trigger-bar.right');

//LOGO
var logo = $('.logo');

//MENU
var menuContainer = $('.menu-container');
var menu = $('.menu');
var menuTop = $('.menu-bg.top');
var menuMiddle = $('.menu-bg.middle');
var menuBottom = $('.menu-bg.bottom');

//TL
var tlOpen = new TimelineMax({ paused: true });
var tlClose = new TimelineMax({ paused: true });

//OPEN TIMELINE
tlOpen.add("preOpen").
to(logo, 0.4, {
  scale: 0.8,
  opacity: 0,
  ease: Power2.easeOut },
"preOpen").
to(openTriggerTop, 0.4, {
  x: "+80px", y: "-80px", delay: 0.1, ease: Power4.easeIn, onComplete: function () {
    closeTrigger.css('z-index', '25');
  } },
"preOpen").
to(openTriggerMiddle, 0.4, {
  x: "+=80px", y: "-=80px", ease: Power4.easeIn,
  onComplete: function () {
    openTrigger.css('visibility', 'hidden');
  } },
"preOpen").
to(openTriggerBottom, 0.4, {
  x: "+=80px", y: "-=80px", delay: 0.2, ease: Power4.easeIn },
"preOpen").
add("open", "-=0.4").
to(menuTop, 0.8, {
  y: "13%",
  ease: Power4.easeInOut },
"open").
to(menuMiddle, 0.8, {
  scaleY: 1,
  ease: Power4.easeInOut },
"open").
to(menuBottom, 0.8, {
  y: "-114%",
  ease: Power4.easeInOut },
"open").
fromTo(menu, 0.6, {
  y: 30, opacity: 0, visibility: 'hidden' },
{
  y: 0, opacity: 1, visibility: 'visible', ease: Power4.easeOut },
"-=0.2").
add("preClose", "-=0.8").
to(closeTriggerLeft, 0.8, {
  x: "-=100px", y: "+=100px", ease: Power4.easeOut },
"preClose").
to(closeTriggerRight, 0.8, {
  x: "+=100px", y: "+=100px", delay: 0.2, ease: Power4.easeOut },
"preClose");

//CLOSE TIMELINE
tlClose.add("close").
to(menuTop, 0.2, {
  backgroundColor: "#6295ca", ease: Power4.easeInOut, onComplete: function () {
    logo.css('z-index', '26');
    closeTrigger.css('z-index', '5');
    openTrigger.css('visibility', 'visible');
  } },
"close").
to(menuMiddle, 0.2, {
  backgroundColor: "#6295ca", ease: Power4.easeInOut },
"close").
to(menuBottom, 0.2, {
  backgroundColor: "#6295ca", ease: Power4.easeInOut },
"close").
to(menu, 0.6, {
  y: 20, opacity: 0, ease: Power4.easeOut, onComplete: function () {
    menu.css('visibility', 'hidden');
  } },
"close").
to(logo, 0.8, {
  scale: 1, opacity: 1, ease: Power4.easeInOut },
"close", "+=0.2").
to(menuTop, 0.8, {
  y: "-113%",
  ease: Power4.easeInOut },
"close", "+=0.2").
to(menuMiddle, 0.8, {
  scaleY: 0,
  ease: Power4.easeInOut },
"close", "+=0.2").
to(menuBottom, 0.8, {
  y: "23%",
  ease: Power4.easeInOut,
  onComplete: function () {
    menuTop.css('background-color', '#ffffff');
    menuMiddle.css('background-color', '#ffffff');
    menuBottom.css('background-color', '#ffffff');
  } },
"close", "+=0.2").
to(closeTriggerLeft, 0.2, {
  x: "+=100px", y: "-=100px", ease: Power4.easeIn },
"close").
to(closeTriggerRight, 0.2, {
  x: "-=100px", y: "-=100px", delay: 0.1, ease: Power4.easeIn },
"close").
to(openTriggerTop, 1, {
  x: "-=80px", y: "+=80px", delay: 0.2, ease: Power4.easeOut },
"close").
to(openTriggerMiddle, 1, {
  x: "-=80px", y: "+=80px", ease: Power4.easeOut },
"close").
to(openTriggerBottom, 1, {
  x: "-=80px", y: "+=80px", delay: 0.1, ease: Power4.easeOut },
"close");

//EVENTS
openTrigger.on('click', function () {
  if (tlOpen.progress() < 1) {
    tlOpen.play();
  } else {
    tlOpen.restart();
  }
});

closeTrigger.on('click', function () {
  if (tlClose.progress() < 1) {
    tlClose.play();
  } else {
    tlClose.restart();
  }
});
    </script>
</body>
</html>