Skip to content

Instantly share code, notes, and snippets.

@billerickson
Created July 15, 2016 21:36
Show Gist options
  • Save billerickson/7b79c8ffe335415d48c71cd26bac8db9 to your computer and use it in GitHub Desktop.
Save billerickson/7b79c8ffe335415d48c71cd26bac8db9 to your computer and use it in GitHub Desktop.
<?php
/**
* Register Mobile Menu
*
*/
function ea_register_mobile_menu() {
register_nav_menu( 'mobile-menu', esc_html__( 'Mobile Menu', 'ea' ) );
}
add_action( 'after_setup_theme', 'ea_register_mobile_menu' );
/**
* Display Mobile Menu
*
*/
function ea_display_mobile_menu() {
if( has_nav_menu( 'mobile-menu' ) ) {
echo '<div id="sidr-mobile-menu">';
wp_nav_menu( array( 'theme_location' => 'mobile-menu' ) );
echo '</div>';
}
}
add_action( 'wp_footer', 'ea_display_mobile_menu' );
// Mobile Menu
$('.mobile-menu-toggle').sidr({
name: 'sidr-mobile-menu',
side: 'right',
});
$('.sidr .menu-item-has-children').prepend('<span class="submenu-toggle">' );
$('.sidr .menu-item-has-children.current-menu-item').addClass('submenu-active');
$('.sidr .menu-item-has-children > .submenu-toggle').click(function(e){
$(this).parent().toggleClass('submenu-active');
e.preventDefault();
});
$('.sidr a').click(function(){
$.sidr('close', 'sidr-mobile-menu');
});
$(document).mouseup(function (e){
var container = $("#sidr-mobile-menu");
if (!container.is(e.target) && container.has(e.target).length === 0) {
$.sidr('close', 'sidr-mobile-menu');
}
});
/* Mobile Menu
--------------------------------------------- */
.sidr {
background: #2E1E12;
display:block;
position:fixed;
top:0;
height:100%;
z-index:999999;
width:345px;
overflow-x:hidden;
overflow-y:auto;
}
.sidr.right {
left:auto;
padding-left: 2px;
right:-345px;
}
.sidr.left {
left:-345px;
padding-right: 2px;
right:auto;
}
.sidr a {
background: #62483B;
color: #fff;
display: block;
font-size: 12px;
font-weight: 400;
line-height: 28px;
margin-bottom: 2px;
padding: 10px 10px 10px 20px;
text-decoration: none;
text-transform: uppercase;
}
.sidr li.menu-item-has-children {
position: relative;
}
.sidr li.menu-item-has-children > .submenu-toggle {
background: #73584B;
cursor: pointer;
width: 48px;
height: 48px;
position: absolute;
top: 0;
right: 0;
z-index: 99;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.sidr li.menu-item-has-children > .submenu-toggle:hover,
.sidr li.menu-item-has-children.submenu-active > .submenu-toggle {
background: #7F635E;
}
.sidr li.menu-item-has-children > .submenu-toggle:before {
content: '';
position: absolute;
left: 50%;
top: 50%;
margin: -4px 0 0 -4px;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 0 4px 8px;
border-color: transparent transparent transparent #ffffff;
}
.sidr ul li ul {
display: none;
}
.sidr ul li.submenu-active > ul {
display: block;
}
.sidr ul li.submenu-active > .submenu-toggle:before,
.sidr ul li.current-menu-item > .submenu-toggle:before {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.sidr ul li ul li a {
background: #7F635E;
padding-left: 40px;
}
.sidr-open.admin-bar #wpadminbar {
position: fixed;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment