ファンデーション垂直（分割レイアウト）オフキャンバスは画面全体とモバイル画面のみをカバーします

ファンデーション6を使用してオフキャンバスを作成しようとしています。アイデアは、私は2つの基本的な列のアプリケーションを持っている、私は、画面がオフキャンバスの効果を使用して小さいときにのみ、左にあるものを非表示にしようとするが、まずはこの作業を取得する必要があります：画面の幅と最初の列はスクリーン上でのみ有効になります。デスクトップ画面では、両方の列が1つの画面に表示されます。ファンデーション垂直（分割レイアウト）オフキャンバスは画面全体とモバイル画面のみをカバーします

アイデアは、基本的な例のようなメニューだけでなく、コンテンツを持つことです。効果を説明するにはどうすればよいですか？

<body> 
    <div class="off-canvas-wrapper"> 
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper> 
     <div class="off-canvas position-left" id="offCanvas" data-off-canvas> 

     <!-- Close button --> 
     <button class="close-button" aria-label="Close menu" type="button" data-close> 
      <span aria-hidden="true">&times;</span> 
     </button> 

     <!-- Page1 content --> 

     </div> 

     <div class="off-canvas-content" data-off-canvas-content> 
     <!-- Page2 content --> 
     </div> 
    </div> 
    </div> 
</body>

チェックこのコード： https://jsfiddle.net/q1e45fzz/16/

出典

2016-04-17 victor sosa

を私はオフキャンバスの概念を実装するには、http://www.lukew.com/ff/entry.asp?1514で説明しました –

広い画面にデフォルトで表示されるように、オフキャンバス部分を得るために、あなたは「明らかに-のために、」あなたのオフキャンバスにクラスを追加する必要があります面積はreveal-for-mediumです。試してみてください：

<div class="off-canvas-wrapper"> 
     <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper> 
      <div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium"> 
       <div class="title-bar-left"> 
        <button class="menu-icon" type="button" data-open="offCanvasLeft"></button> 
        <span class="title-bar-title">Open sidebar</span> 
       </div> 
      </div> 
      <div class="off-canvas position-left reveal-for-medium" id="offCanvasLeft" data-off-canvas > 
       <h3>Side area</h3> 
       <p>Lorem ipsum dolor sit amet</p> 
      </div> 
      <div id="widemenu" class="top-bar"> 
       <div class="top-bar-left"> 
        Top area 
       </div> 
      </div> 
      <div class="off-canvas-content" data-off-canvas-content> 
       <div class="row column"> 
        <h3>Main content</h3> 
        <p>Lorem ipsum dolor sit amet</p> 
        <img src="http://placehold.it/2000x3000" alt="" /> 
       </div> 
      </div> 
     </div> 
    </div>

オフキャンバス領域に任意のコンテンツを配置できます。それは、リスト、メニュー、またはナビゲーションであることに限定される必要はありません。上記の例では、ヘッダとコンテンツの段落を置いています。

オフキャンバス領域の幅を調整するには、デフォルトのFoundation CSSを上書きする必要があります。この場合、セレクタは.position-left.reveal-for-medium ~ .off-canvas-contentです。ですから、このような何かをするだろう（あなたが財団のCSSの後にそれをロードする必要があります）あなたは財団のスタイルを上書きするために使用し、あなたのCSSに：

.position-left.reveal-for-medium ~ .off-canvas-content { 
    margin-left: 50%; 
}

あなたは、小さな画面オフキャンバス要素の幅を調整することができますそのように、is-open-leftクラスを調整することで：

.is-open-left { 
    transform: translateX(90%); 
}

移動の周りの人々の割合の数字は正確にあなたが探している効果に対応します。どちらの場合でも、これは標準のCSSオーバーライドに過ぎません。使用している機能に応じて、ChromeインスペクタまたはFirebugを使用して、レイアウト内の要素を検査し、オーバーライドする必要がある特定のCSSセレクタを見つけることをお勧めします。検査官の使用方法の詳細については

、以下を参照してください https://developers.google.com/web/tools/chrome-devtools/ と： http://getfirebug.com/faq/#Is_there_some_basic_description_of_how_Firebug_works

出典

2016-06-29 17:12:10 hightempo

ほぼあります。まず、> 50/50の分割が必要です。この例では20/80のようになり、小さな画面では2番目が画面の100％になる必要があります（現在は右の列のみが画面の100％です）。つまり、ボタンをクリックすると左に移動して右の列を非表示にしてから、別のボタンをクリックして右の列に戻り、左を非表示にすることができます。ご協力いただきありがとうございます。 –

カラムの幅を調整するには、デフォルトのFoundation CSSをオーバーライドするだけです。 Foundationに固有の問題はありません。インスペクタのDOM要素を見て、幅がどのように設定されているかを確認してください。この場合は、オーバーライドする必要のあるセレクタ '.position-left.reveal-for-medium〜.off-canvas-content'です。私はそれを記述するために私の答えにもう少し詳細を追加します。 – hightempo

それは小さい画面のためにも働くので、メディアクエリを必要とし、それは>媒体のためだけでなければなりません。 –

ファンデーション垂直（分割レイアウト）オフキャンバスは画面全体とモバイル画面のみをカバーします

答えて

関連する問題