<divid="wrapper"><!-- ハンバーガーメニュー --><divid="btn-gnavi"><span></span><span></span><span></span><!-- メニュー --><navid="global-navi"><ul><li><ahref="">aaa</a></li><li><ahref="">bbb</a></li><li><ahref="">ccc</a></li></ul></nav></div><!-- 透明な背景ウィンドウ(閉じる専用) --><divid="closeWindow"></div></div>

/* ナビ */#wrapper#global-navi{position:fixed;top:0;right:-300px;width:300px;height:100%;padding-top:50px;padding-bottom:50px;background:#333;font-size:16px;box-sizing:border-box;z-index:2;transition:.3sease-in-out;/*アニメーション表示用の設定*/-webkit-transform:translateX(0%);transform:translateX(0%);}#wrapper#global-naviul{padding:0px;}#wrapper#global-naviulli{display:block;padding:9px28px;border-bottom:1pxdotted#555;background-color:#444;}#wrapper#global-naviullia{text-decoration:none;color:#ddd;width:99%;display:block;}/* ハンバーガーボタン */#wrapper#btn-gnavi{position:fixed;top:20px;right:20px;width:30px;height:24px;z-index:3;box-sizing:border-box;cursor:pointer;-webkit-transition:all400ms;transition:all400ms}#wrapper#btn-gnavispan{position:absolute;width:30px;height:4px;background:#666;border-radius:10px;-webkit-transition:all400ms;transition:all400ms}#wrapper#btn-gnavispan:nth-child(1){top:0;}#wrapper#btn-gnavispan:nth-child(2){top:10px;}#wrapper#btn-gnavispan:nth-child(3){top:20px;}/* 閉じる用のカバーウィンドウ */#closeWindow{display:none;/*はじめは隠しておく*/position:fixed;top:0;/*全体を覆う*/left:0;width:100%;height:100%;background:black;opacity:0;}/* カバーウィンドウ開閉アニメ用キーフレーム */@keyframeswinOpen{from{opacity:0;}to{opacity:.5;}}@keyframeswinClose{from{opacity:.5;}to{opacity:0;}}

<!-- なでしこ3ライブラリ -->
<script src="https://nadesi.com/v3/3.0.70/release/wnako3.js?run" defer></script>
<script type="なでしこ">
＃---初期設定-----
ナビフラグ＝オフ。

＃---イベント-----
「#btn-gnavi」をクリックした時には
　もし、ナビフラグ＝オンならば、
　　　ナビ閉じる。
　違えば、
　　　ナビ開く。
　ここまで。
ここまで。
「#closeWindow」をクリックした時には
　　ナビ閉じる。
ここまで。

＃---ナビ開閉-----
●ナビ開く
　ナビフラグ＝オン。
　「#closeWindow」に{
　　　"animation": "winOpen 0.3s linear 0s",
　　　"display":"block",
　　　"opacity":".5"
　}をDOMスタイル一括設定。
　「#global-navi」に{
　　　"-webkit-transform":"translateX(-100%)",
　　　"transform":"translateX(-100%)",　　　　//スライドして中身を表示。
　}をDOMスタイル一括設定。
ここまで。

●ナビ閉じる
　ナビフラグ＝オフ。
　「#global-navi」に{
　　　"-webkit-transform":"translateX(0%)",
　　　"transform":"translateX(0%)",　　　　　//スライドして閉じる。
　}をDOMスタイル一括設定。
　「#closeWindow」に{
　　　"animation": "winClose 0.3s linear 0s",
　　　"opacity":"0",
　}をDOMスタイル一括設定。
　0.3秒後には
　　「#closeWindow」の「display」に「none」をDOMスタイル設定。
　ここまで
ここまで。
</script>