Modified from massive blog post explaining this code.
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.
Instantly share code, notes, and snippets.
-
Star
0
(0)
You must be signed in to star a gist -
Fork
0
(0)
You must be signed in to fork a gist
-
-
Save sophiawzey/d94238e510ff26f9db4006164adaed73 to your computer and use it in GitHub Desktop.
WordPress: Mega Menu
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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; | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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 --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment