Menu icon Foundation
Off-canvas toggle hamburger animation

Hi there, 

 

I'm having a little bit of difficulty toggling the class/animation for an animated hamburger icon while using the built in off-canvas menu plug-in (Foundation 6.2.0).  I'm able to toggle the animation one way using the jquery below, but when if comes to trying to toggle the animation (or remove the class) the other way, the animation isn't being initiated.  

I've got a feeling its something to do with the class im trying to target for the click listener (".js-off-canvas-exit"), but I can't be sure; I'm new to coding, and not so hot with Javascript/jQuery, so any help would be greatly appreciated!

 

Thank you,

Jamie

$(".menu-button").click(function(){
    $(this).toggleClass('is-active');
});

$(".js-off-canvas-exit").click(function(){
    $("#menuButton").removeClass("is-active");
});

off canvasoff canvas menuhamburgeranimationjqueryjavascript

Hi there, 

 

I'm having a little bit of difficulty toggling the class/animation for an animated hamburger icon while using the built in off-canvas menu plug-in (Foundation 6.2.0).  I'm able to toggle the animation one way using the jquery below, but when if comes to trying to toggle the animation (or remove the class) the other way, the animation isn't being initiated.  

I've got a feeling its something to do with the class im trying to target for the click listener (".js-off-canvas-exit"), but I can't be sure; I'm new to coding, and not so hot with Javascript/jQuery, so any help would be greatly appreciated!

 

Thank you,

Jamie

$(".menu-button").click(function(){
    $(this).toggleClass('is-active');
});

$(".js-off-canvas-exit").click(function(){
    $("#menuButton").removeClass("is-active");
});
Rafi Benkual over 3 years ago

I think you're close. I changed the class to target the .menu-icon for both functions and it works!

http://codepen.io/rafibomb/pen/ONOweo

Jordan B almost 3 years ago

Thanks for this! I think they should make this standard behavior, it's easy for the hamburger button to get out of sync with the menu.

James almost 3 years ago

That was so interesting to read. Passed on by a friend; I feel like my mind has had a refreshing shower. Thankyou for that!