Question

我正在使用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领域做到这一点。据我所知，网格不是动态的。是否有可能做我正在尝试的网格？如果是这样，怎么样？

感谢你！

Answer 1

如果要使用Foundation（具有jQuery依赖性）而不使用其他附加组件，则可以使用jQuery事件处理程序来切换Foundation使用的类。感觉就像是黑客，但它确实有效。

<强> 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

Zurb基金会动态柱尺寸设计

1 个答案: