Invested Traveler: Header Menu

Documentation:

HTML:

<header class="header"> <div class="container"> <?php if (get_field('logo', 'option')): ?> <a class="navbar-brand" href="<?php bloginfo( 'url' ) ?>/" rel="homepage"><img src="<?php the_field('logo', 'option') ?>" alt="<?php bloginfo( 'name' ) ?> Logo" /></a> <?php endif; ?> <!-- Header Menu --> <div id="menu-header"> <button id="menu-button"> <h4>Menu</h4> <div id="menu-lines"> <span class="menu-line-1"></span> <span class="menu-line-2"></span> <span class="menu-line-3"></span> <span class="menu-line-4"></span> </div> </button> <div id="main-menu-container"> <div id="main-menu-inner"> <div id="close-menu"> <span class="close-menu-line-1"></span> <span class="close-menu-line-2"></span> </div> <?php wp_nav_menu( array( 'menu' => 'Main Menu', 'container' => 'nav', 'container_class' => 'main-nav', 'theme_location' => 'raindroptheme', 'items_wrap' => '<ul>%3$s</ul>' ) ); ?> </div> </div> </div> </div> </header>

CSS:

/* Header Menu */ .header { position: absolute; width: 100%; z-index: 2; top: 0; } .admin-bar .header { top: 32px; } #menu-header { float: right; position: relative; } #menu-button span { display: block; width: 40px; margin-bottom: 7px; height: 1px; border-bottom: 1px solid #fff; } #menu-button { background: none; border: none; margin-top: 20px; position: absolute; right: 0; top: 0; z-index: 1; transition: 0.6s; width: 140px; } #menu-button h4 { color: #fff; float: left; display: inline-block; margin: 0; letter-spacing: 2px; text-transform: uppercase; margin-top: 5px; margin-right: 20px; } #menu-lines { float: right; display: inline-block; } .navbar-brand { padding: 15px 20px; background: #fff; } #main-menu-container { height: 0px; overflow: hidden; z-index: 2; transition: 0.6s; width: 330px; position: absolute; right: -40px; ul { float: right; width: 100%; } } #close-menu { float: right; width: 29px; height: 31px; // background-image: url('../images/invested-traveler/close-menu-btn.png'); background-size: cover; background-position: center center; margin: 20px 0; cursor: pointer; span { display: block; width: 40px; height: 1px; border-bottom: 1px solid #fff; } } .close-menu-line-1 { transform: rotate(45deg); transform-origin: top left; } .close-menu-line-2 { transform: rotate(135deg) translateY(9px) translateX(48px); transform-origin: top right; } #main-menu-inner { background-color: rgba(53, 148, 199, 0.8); color: #fff; text-align: right; padding: 0 50px; float: left; width: 100%; li { float: right; width: 100%; } } #main-menu-container ul { list-style: none; padding: 0; } #main-menu-container li { font-family: $header-font-stack; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; font-size: 16px; position: relative; a { color: #fff; &:hover { color: #e4e4e4; } } } #main-menu-container li.menu-item-has-children > a:after { content: ' '; display: block; width: 45px; height: 3px; background-color: white; position: absolute; right: -50px; top: 10px; opacity: 0; transition: 0.6s; } #main-menu-container li.menu-item-has-children.submenu-open > a:after { opacity: 1; } #main-menu-container .sub-menu li a { text-transform: none; letter-spacing: 2px; font-style: italic; font-weight: 100; color: rgba(255, 255, 255, 0.9); } #menu-header.menu-header-active #menu-button { opacity: 0.0; } #main-menu-container ul.sub-menu { height: 0; margin: 0; overflow: hidden; } #main-menu-container .submenu-open ul.sub-menu { height: auto; margin-top: 10px; } @media (max-width: 768px) { #menu-button h4 { display: none; } }

JS:

// Header Menu $('#menu-button, #close-menu').click(function(){ var height = $('#main-menu-inner').height(); var parent_elem = $('#menu-header').toggleClass('menu-header-active'); height = height + 30; if ($(parent_elem).hasClass('menu-header-active')) { $('#main-menu-container').css('height', height + 'px'); } else { $('#main-menu-container').css('height', '0px'); } }); $('#main-menu-container li.menu-item-has-children > a').on('click', function () { $(this).parents('li').toggleClass('submenu-open'); $('#main-menu-container').css('height', 'auto'); });