WordPress: Mega Menu

_megamenu.scss

.primary-menu {

  &__wrapper {
	background: rgba(white, 0.3);
	width: 100%;
  }
}


.primary-menu {
  //font-family: sans-serif;
  font-weight: bold;

  @include breakpoint(xlarge) {
	max-width: 1200px;
	margin: auto;
  }

  > .nav > ul {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	list-style-type: none;
	margin: 0;
	padding-top: 1.4rem;
	@include transition;

	.is-stuck & {
	  padding-top: 0;
	}

	> li {

	  > a {
		box-sizing: border-box;
		color: $navy-blue;
		font-weight: 600;
		display: block;
		text-decoration: none;
		padding: .25rem 0;
		margin: 0 1rem;
		border-bottom: 2px solid #fff;
		border-bottom: 2px solid transparent;
		text-transform: uppercase;

		&:hover {
		  color: $primary-color;
		}

	  }
	}
  }
}

/*------------------------------------*\
    #MEGA-MENU
\*------------------------------------*/


.mega-menu {
  position: relative;
  display: flex;
  flex-wrap: wrap;

  &__wrapper {
	background: white;
	box-shadow: 0 4px 4px -2px #777;
	left: 0;
	min-height: 320px;
	padding: 35px 0 45px;
	position: absolute;
	width: 100%;
	z-index: 9000;
	max-height: 0;
	overflow: hidden;
	display: none;

	.is-mega-menu:hover & {
	  display: block;
	}

  }

  &__content {
	box-sizing: border-box;
	padding-left: 33px;
	padding-right: 120px;
	width: 33.333%;
	flex: 0 1 auto;

	h2 {

	}

	/* description */
	p {

	}


  }

  &__subnav {
	margin-right: 0;
	width: 66.6666%;
	flex: 0 1 auto;

	@include breakpoint(xlarge) {
	  max-width: 600px;

	}


	.subnav {
	  list-style-type: none;
	  margin: 25px 0 25px 40px;
	  padding: 0;

	  li {


		a {

		  &:hover {
			color: orange;
		  }
		}
	  }
	}
  }
}

ul.is-mega-sub-menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin-left: 0;

  > li {
	flex: 0 1 auto;
	padding-right: 3rem;

	> a {
	  font-weight: 500;
	}
  }
}

mega-menu.md

Modified from massive blog post explaining this code.

added support for 3rd level menu, must add "is-mega-sub-menu" class to it

Within WordPress

There's quite a bit of setup required in WordPress, in order for this code to work. Again, this is explained within the blog post.

megamenu.php

<?php

/**
 * Custom Mega menu, using http://selfteach.me/mega-menu-wordpress-without-plugin/
 *
 */
?>
<!-- NAV BAR -->
<div class="primary-menu__wrapper">
	<div class="primary-menu">
		<nav class="nav" role="navigation">
			<ul>
				<?php $locations = get_nav_menu_locations();

				// if there's a location for the primary menu
				if ( isset( $locations['primary-menu'] ) ) {
					$menu = get_term( $locations['primary-menu'], 'nav_menu' );


					// if there are items in the primary menu
					if ( $items = wp_get_nav_menu_items( $menu->name ) ) {
						// loop through all menu items to display their content
						foreach ( $items as $item ) {
							// if the current item is not a top level item, skip it
							if ( $item->menu_item_parent != 0 ) {
								continue;
							}
							// get the ID of the current nav item
							$curNavItemID = $item->ID;

							// get the custom classes for the item
							// (determined within the WordPress Appearance > Menu section)
							$classList = implode( " ", $item->classes );
							echo "<li class=\"{$classList}\">";
							echo "<a href=\"{$item->url}\">{$item->title}</a>";

							// build the mega-menu
							// if 'mega-menu'  exists within the class
							if ( in_array( 'is-mega-menu', $item->classes ) ) {
								?>
								<div class="mega-menu__wrapper">
									<div class="mega-menu">
										<div class="mega-menu__content">
											<h2><?= $item->title; ?></h2>
											<p><?= $item->description; ?></p>
											<a href="<?= $item->url; ?>" class="learn-more">Learn More</a>
										</div>

										<div class="mega-menu__subnav">
											<nav>
												<ul class="subnav">
													<?php // cycle through the menu items and get the subnav
													foreach ( $items as $subnav ) {
														if ( $subnav->menu_item_parent == $curNavItemID ) {
															echo "<li><a href=\"{$subnav->url}\">{$subnav->title}</a>";

															$subNavItemID = $subnav->ID;

															if ( in_array( 'is-mega-sub-menu', $subnav->classes ) ) {
																echo "<ul class='is-mega-sub-menu'>";

																foreach ( $items as $subsubnav ) {
																	if ( $subsubnav->menu_item_parent == $subNavItemID ) {
																		echo "<li><a href=\"{$subsubnav->url}\">{$subsubnav->title}</a>";

																		echo "</li>";

																	} // close if
																}

																echo "</ul></li>";

															} // close if
														}
													} // close foreach ?>
												</ul>
											</nav>
										</div>

									</div>
								</div>
								<?php
							}
						}
					}
				}

				?>
			</ul>
		</nav>
	</div><!-- /.primary-menu -->
</div> <!-- /.primary-menu__wrapper -->