Archived topic
Animated Hamburger Problem
15 replies · Started by PxProd on November 14, 2022
Hi there,
i followed this GP guide for an animated burger icon. for some reason i did not get it to work so i searched for some help here in the forums. i found this extented guide which did it for me (almost, needed to do some adjusments), but for some reason the icon animation also triggers when i'am clicking on a navigation item within the flyout menu.
I'am using the standard mobile header with off-canvas panel.
any idea whats the problem? is the gp guide still up to date?
Hi there,
sorry for the delay, this topic slipped through the net.
See this line in the script:
menuItems = document.querySelectorAll('nav ul a')
What happens if you change it to:
menuItems = document.querySelectorAll('nav ul li:not(.menu-item-has-children) > a')
hi david,
no problem, thanks for your input. that did it, thanks! :)
however, i am still wondering if the guide is no longer up to date or if i have done something wrong. is the guide still up to date?
Nothing you did wrong.
It just needed tweaking to your sites needs ie. the sub menu parent items having just a # link.
hi david,
ahh i see, got it!
now i activated the sticky header, but the animation does not work within sticky.
any idea why? the markup seems to be the same.
Oh no :)
can you share a link to where i can see this ?
hi david,
sure, if its not in my first post anymore, here it comes again:
Hi there,
Can you share the full javascript code that you're using now so I can take a closer look?
Let me know :)
hi tom,
sure, got it from the 'extended guide' of my first post:
// BURGER MENU ICON ANIMATION
// =============================================================================
add_action( 'wp_footer', function() {
?>
<script>
var hamburgers = document.querySelectorAll(".hamburger"),
menuToggle = document.querySelector( '.menu-toggle' ),
menuItems = document.querySelectorAll('nav ul li:not(.menu-item-has-children) > a'),
htmlEl = document.documentElement;
menuToggle.addEventListener("click", function() {
for ( var h = 0; h < hamburgers.length; h++ ) {
hamburgers[h].classList.toggle("is-active");
}
} );
for ( var i = 0; i < menuItems.length; i++ ) {
menuItems[i].addEventListener( 'click', function( e ) {
var closest_nav = this.closest( 'nav' );
if ( closest_nav.classList.contains( 'toggled' ) || htmlEl.classList.contains( 'slide-opened' ) ) {
var url = this.getAttribute( 'href' );
var hash = url.split('#')[1];
// Open the sub-menu if the link has no destination
if ( '#' === url ) {
e.preventDefault();
for ( var h = 0; h < hamburgers.length; h++ ) {
hamburgers[h].classList.toggle("is-active");
}
}
}
}, false );
}
var checkHamburgers = function() {
var openedMobileMenus = document.querySelectorAll( '.toggled, .has-active-search' );
for ( var i = 0; i < openedMobileMenus.length; i++ ) {
var menuToggle = openedMobileMenus[i].querySelector( '.menu-toggle' );
if ( menuToggle && menuToggle.offsetParent === null ) {
if ( openedMobileMenus[i].classList.contains( 'toggled' ) ) {
var hamburgers = document.querySelectorAll(".hamburger");
for ( var h = 0; h < hamburgers.length; h++ ) {
hamburgers[h].classList.remove("is-active");
}
}
}
}
}
window.addEventListener( 'resize', checkHamburgers, false );
window.addEventListener( 'orientationchange', checkHamburgers, false );
</script>
<?php
} );
// BURGER MENU ICON ANIMATION ADDITION FOR OFF-CANVAS
// =============================================================================
add_action( 'wp_enqueue_scripts', function() {
$script =
'var slideoutToggles = document.querySelectorAll( ".slideout-toggle a" ),
hamburgers = document.querySelectorAll( ".hamburger" ),
closeElements = document.querySelectorAll( ".slideout-overlay, .slideout-exit" );
for ( var i = 0; i < slideoutToggles.length; i++ ) {
slideoutToggles[i].addEventListener( "click", function( e ) {
for ( var h = 0; h < hamburgers.length; h++ ) {
if ( ! hamburgers[h].classList.contains( "is-active" ) ) {
hamburgers[h].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 );
} );Could you try the below instead?:
// BURGER MENU ICON ANIMATION
// =============================================================================
add_action( 'wp_footer', function() {
?>
<script>
var hamburgers = document.querySelectorAll(".hamburger"),
menuToggles = document.querySelectorAll( '.menu-toggle' ),
menuItems = document.querySelectorAll('nav ul li:not(.menu-item-has-children) > a'),
htmlEl = document.documentElement;
for ( var menuToggle = 0; menuToggle < menuItems.length; menuToggle++ ) {
menuToggles[ menuToggle ].addEventListener("click", function() {
for ( var h = 0; h < hamburgers.length; h++ ) {
hamburgers[h].classList.toggle("is-active");
}
} );
}
for ( var menuItem = 0; menuItem < menuItems.length; menuItem++ ) {
menuItems[ menuItem ].addEventListener( 'click', function( e ) {
var closest_nav = this.closest( 'nav' );
if ( closest_nav.classList.contains( 'toggled' ) || htmlEl.classList.contains( 'slide-opened' ) ) {
var url = this.getAttribute( 'href' );
var hash = url.split('#')[1];
// Open the sub-menu if the link has no destination
if ( '#' === url ) {
e.preventDefault();
for ( var h = 0; h < hamburgers.length; h++ ) {
hamburgers[h].classList.toggle("is-active");
}
}
}
}, false );
}
var checkHamburgers = function() {
var openedMobileMenus = document.querySelectorAll( '.toggled, .has-active-search' );
for ( var openedMobileMenu = 0; openedMobileMenu < openedMobileMenus.length; openedMobileMenu++ ) {
var menuToggle = openedMobileMenus[ openedMobileMenu ].querySelector( '.menu-toggle' );
if ( menuToggle && menuToggle.offsetParent === null ) {
if ( openedMobileMenus[ openedMobileMenu ].classList.contains( 'toggled' ) ) {
var hamburgers = document.querySelectorAll(".hamburger");
for ( var h = 0; h < hamburgers.length; h++ ) {
hamburgers[h].classList.remove("is-active");
}
}
}
}
}
window.addEventListener( 'resize', checkHamburgers, false );
window.addEventListener( 'orientationchange', checkHamburgers, false );
</script>
<?php
} );
// BURGER MENU ICON ANIMATION ADDITION FOR OFF-CANVAS
// =============================================================================
add_action( 'wp_enqueue_scripts', function() {
$script =
'var slideoutToggles = document.querySelectorAll( ".slideout-toggle a" ),
hamburgers = document.querySelectorAll( ".hamburger" ),
closeElements = document.querySelectorAll( ".slideout-overlay, .slideout-exit" );
for ( var slideoutToggle = 0; slideoutToggle < slideoutToggles.length; slideoutToggle++ ) {
slideoutToggles[ slideoutToggle ].addEventListener( "click", function( e ) {
for ( var h = 0; h < hamburgers.length; h++ ) {
if ( ! hamburgers[h].classList.contains( "is-active" ) ) {
hamburgers[h].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,
that did it, thank you. :)
edit: sorry i was too fast. the animation is working now for sticky, but if you open the sidemenu and click outside to close it, the animation is not triggering back (like it did before).
Can you re-share your URL so I can take a look?
Thanks!
hi tom,
sure, see attached below:
Can you try the updated code here?: https://generatepress.com/forums/topic/animated-hamburger-problem/#post-2426499
hi tom,
that did it, thanks! :)
