CodePen Embed - Mike's Magical Mobile Mega Menu ✨

<header class="nav-top">
  <span class="hamburger material-icons" id="ham">menu</span>
</header>

<nav class="nav-drill">
  <ul class="nav-items nav-level-1">
    <li class="nav-item nav-expand">
      <a class="nav-link nav-expand-link" href="#">
        Menu
      </a>
      <ul class="nav-items nav-expand-content">
        <li class="nav-item">
          <a class="nav-link" href="#">
            Level 2
          </a>
        </li>
        <li class="nav-item nav-expand">
          <a class="nav-link nav-expand-link" href="#">
            Menu
          </a>
          <ul class="nav-items nav-expand-content">
            <li class="nav-item">
              <a class="nav-link" href="#">
                Level 3
              </a>
            </li>
            <li class="nav-item nav-expand">
              <a class="nav-link nav-expand-link" href="#">
                Menu
              </a>
              <ul class="nav-items nav-expand-content">
                <li class="nav-item">
                  <a class="nav-link" href="#">
                    Level 4
                  </a>
                </li>
                <li class="nav-item nav-expand">
                  <a class="nav-link nav-expand-link" href="#">
                    Menu
                  </a>
                  <ul class="nav-items nav-expand-content">
                    <li class="nav-item">
                      <a class="nav-link" href="#">
                        Level 5 Directory
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">
                        Level 5 Contact
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">
                        Level 5 Quick links
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">
                        Level 5 Launchpad
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">
                    Level 4 Directory
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">
                    Level 4 Contact
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">
                    Level 4 Quick links
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">
                    Level 4 Launchpad
                  </a>
                </li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                Level 3 Directory
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                Level 3 Contact
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                Level 3 Quick links
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                Level 3 Launchpad
              </a>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            Level 2 Directory
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            Level 2 Contact
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            Level 2 Quick links
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            Level 2 Launchpad
          </a>
        </li>
      </ul>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">
        Directory
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">
        Contact
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">
        Quick links
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">
        Launchpad
      </a>
    </li>
  </ul>
</nav>

@import 'https://fonts.googleapis.com/css?family=Fira+Sans:300,400';
@import 'https://fonts.googleapis.com/icon?family=Material+Icons';

$black: #252525;
$white: #fff;
$grey: #eaeaea;

$primary-color: #20b49c;
$primary-color-dark: darken( $primary-color, 10% );
$primary-color-tint-1: lighten( $primary-color, 10% );
$primary-color-tint-2: lighten( $primary-color, 20% );
$primary-color-tint-3: lighten( $primary-color, 30% );
$primary-color-tint-4: lighten( $primary-color, 40% );
$primary-color-tint-5: lighten( $primary-color, 50% );
$primary-font: "Fira Sans", Arial, sans-serif;

$link-color: $primary-color;

* { box-sizing: border-box; }
body {
  background-color: $primary-color;
  font-family: $primary-font;
  font-size: 16px;
  line-height: 1.875em;
  &::after {
    content: '';
    position: absolute;
    z-index: 99;
    background-color: rgba($primary-color-dark, 0.8);
    height: 100vh;
    width: 100vw;
    transition: 0.4s;
    opacity: 0;
    visibility: hidden;
  }
}
a {
  text-decoration: none;
}
.nav-top {
  display: flex;
  align-items: center;
  position: fixed;
  z-index: 101;
  padding: 10px 20px;
  width: 100%;
  height: 50px;
  background-color: $primary-color-dark;
  
  .hamburger {
    margin-left: auto;
    color: $white;
    cursor: pointer;
  }
}
.nav-drill {
  margin-top: 50px;
  transform: translateX(100%);
}
.nav-is-toggled {
  .nav-drill {
    transform: translateX(0);
  }
  &::after {
    opacity: 1;
    visibility: visible;
  }
}

// ---------------------------------------
// important stuff starts here

$nav-width: 250px;
$nav-padding: 0.875em 1em;
$nav-border-color: $primary-color-tint-5;
$nav-background-color: $white;
$nav-icon-font: 'Material Icons';
$nav-icon-arrow-right: 'chevron_right';
$nav-icon-arrow-left: 'chevron_left';

$nav-level-border-color: $primary-color;
$nav-level-background-color: $primary-color-tint-5;

$nav-level3-background-color: $primary-color-tint-4;
$nav-level4-background-color: $primary-color-tint-3;
$nav-level5-background-color: $primary-color-tint-2;

.nav {
  &-drill {
    display: flex;
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    width: $nav-width;
    height: 100vh;
    background-color: $nav-background-color;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    transition: 0.45s;
  }
  
  &-items {
    flex: 0 0 100%;
  }
  
  &-item {
    &:not(:last-child) {
      border-bottom: solid 1px $nav-border-color;
    }
  }
  
  &-link {
    display: block;
    padding: $nav-padding;
    background-color: $nav-background-color;
    color: $link-color;
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 300;
  }
  
  &-expand {
    &-content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: translateX(100%);
      background-color: $nav-level-background-color;
      transition: 0.3s;
      visibility: hidden;
      
      .nav-item {
        &:not(:last-child) {
          border-bottom: solid 1px $nav-level-border-color;
        }
      }

      .nav-link {
        background-color: $nav-level-background-color;
      }

      .nav-back-link {
        display: flex;
        align-items: center;
        background-color: $primary-color !important;
        color: $white;
        
        &::before {
          content: $nav-icon-arrow-left;
          margin-right: 0.5em;
          font-family: $nav-icon-font;
        }
      }
    }
    
    &-link {
      display: flex;
      justify-content: space-between;
      
      &::after {
        content: $nav-icon-arrow-right;
        flex: 0 1 auto;
        font-family: $nav-icon-font;
      }
    }
    
    &.active {
      > .nav-expand-content {
        transform: translateX(0);
        visibility: visible;
      }
    }
    
    // quick example for other level colours
    .nav-expand-content {
      background-color: $nav-level-background-color;
      .nav-link {
        background-color: $nav-level-background-color;
      }
      .nav-expand-content {
        background-color: $nav-level3-background-color;
        .nav-link {
          background-color: $nav-level3-background-color;
        }
        .nav-expand-content {
          background-color: $nav-level4-background-color;
          .nav-link {
            background-color: $nav-level4-background-color;
          }
          .nav-expand-content {
            background-color: $nav-level5-background-color;
            .nav-link {
              background-color: $nav-level5-background-color;
            }
          }
        }
      }
    }
  }
}

View Compiled

console.clear()

const navExpand = [].slice.call(document.querySelectorAll('.nav-expand'))
const backLink = `<li class="nav-item">
  <a class="nav-link nav-back-link" href="javascript:;">
    Back
  </a>
</li>`

navExpand.forEach(item => {
  item.querySelector('.nav-expand-content').insertAdjacentHTML('afterbegin', backLink)
  item.querySelector('.nav-link').addEventListener('click', () => item.classList.add('active'))
  item.querySelector('.nav-back-link').addEventListener('click', () => item.classList.remove('active'))
})


// ---------------------------------------
// not-so-important stuff starts here

const ham = document.getElementById('ham')
ham.addEventListener('click', function() {
  document.body.classList.toggle('nav-is-toggled')
})

View Compiled

This Pen is owned by tiffany choong on CodePen.

See more by @tiffachoo on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.