menu - 仅在移动设备上进行基础 Canvas 外导航？

Question

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

这是非 Canvas 导航的我的导航代码:

<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

不幸的是，您需要使用单独的导航集才能实现所需的功能。但是，要同时使用这两种方法，您需要对网站进行结构设置以适应非 Canvas 菜单，但只有在使用小型菜单时才调用非 Canvas 菜单。您必须隐藏网站主要部分(在“主要部分”内)使用的菜单，以免菜单太小以避免显示多个菜单。

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

这是一个结构外观的基本示例:

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