仅在移动设备上建立画布外导航

Question

我正在使用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>

提前感谢！

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

Answer 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;
    }
}