Archived topic
Hamburger menu style
20 replies · Started by Paul on May 5, 2019
Viewing posts 16–21 of 21
Hi there,
Did you try my updated code above yet?
Hi Tom,
The updated code has been added but now the menu doesn't work at all.
Just to recap here's the CSS and functions.php that have been added
CSS
/*!
* Hamburgers
* @description Tasty CSS-animated hamburgers
* @author Jonathan Suh @jonsuh
* @site https://jonsuh.com/hamburgers
* @link https://github.com/jonsuh/hamburgers
*/
.hamburger {
padding: 15px 15px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible; }
.hamburger:hover {
opacity: 0.7; }
.hamburger.is-active:hover {
opacity: 0.7; }
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
background-color: #000; }
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative; }
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 40px;
height: 4px;
background-color: #000;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease; }
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block; }
.hamburger-inner::before {
top: -10px; }
.hamburger-inner::after {
bottom: -10px; }
/*
* Collapse
*/
.hamburger--collapse .hamburger-inner {
top: auto;
bottom: 0;
transition-duration: 0.13s;
transition-delay: 0.13s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse .hamburger-inner::after {
top: -20px;
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
.hamburger--collapse .hamburger-inner::before {
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse.is-active .hamburger-inner {
transform: translate3d(0, -10px, 0) rotate(-45deg);
transition-delay: 0.22s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--collapse.is-active .hamburger-inner::after {
top: 0;
opacity: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }
.hamburger--collapse.is-active .hamburger-inner::before {
top: 0;
transform: rotate(-90deg);
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }
/*Hamburger menu slideout*/
.hamburger {
position: absolute;
top: 10px;
right: 10px;
z-index: 222222;
}
.slideout-toggle, button.slideout-exit {
display: none !important;
}
.hamburger-box {
width: 20px;
height: 12px;
}
.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
width: 20px;
height: 2px;
}
.hamburger-inner:before {
top: -5px;
}
.hamburger-inner:after {
bottom: -5px;
}
.hamburger--collapse .hamburger-inner:after {
top: -10px;
}
.hamburger-inner,
.hamburger-inner:after,
.hamburger-inner:before,
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner:after,
.hamburger.is-active .hamburger-inner:before {
background-color: #fff;
}
#mobile-header .menu-toggle, li.slideout-toggle {
display: none;
}
.hamburger--collapse.is-active .hamburger-inner {
transform: translate3d(0,-5px,0) rotate(-45deg);
}
functions.php
/**
* Hamburger menu flyout
*/
add_action( 'generate_after_footer', function() {
?>
<div class="hamburger hamburger--collapse">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<?php
} );
add_action( 'wp_enqueue_scripts', function() {
$script =
'var hamburgers = document.querySelectorAll( ".hamburger" ),
closeElements = document.querySelectorAll( ".slideout-overlay, .slideout-exit" );
for ( var h = 0; h < hamburgers.length; h++ ) {
hamburgers[h].addEventListener( "click", function( e ) {
if ( ! hamburgers[h].classList.contains( "is-active" ) {
generateOffside.open();
this.classList.add("is-active");
}
} );
};
for ( var e = 0; e < closeElements.length; e++ ) {
closeElements[e].addEventListener( "click", function( e ) {
for ( var h = 0; h < hamburgers.length; h++ ) {
hamburgers[h].classList.remove("is-active");
};
} );
};';
wp_add_inline_script( 'generate-offside', $script );
} );K, here's the working code.
CSS:
/*!
* Hamburgers
* @description Tasty CSS-animated hamburgers
* @author Jonathan Suh @jonsuh
* @site https://jonsuh.com/hamburgers
* @link https://github.com/jonsuh/hamburgers
*/
.hamburger {
padding: 15px 15px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible; }
.hamburger:hover {
opacity: 0.7; }
.hamburger.is-active:hover {
opacity: 0.7; }
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
background-color: #000; }
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative; }
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 40px;
height: 4px;
background-color: #000;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease; }
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block; }
.hamburger-inner::before {
top: -10px; }
.hamburger-inner::after {
bottom: -10px; }
/*
* Collapse
*/
.hamburger--collapse .hamburger-inner {
top: auto;
bottom: 0;
transition-duration: 0.13s;
transition-delay: 0.13s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse .hamburger-inner::after {
top: -20px;
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
.hamburger--collapse .hamburger-inner::before {
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse.is-active .hamburger-inner {
transform: translate3d(0, -10px, 0) rotate(-45deg);
transition-delay: 0.22s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--collapse.is-active .hamburger-inner::after {
top: 0;
opacity: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }
.hamburger--collapse.is-active .hamburger-inner::before {
top: 0;
transform: rotate(-90deg);
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }
/*Hamburger menu slideout*/
.hamburger {
position: absolute;
top: 10px;
right: 10px;
z-index: 222222;
}
.slideout-toggle, button.slideout-exit {
display: none !important;
}
.hamburger-box {
width: 20px;
height: 12px;
}
.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
width: 20px;
height: 2px;
}
.hamburger-inner:before {
top: -5px;
}
.hamburger-inner:after {
bottom: -5px;
}
.hamburger--collapse .hamburger-inner:after {
top: -10px;
}
.hamburger-inner,
.hamburger-inner:after,
.hamburger-inner:before,
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner:after,
.hamburger.is-active .hamburger-inner:before {
background-color: #fff;
}
#mobile-header .menu-toggle, li.slideout-toggle {
display: none;
}
.hamburger--collapse.is-active .hamburger-inner {
transform: translate3d(0,-5px,0) rotate(-45deg);
}PHP:
/**
* Hamburger menu flyout
*/
add_action( 'generate_after_footer', function() {
?>
<div class="hamburger hamburger--collapse">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<?php
} );
add_action( 'wp_enqueue_scripts', function() {
$script =
'var hamburgers = document.querySelectorAll( ".hamburger" ),
closeElements = document.querySelectorAll( ".slideout-overlay, .slideout-exit" );
for ( var h = 0; h < hamburgers.length; h++ ) {
hamburgers[h].addEventListener( "click", function( e ) {
if ( ! this.classList.contains( "is-active" ) ) {
generateOffside.open();
this.classList.add("is-active");
}
} );
};
for ( var e = 0; e < closeElements.length; e++ ) {
closeElements[e].addEventListener( "click", function( e ) {
for ( var h = 0; h < hamburgers.length; h++ ) {
hamburgers[h].classList.remove("is-active");
};
} );
};';
wp_add_inline_script( 'generate-offside', $script );
} );Hi Tom,
Thanks for the updated code.
I've replaced the custom CSS and functions.php and the hamburger menu now responds to a click event but it isn't moving out to the left in line as per https://demo.kaliumtheme.com/main-dark/ but instead the nav menu is drawing up as vertically stacked items. Also the close button isn't responding.
Ah, I'm sorry - I misunderstood. I thought you wanted the animation to always trigger the off canvas panel.
To have it display your regular menu like that on desktop and the off canvas on mobile is much more complicated, unfortunately. It requires even more custom javascript.
I can see if there's a quick solution, but the complete solution might be too complicated to provide within the forum. Will let you know.
Ok thanks Tom.
This archived topic is closed to new replies.
