ハンバーガーメニューの実装にあたり調べていると様々な物が先駆者様のおかげでご用意されています。

その中でも目を引いたのがその名も「Drawer」
以下からダウンロードできます

Drawer

headタグ内にjqueryとiScrollを読み込みます。

[html] <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script> [/html]

次に、Drawerのjsとcssファイルを読み込みます

[html] <link rel="stylesheet" href="drawer.min.css"> <script src="drawer.min.js"></script> [/html]

jsファイルは以下に

• dist
• ┗js
• ┗drawer.min.js

cssファイルは以下に

• dist
• ┗css
• ┗drawer.min.css

最後にjQueryを読み込みます。

[html] $(document).ready(function() { $(".drawer").drawer(); }); [/html]

あまり考えたことはなかったんですがページ内遷移だとハンバーガメニューは開きっぱなしなんです。
遷移した後に閉じたほうがいいということで。

[html] $(document).ready(function() { $(‘.drawer’).drawer(); $(‘#menu li’).on(‘click’, function() { $(‘.drawer’).drawer(‘close’); }); }); [/html]

こうしました。