仅在移动设备上进行画布外导航？

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