Burger Menu

by akmiecik

HTML

<div id="the_menu" class="menu">
<nav class="menu__nav">
    <ul class="menu__list r-list">
      <li class="menu__group">
        <a href="trading" class="menu__link r-link">Trading</a>
      </li>
      <li class="menu__group">
        <a href="#arbitrage" class="menu__link r-link">Arbitrage</a>
      </li>
      <li class="menu__group">
        <a href="#technology" class="menu__link r-link">Technology</a>
      </li>
      <li class="menu__group">
        <a href="#purchasing" class="menu__link r-link">Purchasing</a>
      </li>
     </ul>
  </nav>
  <button class="menu__toggle r-button" type="button" onclick="this.classList.toggle('opened');this.setAttribute('aria-expanded', this.classList.contains('opened'))" aria-label="Main Menu">
        <svg width="100" height="100" viewBox="0 0 100 100">
        <path class="line line1" d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058" />
        <path class="line line2" d="M 20,50 H 80" />
        <path class="line line3" d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942" />
        </svg>
  </button>
  </div>

CSS

li {display: inline;}
.r-button {
  background-color: transparent;
  padding: 0;
  border-width: 0;
  border-style: unset;
  border-color: var(--uirButtonBorderColor);
  cursor: pointer;
}

.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;
}
.r-link {
  display: inline-flex !important;
  color: #000000 !important;
  text-decoration: none !important;
}
.r-list {
  padding-left: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  list-style: none !important;
}
.menu {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9999;
}

.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_activated .menu__nav {
    flex-grow: 1;
    opacity: 1;
    will-change: menu_activated;
    transition-duration: .2s;
    transition-delay: .3s;
    position: relative;
    top: 1vh;
    background: red;
    z-index: 0;
    max-height: 7vh;
}
.menu__toggle::before { /* behind menu svg toggle */
  content: "";
  width: 1em;
  height: 1em;
  font-size: 3rem;
  border-radius: 10%;
  position: absolute;
  bottom: 24px;
  left: calc(50% - .5em);
  z-index: -1;
  will-change: width, height;
  transition: transform 1s cubic-bezier(0.04, -0.1, 0.29, 0.98),
  width 1s cubic-bezier(0.04, -0.1, 0.29, 0.98),
  height 1s cubic-bezier(0.04, -0.1, 0.29, 0.98);
  padding:20px;
}

.menu__toggle:focus {
  outline: none;
  outline-offset: var(--menuHaburgerOutlineOffset, 5px);
}

.menu_activated {
    height: 100%;
    top: 4vh;
}

.menu_activated .menu__nav {
    flex-grow: 1;
    opacity: 1;
    will-change: menu_activated;
    transition-duration: .2s;
   ...

JavaScript

(function(){
    // 'use strict';
    class Menu {
      constructor(settings) {
        this.menuRootNode = settings.menuRootNode;
        this.isOpened = false;
      }
       changeMenuState(menuState) {
        return this.isOpened = !menuState;
      }
  
    }
  
    const menuClassesNames = {
      rootClass: 'menu',
      activeClass: 'menu_activated',
      toggleClass: 'menu__toggle',
    }
    
    const jsMenuNode = document.querySelector(`.${menuClassesNames.rootClass}`);
    const demoMenu = new Menu ({
      menuRootNode: jsMenuNode
    });
     
    function toggleMenu(event) {
         demoMenu.menuRootNode.classList.toggle(`${menuClassesNames.activeClass}`);
    }
  
    jsMenuNode.querySelector(`.${menuClassesNames.toggleClass}`).addEventListener('click', toggleMenu);
    
  })();