Animate Foundation 5 Offcanvas 图标

Question

我现在用谷歌搜索了半天并尝试了几种解决方案，但对我来说没有任何效果。所以你们是我最后的机会:( 我使用 foundation5 建立了一个新网站。对于移动版本，我使用的是 offcanvas。我现在正在尝试替换 offcanvas 汉堡或至少为其制作动画。我认为开箱即用的样式并不是真正的用户友好，因为它并不表示它也可以用于再次关闭 offcanvas。

我正在寻找类似这里的东西：http://sarasoueidan.com/blog/navicon-transformicons/

我已经试过了

 .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); }
}

使用这样的按钮

    <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>

有什么建议吗？

Answer 1

这是一个 jsfiddle，使用 CSS classes 从你提供的 link 和一些 Javascript 到 add/remove "close" class http://jsfiddle.net/3cc3T/6/ 为了获得动画

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

Animate Foundation 5 Offcanvas 图标

Animate Foundation 5 Offcanvas Icon

mobile

zurb-foundation

zurb-foundation-5