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

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

谢谢！

来源

2014-01-09 user3101431

不幸的是，您需要使用单独的导航组才能达到您想要的效果。但是，为了同时使用这两种功能，您需要构建网站以适应画外菜单，但只有在小菜单上调用画布外菜单时才需要。您将在网站的主要部分（在“主要部分”内）使用的菜单必须隐藏很小，以避免显示多个菜单。

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

这里的结构是如何看一个简单的例子：

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

来源

2014-02-21 23:57:55 Dylan

隐藏导航如下：

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

，并显示它usind在小型设备（150像素 - 600像素）媒体查询：

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

来源

2014-12-10 16:13:19 Ronin

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

回答

相关问题