スマホといえば、もう最近はほぼハンバーガーメニューだよね。
タップで上から降りてくる。
バツボタンをタップでまたあがっていく、というような。
普通につくると、以下のようにやりたくなる。
あらかじめ上のほうにメニューをふっとばしておいて、
#openMenuボタンをクリックしたらanimateでtop:0まで降りてくる。
細かく説明すると、
①android対策等で親要素にクリックが伝搬しないようにする
②降りてくるメニューはウィンドウと同じ高さにセット(必要に応じて使う)
③メニューをtop:0の一までおろしてくる
④メニュー内をスワイプしてるときに背景がスクロールしちゃうのを防ぐ
わりとシンプル。
iphoneだけならこれでも全然いい。
※閉じるの処理はちょっと割愛してます。
でもandroidだと
「なんか遅いんですけど」
とか言われたりする。
そういうときは、めんどくさいけど、css3でアニメーションさせることになる。
んで作ったのが以下の様な感じ。
css
js
jsはもともとのとほとんど同じだけど、animateで動かしてたのを消して、addClassだけになった。
⑤class="on"をnavタグにつける。
そしてアニメーション処理をやらせてるのは、cssのほう。
transitionでアニメーションで動くようにして、
.onがついてるのとついてないので、transform:translate(x,y)の位置を変えるという処理。
※閉じるの処理は割愛
androidでtransformが効かなくて30分ほどロスしたけれども、ただ-webkit-プレフィクスをつけるだけだったという。
注意ですわね。
タップで上から降りてくる。
バツボタンをタップでまたあがっていく、というような。
普通につくると、以下のようにやりたくなる。
$('header nav').css({"top":"-1000px"});$('#openMenu').click(function(ev){ev.stopPropagation();//①$('header nav').height($(window).height());//②$('header nav').animate({top:0});//③$('body,html').css({"overflow":"hidden","height":"100%"});//④});
あらかじめ上のほうにメニューをふっとばしておいて、
#openMenuボタンをクリックしたらanimateでtop:0まで降りてくる。
細かく説明すると、
①android対策等で親要素にクリックが伝搬しないようにする
②降りてくるメニューはウィンドウと同じ高さにセット(必要に応じて使う)
③メニューをtop:0の一までおろしてくる
④メニュー内をスワイプしてるときに背景がスクロールしちゃうのを防ぐ
わりとシンプル。
iphoneだけならこれでも全然いい。
※閉じるの処理はちょっと割愛してます。
でもandroidだと
「なんか遅いんですけど」
とか言われたりする。
そういうときは、めんどくさいけど、css3でアニメーションさせることになる。
んで作ったのが以下の様な感じ。
css
header nav{width:100%;top:-1000px;overflow:scroll;transform:translate(0px,0px);-webkit-transform:translate(0px,0px);transition: transform 0.3s ease-out;}header nav.on{transform:translate(0px,1000px);-webkit-transform:translate(0px,1000px);}
js
$('#openMenu').on('click',function(ev){ev.stopPropagation();$('header nav').height($(window).height());$('header nav').addClass('on');//⑤$('body,html').css({"overflow":"hidden","height":"100%"});});
jsはもともとのとほとんど同じだけど、animateで動かしてたのを消して、addClassだけになった。
⑤class="on"をnavタグにつける。
そしてアニメーション処理をやらせてるのは、cssのほう。
transitionでアニメーションで動くようにして、
.onがついてるのとついてないので、transform:translate(x,y)の位置を変えるという処理。
※閉じるの処理は割愛
androidでtransformが効かなくて30分ほどロスしたけれども、ただ-webkit-プレフィクスをつけるだけだったという。
注意ですわね。