仅在移动设备上进行基础画布外导航？答案

【问题标题】：Foundation off-canvas navigation on mobile only?仅在移动设备上进行基础画布外导航？
【发布时间】：2014-01-28 13:53:39
【问题描述】：

我正在使用 Foundation 制作画布外导航，但是，我只希望画布外导航显示在移动设备上，在桌面浏览器上我将使用标准导航菜单。我的问题是，我可以将画布外导航中的代码重用于桌面导航，还是必须编写 2 个单独的导航菜单？

这是我的非画布导航的导航代码：

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

    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li {% if page.slug == "index" %}class="active"{% endif %}>
          <a href="/">Home</a>
        </li>
        <li>{% nav site, no_wrapper: true %}</li>
      </ul>
    </aside>

<section class="main-section">
PAGE CONTENT HERE
</section>

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

  </div>
</div>

提前致谢！

【问题讨论】：

标签： menu navigation responsive-design zurb-foundation

【解决方案1】：

不幸的是，您需要使用单独的导航集才能实现您想要的。但是，为了同时使用这两者，您需要构建您的网站以适应画布外菜单，但仅在您使用小菜单时才调用画布外菜单。您将在网站主要部分（在“主要部分”内）使用的菜单必须隐藏得很小，以避免显示多个菜单。

我们最近在公司网站上遇到了这个问题，我们只想调用一次导航，但事实证明这非常困难。

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

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

      <nav class="tab-bar show-for-small">
        <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 navigation you want to show on medium-and-up-->

      </section>

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

【讨论】：

【解决方案2】：

隐藏导航如下：

.tab-bar, .left-off-canvas-menu {
    visibility: hidden;
}

并在小型设备（150px - 600px）上使用媒体查询显示它：

@media only screen and (min-width: 150px) and (max-width: 600px){   /* only --> tells older browsers to ignore this code*/

    /* DISPLAY ALTERNATIVE NAVIGATION IN MOBILE MODE */
    .tab-bar, .left-off-canvas-menu {
        display: block;
        visibility: visible;
    }
}

【讨论】：