Foundation 5 画布外转换

Posted 2023-03-06

【中文标题】Foundation 5 画布外转换

【英文标题】：Foundation 5 off-canvas transformation

【发布时间】：2013-12-24 19:42:10

【问题描述】：

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

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

【问题讨论】：

这是我必须在短期内为我当前客户的项目解决的问题。在粗略地浏览了画布外样式和 JS 之后，这似乎是不可能的。我可以想象的唯一解决方法是使用 Interchange，但这可能比拥有两个导航和使用可见性类更糟糕。我会向 Zurb 询问他们的意见，但我觉得我最终会在接下来的两到三周内写一个替代画布的替代品。

这是一个绝妙的问题。 Zurb 的方法确实超出了整个目的。我会看看我是否可以放一些代码来改变画布外导航的用途

我不太确定您所采用的方法，但我写了一篇关于我的一个网站的非画布方法 - responsivedesign.is/articles/…

【参考方案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;