Foundation 5 画布外转换答案

【问题标题】：Foundation 5 off-canvas transformationFoundation 5 画布外转换
【发布时间】：2013-12-24 19:42:10
【问题描述】：

有没有办法将 Foundation 5 中的画布外导航转换为侧边栏导航？例如，Foundation 5 官方文档使用可见性类，但这不是因为有两个单独的导航而违背了目的吗？

我想用 Foundation 5 实现这样的目标：

【问题讨论】：

这是我必须在短期内为我当前客户的项目解决的问题。在粗略地浏览了画布外样式和 JS 之后，这似乎是不可能的。我可以想象的唯一解决方法是使用 Interchange，但这可能比拥有两个导航和使用可见性类更糟糕。我会向 Zurb 询问他们的意见，但我觉得我最终会在接下来的两到三周内写一个替代画布的替代品。
这是一个绝妙的问题。 Zurb 的方法确实超出了整个目的。我会看看我是否可以放一些代码来改变画布外导航的用途
我不太确定您所采用的方法，但我写了一篇关于我的一个网站的非画布方法 - responsivedesign.is/articles/…

标签： css responsive-design zurb-foundation

【解决方案1】：

您可以通过覆盖画布外 CSS 规则来实现。这是解决方案的开始：

@media (min-width: 700px) {
    .left-off-canvas-menu,
    .right-off-canvas-menu {
        position: static;
        transform: none;
        float: left;
    }
    .move-right > .inner-wrap {
        transform: none;
    }
    .main-section {
        overflow: hidden;
    }
}

您可以在this jsfiddle 上使用此代码。

干杯，托马斯。

【讨论】：

【解决方案2】：

解决方案实际上要简单得多：

@media (min-width: 700px) {
    div.off-canvas-wrap {
      > .inner-wrap {
        @include translate3d($off-canvas-width,0,0);
      }
    }
    div.exit-off-canvas { display: none; }
}

【讨论】：