CodePen Embed - Menu Toggle

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Lato|Martel:900" rel="stylesheet">
  <!-- font-family: 'Martel', serif;
       font-family: 'Abril Fatface', cursive;
       font-family: 'Lato', sans-serif; -->
  <link href="css/core.css" type="text/css" rel="stylesheet">
  <link href="css/index.css" type="text/css" rel="stylesheet">
  <title>Sachem North Economics and Finance Club</title>
</head>
<body>
  <header>
    <!-- <nav>
      <ul class="nav-list">
        <li class="index index-link"><a href="index.html">Home</a></li>
        <li class="about-us about-us-link"><a href="about-us.html">About Us</a></li>
        <li class="resources resources-link"><a href="resources.html">Resources</a></li>
        <li class="events events-link"><a href="events.html">Events</a></li>
        <li class="contact contact-link"><a href="contact.html">Contact</a></li>
      </ul>
    </nav> -->
    <div class="navbar">
      <div class="nav-toggle-wrapper">
        <div class="nav-toggle">
          <div class="triple-bar-wrap">
            <div class="triple-bar triple-bar-1"></div>
            <div class="triple-bar triple-bar-2"></div>
            <div class="triple-bar triple-bar-3"></div>
          </div>
        </div>
      </div>
      <div class="logo-container"><a href=""><img src="" alt=""></a></div>
    </div>
    <nav>
      <ul class="nav-list">
        <li class="index index-link nav-list-item"><a href="index.html" class="nav-list-item-link nav-list-item-link-1">Home</a></li>
        <li class="about-us about-us-link nav-list-item"><a href="about-us.html" class="nav-list-item-link nav-list-item-link-2">About Us</a></li>
        <li class="resources resources-link nav-list-item"><a href="resources.html" class="nav-list-item-link nav-list-item-link-3">Resources</a></li>
        <li class="events events-link nav-list-item"><a href="events.html" class="nav-list-item-link nav-list-item-link-4">Events</a></li>
        <li class="contact contact-link nav-list-item"><a href="contact.html" class="nav-list-item-link nav-list-item-link-5">Contact</a></li>
      </ul>
    </nav>

  </header>

  <script src="js/core.js"></script>
  <script src="js/index.js"></script>
</body>
</html>

:root {
  /* TODO: change these into RGBA later! */
  --background: #38444bff;
  --color1: #437b6fff;
  --color2: #93d5a9ff;
  --accent: #e8d79aff;
  --red: #e77159ff;
  --light: #fdf5e6ff;
  --lightHovered: #5e5b55ff;
  --black: black;
  /* --circleLeft: 15px; */
}

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

body {
  background-color: var(--background);
  font-family: "Lato", sans-serif;
}

header {
  background-color: var(--red);
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 80px;
}

.navbar {
  height: 100%;
}

.nav-toggle-wrapper {
  position: absolute;
  display: block;
  height: 60px;
  width: 60px;
  background-color: var(--accent);
  /* background-color: var(--red); */
  border-radius: 50%;
  /* top: 50%; */
  top: 40px;
  /* left: var(circleLeft); */
  left: 15px;
  transform: translate(0, -50%);

  transform: translate3d(0, -50%, 0);
  z-index: 0;
}

.nav-toggle {
  /* background-color: var(--accent); */
  position: absolute;
  display: block;
  height: 60px;
  width: 60px;
  left: 0;
  right: 0;
  border-radius: 50%;
}

.triple-bar-wrap {
  position: absolute;
  display: block;
  width: 60%;
  height: 60%;
  margin-top: 50%;
  margin-left: 50%;
  transform: translate(-50%, -50%);
}

.triple-bar {
  position: absolute;
  height: 2px;
  width: 100%;
  background-color: var(--black);
}

.triple-bar-1 {
  top: 30%;
  transform: translate(0, -50%);
  /* transform: rotate( 45deg); */
}

.triple-bar-2 {
  top: 50%;
  transform: translate(0, -50%);
}

.triple-bar-3 {
  top: 70%;
  transform: translate(0, -50%);
}

nav {
  top: 235px;
  left: 50px;
  position: absolute;
  transform: translate(0, -50%);
}

ul {
  list-style: none;
}

.nav-list-item {
  transform: translate(-1000%, 0);
}

.nav-list-item-link {
  opacity: 0;
}

/* This staggers the appearance of the list items */

.show-list:nth-child(1n) {
  animation-delay: 500ms;
}

.show-list:nth-child(2n) {
  animation-delay: 600ms;
}

.show-list:nth-child(3n) {
  animation-delay: 700ms;
}

.show-list:nth-child(4n) {
  animation-delay: 800ms;
}

.show-list:nth-child(5n) {
  animation-delay: 900ms;
}

