画面が狭いからコンテンツ部分に重ねるかたちでメニューなど出すのは仕方ないですが。
そのメニューを閉じる時に「閉じる」「メニュー外をタップ」といった操作が正直めんどくさい。
特に Androidスマートフォンを使われている人にとっては、「戻る」ボタンを押したくなるのが人情というもの。
ということで、「戻る」ボタン、ブラウザーバックをした時にメニューを閉じる方法について、簡単に書いておきます。
ずばり
// メニューを開く処理を行った後に以下
history.pushState(null, 'menu', '?menu');
// メニューを閉じる「操作」を行った時
history.go(-1);
window.onpopstate = function(e) {
// メニューを閉じる処理をここに書く
};
簡単に説明します
基本はブラウザー履歴に対する操作です。
メニューを開いた時に、次のページに進んだことにして、メニューを閉じた時に前のページに戻したことにする、です。
pushState() で、1ページ進んだことになります。
アドレスバーには、?menu が付与されますが、実際はページのリロードなどは発生しません。
history.go(-1)でブラウザーの履歴が1つ戻ります。
端末についている「戻る」ボタンなどでブラウザーバックした時も、 history.go(-1)と同じことが行われます。
history.go(-1)が起きると、それに対するイベントが発生しますが、それをキャッチするのが
window.onpopstate = function(e) { xxx }
です。
以上です
今回メニュー操作を例にしましたが。
他にも、ついつい「戻る」という操作をしたくなるインタフェースはあると思います。
そういったときにこういった一工夫をすることで、サイトの使い勝手は劇的に改善すると思います。