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.