ファンデーションのオフキャンバスナビゲーションはモバイルでのみですか？

Question

私は財団を使ってオフキャンバスナビゲーションを行っていますが、オフキャンバスのナビゲーションをモバイルデバイスに表示したいのですが、デスクトップブラウザでは標準のナビゲーションメニューを使用します。私の質問は、デスクトップナビゲーションのためのオフキャンバスナビゲーションのコードを再利用することができますか、または2つの個別のナビゲーションメニューをコーディングする必要がありますか？ここで

は私のNAVコードは、オフキャンバスナビゲーションのために次のようになります。事前に

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

や小型機器（150ピクセル - 600PX）のそれusindメディアクエリを表示します。

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