cssでのMENU表示

Menuでいいやつがないかと探してたところ lopan.jp   
にCSSでできる良さそうなのが載っていましたので試してみました。

Sample

参考元 lopan.jp    

詳細な説明は link先     にわかりやすくまとめられていますので、そちらで確認してください。
ポイントはチェックの使い方と メニュー内容は見えない位置に配置している点でしょうか
見えない位置というのは、ブラウザの外の左側に配置しておくというもの

もし、ここでそのまま使用すると記事の左ではなく
ブラウザ左上隅に表示されてしまい記事とは関係ないような位置表示になります
これを解決するためiframeをつかって表示させてます
iframeなしで任意の場所でメニューを出すなら、ブラウザ上部とかのほうがいいかもしれません
でもワイド画面を考えると左右の余裕があるので左右も捨てがたいんですよね

あとはメニュー表示した際に内容もスライドしたい場合は contents以下に記載するとよいです

      <div class="contents">
      移動させたい内容はここに記載！
      </div>