財団スライドナビゲーション（オフキャンバス）

< -最も外側のdivの:!ページレイアウト- >
<DIVクラス= "オフキャンバス -wrap「データoffcanvas>
< -内部要素:!「ツールバー」コンテンツ（アイコン、リンク、説明、など） - >
<DIVクラス= "インナーラップ ">
<ナビゲーションクラス= "タブ・バー ">
<区間クラス= "左小 ">
<Aクラス= "left-off -canvas-toggle menu-icon"のhref = "#">の<span> </ span>を</ A>
</部>

<区間クラス= "真ん中のタブ区切りバー・セクション」>
<H1クラス= "タイトル">オフ・キャンバスの例</ H1>
</部>
</ナビゲーション>

<！ -スライドメニュー- >
<別にクラス= "左オフ -canvasメニュー」>
<！ -リンクまたは他のものを追加します。ここで- >
<ULクラス= "オフキャンバス -list試験」>
<李> <ラベル>見出し< / label>は</李>
<李> <aのHREF = "#">リンク1 </ A> </ LI>
<李> <aのHREF = "#">リンク2 </ A> </ LI>
...
</ UL>
</脇>

<！ -メインコンテンツ- >
<区間クラス= "メイン・セクション 」>
<H3> Loremのイプサム</ H3 >
<P> ... </ P>
</部>

<！ -メニューを閉じます- >
<Aクラス= "exit-off -canvas"> </ A>

</ DIV> <！ - 内部コンテンツを終了- >
</ DIV> <！ - エンドスライドメニュー- >

<！ -初期化財団JS - >
<スクリプト>
$（ドキュメント）.ready（関数（）{
$（ドキュメント）.foundation（）;
}）
</スクリプト>