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类和一些Javascript添加/删除“关闭”类http://jsfiddle.net/3cc3T/6/以获取动画

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

Animate Foundation 5 Offcanvas图标

1 个答案: