おまちかねの、ハンバーガーメニュー実装(スマホnotネイティブアプリ)

おなじみのハンバーガーメニュー(今もこの呼び方？w)

このサイトの方は本当すごいと思うなあ。よく見つけたなあと。

参考はこれなんだけど、今回元々ある程度他のエンジニアさんがくんでくれてて。それに組み込むのがなかなかこのタイミングでできないので、考え方を変えてみたよ。

私は私のレベルで。
正直綺麗な書き方じゃないとは思う。
結構無理矢理感が否めないので。。。

でも、こんなやり方もあるんだな程度に思っていただければ。
後は自分の備忘録と復習がてら。

まず、作りたかったのがfbのアプリ版の右上ボタンをクリックした時のようなやつ。

メニュー部分が右からニュルっと出るやつです。

で、今回私が悩んだのがそのニュルの部分ではなくて、
メニュー部分を立てスクロールした時にメインのコンテンツも一緒にスクロールしちゃう、、、ってやつ。

ちなみに、スライドのやり方も簡単に書くと、元々divかなんかでかこって作っておいて、hiddenで隠しておくと良いみたい。で、right: -299px;みたいな感じでね。

これに関してはこちらとかが分かりやすいかな。

結局、どのサイトに書いてある事もやり方はこんな感じで。

話を戻すと、その両方スクロールしちゃう現象って普通に実装するとそうなってしまうモノで。プラスαの工夫をしなきゃだめみたい。

私がやったのは
* bodyとhtmlにheight: 100%;,overflow: hidden;
ちなみにこれで高さが画面いっぱいになるよ。

// 禁止
$('#hoge').on('touchmove.noScroll', function(e) { e.preventDefault(); });

// 解除
$('#hoge').off('.noScroll');

結構有名みたいね。preventDefaultは特に。
今回の案件でも結構使ってる。

これで、見た目的にはfbさんと同じ。一応ね。

どうなのかは分からないけど、一応実装できました！