Foundation 5 - 将顶部导航与画布外结合？答案

【问题标题】：Foundation 5 - combine top navigation with off canvas?Foundation 5 - 将顶部导航与画布外结合？
【发布时间】：2014-03-10 17:07:49
【问题描述】：

我是 Foundation 的新手，我曾多次使用它，但总是忽略它，因为它似乎没有很多可用的导航选项。所有可用选项都适用于顶部菜单。左边还是右边呢？我通常需要构建具有复杂导航的网站，并且通常需要顶部菜单和左侧菜单，包括搜索、下拉菜单和其他子菜单。

如果可以同时拥有顶部菜单和左侧列的画布外导航，我可能会使用基础。有谁知道这是否可行，我会去哪里寻求帮助？

【问题讨论】：

你确定你真的看了吗？ this website 怎么样，您可以在 their Library 上找到更多示例（目前有 181 个示例）......从这 181 个示例中，没有什么与您想要完成的任务相似？
是的，我想是的。该示例只有顶部导航，没有任何响应式侧导航

标签： jquery css zurb-foundation

【解决方案1】：

您需要始终让您可以访问这两个菜单，但只能使用 show-for-small 和 show-for-medium-up 类显示它们。

您需要使用单独的导航集来实现您想要的。但是，为了同时使用这两者，您需要构建您的网站以适应画布外菜单并在 main-section 中构建顶部导航。

我们最近在公司网站上遇到了这个问题，我们只想调用一次导航，但事实证明这非常困难。如果您想查看代码的实时版本，请随时使用our site 作为参考。（我们有一些类可以隐藏 medium-and-up 的画布外菜单，但您可以将其删除）。

这是结构外观的基本示例：

  <div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">                

      <nav class="tab-bar">
        <section class="left-small">
          <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
         </section>

        <section class="middle tab-bar-section">
          <h1 class="title"><a href="/home"><img id="logoSmall" src="/images/main/header_logo_small.png" /></a></h1>
        </section>
      </nav>

      <aside class="left-off-canvas-menu">
        <ul class="off-canvas-list">
          <li><label>Menu</label></li>
          <li><a>link1</a></li>
          <li><a>link2</a></li>
          <li><a>link2</a></li>
        </ul>
      </aside>



      <section class="main-section">

        <!-- All of your website goes here -->
        <!-- Including the top navigation and all that jazz -->

      </section>

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

【讨论】：