スマホサイト用　ドロワーメニュー #jQuery

横からヒョコッと出てくるメニュー（よくあるやつ）の導入。

slidebarsというjqueryを使う。
PageSlideという有名なやつもあるけど、公式は配布していないっぽい？

http://plugins.adchsm.me/slidebars/ からダウンロード。
slidebars.min.cssとslidebars.min.jsをアップロード。
slidebars.min.cssはデフォではbackground-colorが指定されているが、場合によっては削除しても良い。

<header>内に以下を記述。

<link rel="stylesheet" href="/css/slidebars.min.css" media="all">

<body>直前に以下を記述。

<script src="/js/slidebars.min.js"></script>
<script>
    (function($) {
        $(document).ready(function() {
            $.slidebars();
        });
    }) (jQuery);
</script>

htmlには以下のように
元々のコンテンツ部分
```
<div id="sb-site">

</div>
```
メニュー部分
```
<div class="sb-slidebar sb-left sb-style-overlay">

</div>
```
sb-style-overlayは元々のコンテンツ部分の上に重ねて表示した場合。
左右に寄せたい場合sb-style-push

メニューボタン
```
<a href="" class="sb-toggle-right">

</a>
```
メニューボタンを固定させる場合、以下のCSSを設定。z-index:1030は公式サイトのページを参照した。
.sb-slidebarのpaddingは上部固定だとpadding-top、下部固定だとpadding-bottomで設定。
```
.menuHeader{position:fixed; z-index:1030;}
.sb-slidebar{padding-bottom:40px}
```
で、できるはず。

あと場合によっては#sb-siteの下余白が妙に空いてしまうときがあるので、
その場合、min-height:100vhを上書きする。以下のようにやれば良さげ。
```
#sb-site{min-height:auto; min-height:initial;}
```

http://paivittain-kukka.com/slidebars/
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-slidebars.html
http://wryoku.com/howto-slidebars_header_fixed/

※追記
Androidの一部の端末（私の場合だとGalaxyだった）だと、ドロワーメニュー出した時にドロワーの下の層のリンクが選択されたり、
ドロワーのリンクを選択しても下の層のリンクが選ばれる場合がある。
このときはz-indexがうまく働いていないので、

-webkit-transform: translate3d(0, 0, 2px);transform: translate3d(0, 0, 2px);

をz-indexの代わりに用いるとうまくいった。

http://liginc.co.jp/web/html-css/130658
http://webamb.com/smartphone/1205.html
http://loosely.net/archives/82
http://qiita.com/fnobi/items/ce67c0eeaa2d58733aca

※追記２

iPhone5S でsafari閲覧時にサブメニューを出力したときに、サブメニューをタップしてスクロールすると、
サブメニューが真っ白になってしまったことがあった。
そのときは、以下のようにコメントアウトすれば良い

slidebars.css

.sb-slidebar,.sb-slidebar *{/*-webkit-transform:translateZ(0px)*/}

スマホサイト用 ドロワーメニュー

スマホサイト用　ドロワーメニュー