Zurb Foundation 中的动态列大小答案

【问题标题】：Dynamic Column Sizing in Zurb FoundationZurb Foundation 中的动态列大小
【发布时间】：2014-02-12 09:45:09
【问题描述】：

我正在使用 Zurb Foundation 5 来构建一个站点。我的网站在屏幕左侧有一个导航面板。打开时，我希望导航区域占据 3 列。实际内容将占用剩余空间。这是我到目前为止的 HTML：

<body>
  <div style="width:100%; max-width:100%; height:100%;">
    <div id="navDiv" class="large-3 columns" style="background-color:#2D2D2D;height:100%;">
      <!-- Nav Items Go Here -->
    </div>
    <div class="large-9 columns">
      <!-- Main Content Goes Here -->
    </div>
  </div>
</body>

每个导航项都有一个图标和一些文本。我需要能够以缩小的方式折叠 navDiv，以便只显示图标。文字消失。同时，我需要增长主要内容区域以占用导航区域使用的空间。我无法弄清楚如何在 zurb 领域做到这一点。据我所知，网格不是动态的。是否可以用网格做我正在尝试的事情？如果有，怎么做？

谢谢！

【问题讨论】：

您的列不在.row 中是否有原因？
你想要什么事件触发resize？例如，从“大”视口变为“中”或单击图标。
@tyler - 点击一个图标。 chrona - 因为我忽略了它:(

标签： css zurb-foundation

【解决方案1】：

如果您想使用 Foundation（带有 jQuery 依赖项）而不使用其他附加组件，您可以使用 jQuery 事件处理程序来切换 Foundation 使用的类。感觉像是 hack，但确实有效。

HTML

<body>
    <button>Toggle sidebar</button>
    <div class="row">
        <div id="navDiv" class="small-2 medium-1 columns">
            <img src="http://dummyimage.com/48"><span>Item 1</span>
        </div>
        <div id="content" class="small-10 medium-11 columns">
            <!-- Content goes here -->
        </div>
    </div>
</body>

CSS

.small-2 span {
    /* Hide text when sidebar is small */
    display: none;
}

JavaScript + jQuery

$(function() {
    $('button').click(function() {
        // Resize sidebar
        var navDiv = $('#navDiv');
        navDiv.toggleClass('small-3');
        navDiv.toggleClass('small-2');
        navDiv.toggleClass('medium-2');
        navDiv.toggleClass('medium-1');

        // Resize content
        var content = $('#content');
        content.toggleClass('small-9');
        content.toggleClass('small-10');
        content.toggleClass('medium-10');
        content.toggleClass('medium-11');
    });
});

Demo on Plunker

【讨论】：

我想过这样做。这也是我能想到的最好的。我希望使它相对，这样我就可以动画 navDiv 缩小。你对此有什么想法吗？无论哪种方式，您都回答了发布的问题。出于这个原因，我奖励你。
感谢您的赏金！例如，当类从 small-3 更改为 small-2 时，Foundation 将更改 width。如果您在 CSS 中添加transition: width 1s ease;（使用适当的供应商前缀，或-prefix-free），您可以为侧边栏设置动画。