Menu icon Foundation
Better foundation hamburger icon

What do you guys think of this hamburger icon http://joren.co/sass-burger/? It's a really clean icon that adds a nice animation and is stateful, so it gives the user an idea of when something's open/closed. The mixin is also cleaner than Foundation's current hamburger mixin, but that's probably because of the missing offcanvas boolean.

hamburgericonmenutoggleoffcanvas

What do you guys think of this hamburger icon http://joren.co/sass-burger/? It's a really clean icon that adds a nice animation and is stateful, so it gives the user an idea of when something's open/closed. The mixin is also cleaner than Foundation's current hamburger mixin, but that's probably because of the missing offcanvas boolean.

Jamie Edwards over 3 years ago

Really like this burger!  Thank you very much! 

Would you guys have any idea how to toggle this animation when using the off canvas menu?

Currently I have this JS which is able to toggle the animation one way, but I can't get it go return to normal when targeting the "js-off-canvas-exit".

Hopefully you can help...

Thank you!!

Jamie

 

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

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

Rafi Benkual about 5 years ago

Ya that's nice. Have you added into an existing Foundation menu?