Question

我正在使用Zurb Foundation工作。内容将根据屏幕大小进行不同的呈现。如果正在电话上查看内容，则导航结构将使用例如画布外的导航项。为了演示，这里有fiddle：http://jsfiddle.net/LFUvM/5/。

在我的例子中，你可以看到有

Content Goes Here

我的问题是，我不想在HTML中写三次实际内容。我的一些内容非常大。有没有办法a）在所有三个视图中共享内容b）仍然使用画布外导航选项？

感谢你！

Answer 1

我在<section role="main"></section>

之后使用<a class="exit-off-canvas" href="#"></a>做了一个例子

您可以查看here

Answer 2

如果可以重新构建HTML，您可以通过以下设置实现此目的：

<div class="off-canvas-wrap show-for-small-only">
    <div class="inner-wrap">
      <nav class="tab-bar show-for-small-only">
        <section class="tab-bar-section">
          <h1 class="title">Foundation</h1>
        </section>

        <section class="right-small">
          <a class="right-off-canvas-toggle menu-icon"><span></span></a>
        </section>
      </nav>
      <aside class="right-off-canvas-menu">
        <ul class="off-canvas-list">
          <li><label>Users</label></li>
          <li><a href="#">Hari Seldon</a></li>
        </ul>
      </aside>

      <a class="exit-off-canvas"></a>
    </div>
</div>

<div>
    <h1 class="show-for-small-only">Phone</h1>
    <h1 class="show-for-medium-only">Medium</h1>
    <h1 class="show-for-large-only">Large</h1>
    Content Goes here
</div>

这是工作jsFiddle。

Zurb基金会的幕外和可视性

2 个答案: