首页 文章

Zurb基金会动态柱尺寸设计

提问于
浏览 次
0

我正在使用Zurb Foundation 5来 Build 一个网站 . 我的网站在屏幕左侧有一个导航面板 . 打开时，我希望导航区域占用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领域做到这一点 . 据我所知，网格不是动态的 . 是否有可能做我正在尝试的网格？如果是这样，怎么样？

谢谢！

css zurb-foundation

1 回答

  • 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

    回复于

相关问题