Animate Foundation 5 Offcanvas Icon

Question

i googled half a day now and tried several solutions but nothing worked for me. So YOU guys are my last chance :( I set up a new website using foundation5. For the mobile version i'm using the offcanvas. I'm now trying to replace the offcanvas burger or at least animate it. I think the out-of-the-box style is not really userfriendly as it doesnt indicates that it also could be used to close the offcanvas again.

I am lookig for something like here: http://sarasoueidan.com/blog/navicon-transformicons/

I allready tried it like

 .menu-icon.arrow.close {
  transform: scale3d(.8,.8,.8);
}

.menu-icon.arrow.close .lines{
    &:before,
    &:after {
      top: 0;
      width: $button-size/1.8;
    }

    &:before { transform: rotate3d(0,0,1,40deg); }
    &:after { transform: rotate3d(0,0,1,-40deg); }
}

with the button like this

    <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon lines-button arrow arrow-left" role="button" aria-label="Toggle Navigation"><span class="lines"></span></a>
    </section>

Any suggestions what I should do?

Answer 1

Here's a jsfiddle using CSS classes taken from the link you provided and some Javascript to add/remove the "close" class http://jsfiddle.net/3cc3T/6/ in order to obtain the animation

$(".lines-button").click(function(){
    $(this).toggleClass('close');
});
$(".exit-off-canvas").click(function(){
    $("#startupButton").removeClass("close");
});