-1

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

我在这里寻找类似的东西：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>

有什么建议我应该怎么做？

4

1 回答 1

0

这是一个 jsfiddle，它使用从您提供的链接中获取的 CSS 类和一些 Javascript 来添加/删除“关闭”类http://jsfiddle.net/3cc3T/6/以获得动画

$(".lines-button").click(function(){
    $(this).toggleClass('close');
});
$(".exit-off-canvas").click(function(){
    $("#startupButton").removeClass("close");
});
于 2015-01-17T19:09:47.883 回答