.show-list:nth-child(1n) .show-list-link {
  animation-delay: 500ms;
}

.show-list:nth-child(2n) .show-list-link {
  animation-delay: 600ms;
}

.show-list:nth-child(3n) .show-list-link {
  animation-delay: 700ms;
}

.show-list:nth-child(4n) .show-list-link {
  animation-delay: 800ms;
}

.show-list:nth-child(5n) .show-list-link {
  animation-delay: 900ms;
}

/*
.hide-list:nth-child(5n){
  animation-delay: 500ms ;
}

.hide-list:nth-child(4n){
  animation-delay: 600ms;
}

.hide-list:nth-child(3n){
  animation-delay: 700ms;
}

.hide-list:nth-child(2n){
  animation-delay: 800ms;
}

.hide-list:nth-child(1n){
  animation-delay: 900ms;
}

.hide-list:nth-child(5n) .hide-list-link{
  animation-delay: 500ms ;
}

.hide-list:nth-child(4n) .hide-list-link{
  animation-delay: 600ms;
}

.hide-list:nth-child(3n) .hide-list-link{
  animation-delay: 700ms;
}

.hide-list:nth-child(2n) .hide-list-link{
  animation-delay: 800ms;
}

.hide-list:nth-child(1n) .hide-list-link{
  animation-delay: 900ms;
} */

a {
  text-decoration: none;
  color: var(--black);
  font-size: 1.5em;
  line-height: 40px;
}

a:hover {
  /* TODO: change and adjust this hovered value */
  color: var(--lightHovered);
}

/* ANIMATIONS HERE */

/* THIS RIGHT HERE IS THE PROBLEM*/
@keyframes largeball {
  0% {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    /* top: 50%; */
    top: 40px;
    left: 15px;
    transform: translate3d(0, -50%, 0%);
  }
  100% {
    top: 235px;
    left: -185px;
    width: 450px;
    height: 450px;
    transform: translate3d(0, -50%, 0%);
  }
}

@keyframes smallball {
  0% {
    top: 235px;
    left: -185px;
    width: 450px;
    height: 450px;
    transform: translate3d(0, -50%, 0%);
  }

  100% {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    /* top: 50%; */
    top: 40px;
    left: 15px;
    transform: translate3d(0, -50%, 0%);
  }
}

@keyframes showlist {
  0% {
    transform: translate(-30%, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes hidelist {
  0% {
    transform: translate(0, 0);
  }
  99% {
    transform: translate(-30%, 0);
  }
  100% {
    transform: translate(-1000%, 0);
  }
}

@keyframes showlistlink {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 100;
  }
}

@keyframes hidelistlink {
  0% {
    opacity: 100;
  }
  100% {
    opacity: 0;
  }
}

@keyframes downbox {
  0% {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  100% {
    left: 225px;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

@keyframes upbox {
  0% {
    left: 225px;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  100% {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

@keyframes slanttopbar {
  0% {
    top: 30%;
    transform: translate(0, -50%);
  }

  100% {
    height: 4px;
    width: 80%;
    border-radius: 4px;
    top: 50%;
    transform: translate(-50%, -50%);
    transform: rotate(45deg);
  }
}

@keyframes unslanttopbar {
  0% {
    height: 4px;
    width: 80%;
    border-radius: 4px;
    top: 50%;
    transform: translate(-50%, -50%);
    transform: rotate(45deg);
  }

  100% {
    top: 30%;
    transform: translate(0, -50%);
  }
}

@keyframes slantbottombar {
  0% {
    top: 70%;
    transform: translate(0, -50%);
  }

  100% {
    height: 4px;
    width: 80%;
    border-radius: 4px;
    top: 50%;
    transform: translate(-50%, -50%);
    transform: rotate(-45deg);
  }
}

@keyframes unslantbottombar {
  0% {
    height: 4px;
    width: 80%;
    border-radius: 4px;
    top: 50%;
    transform: translate(-50%, -50%);
    transform: rotate(-45deg);
  }

  100% {
    top: 70%;
    transform: translate(0, -50%);
  }
}

@keyframes middledisappear {
  0% {
    opacity: 100;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes middlereappear {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 100;
  }
}

/* CLASSES THAT APPLY ANIMATIONS HERE */

.large-ball,
.small-ball,
.show-list,
.hide-list,
.hide-list-link,
.show-list-link,
.down-box,
.up-box,
.slant-top-bar,
.unslant-top-bar,
.slant-bottom-bar,
.unslant-bottom-bar,
.middle-disappear,
.middle-reappear {
  animation-duration: 500ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.hide-list,
.hide-list-link {
  animation-duration: 150ms;
}

.small-ball,
.up-box,
.unslant-top-bar,
.unslant-bottom-bar,
.middle-reappear {
  animation-duration: 700ms;
}

.large-ball {
  animation-name: largeball;
}

.small-ball {
  animation-name: smallball;
  /* animation-timing-function: linear; */
}

.hide-list {
  animation-name: hidelist;
}

.show-list {
  animation-name: showlist;
}

.hide-list-link {
  animation-name: hidelistlink;
}

.show-list-link {
  animation-name: showlistlink;
}

.down-box {
  animation-name: downbox;
}

.up-box {
  animation-name: upbox;
}

.slant-top-bar {
  animation-name: slanttopbar;
}

.unslant-top-bar {
  animation-name: unslanttopbar;
}

.slant-bottom-bar {
  animation-name: slantbottombar;
}

.unslant-bottom-bar {
  animation-name: unslantbottombar;
}

.middle-disappear {
  animation-name: middledisappear;
}

.middle-reappear {
  animation-name: middlereappear;
}

// Core JavaScript

// Here I'm just defining the objects for later use
var navToggleWrapper = document.querySelector(".nav-toggle-wrapper"); //The circle
var navToggle = document.querySelector(".nav-toggle"); //The trigger
var tripleBar = document.querySelector(".triple-bar");
var tripleBar1 = document.querySelector(".triple-bar-1");
var tripleBar2 = document.querySelector(".triple-bar-2");
var tripleBar3 = document.querySelector(".triple-bar-3");
var navList = document.querySelector(".nav-list"); //the ul selecting the list
var navListItem = document.querySelectorAll(".nav-list-item"); // the list items
var navListItemLink =document.querySelectorAll(".nav-list-item-link"); //the links within the list items

// var deleteClasses = function(){
// // This is when the menu is being closed
//   console.log("true");
//   navToggleWrapper.classList.add("small-ball");
//   navToggleWrapper.classList.remove("large-ball");
//
//   navToggle.classList.add("up-box");
//   navToggle.classList.remove("down-box");
//
//   tripleBar1.classList.add("unslant-top-bar");
//   tripleBar1.classList.remove("slant-top-bar");
//
//   tripleBar2.classList.add("middle-reappear");
//   tripleBar2.classList.remove("middle-disappear");
//
//   tripleBar3.classList.add("unslant-bottom-bar");
//   tripleBar3.classList.remove("slant-bottom-bar");
// }

var moveList = function() {

  var wrapperConfirmShow = navToggleWrapper.classList.contains("large-ball");
  var wrapperConfirmHide = navToggleWrapper.classList.contains("small-ball");

  if ( wrapperConfirmShow == true){

    // setTimeout(deleteClasses(), 5000);

    // This is when the menu is being closed
      console.log("true");
      navToggleWrapper.classList.add("small-ball");
      navToggleWrapper.classList.remove("large-ball");

      navToggle.classList.add("up-box");
      navToggle.classList.remove("down-box");

      tripleBar1.classList.add("unslant-top-bar");
      tripleBar1.classList.remove("slant-top-bar");

      tripleBar2.classList.add("middle-reappear");
      tripleBar2.classList.remove("middle-disappear");

      tripleBar3.classList.add("unslant-bottom-bar");
      tripleBar3.classList.remove("slant-bottom-bar");

    //This is for the navigation list, to iterate and APPLY

    for (var i = 0; i < navListItem.length; i++) {
      navListItem[i].classList.add("hide-list");
      navListItem[i].classList.remove("show-list");
      navListItemLink[i].classList.add("hide-list-link");
      navListItemLink[i].classList.remove("show-list-link");
    }

  } else {
    // This is when the menu is opened
    console.log("false");
    navToggleWrapper.classList.add("large-ball");
    navToggle.classList.add("down-box");

    tripleBar1.classList.add("slant-top-bar");
    tripleBar2.classList.add("middle-disappear");
    tripleBar3.classList.add("slant-bottom-bar");

    for (var i = 0; i < navListItem.length; i++) {
      navListItem[i].classList.add("show-list");
      navListItemLink[i].classList.add("show-list-link");
    }

    if (wrapperConfirmHide == true){
      navToggleWrapper.classList.remove("small-ball");
      navToggle.classList.remove("up-box");
      tripleBar1.classList.remove("unslant-top-bar");
      tripleBar2.classList.remove("middle-reappear");
      tripleBar3.classList.remove("unslant-bottom-bar");

      for (var i = 0; i < navListItem.length; i++) {
        navListItem[i].classList.remove("hide-list");
        navListItemLink[i].classList.remove("hide-list-link");
      }
    }
  }
}



navToggle.addEventListener("click", moveList);

Run Pen

This Pen is owned by Paul O'Brien on CodePen. It is a fork of this Pen.

See more by @paulobrien on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.