タッチイベントの有無でメニューをコントロール

top2013_1104.jpg レスポンシブデザインが好きなのですが、メニュー周りが上手くいかない...。という問題に直面したので、僕なりのソースを書き留めておこうと思います。

カテゴリTOPのメニューがうまく動作しない
マウスが使える環境であればhoverを利用して、ドロップダウンメニューを再現できます。
もちろん、カテゴリTOPのメニューにもリンクを設置することは可能です。
しかし、スマフォ等のブラウザではこちらが想定した挙動と異なりました。

そこで、タッチイベントを持つブラウザならカテゴリTOPをタップすることによって、ドロップダウンのメニューを表示するようにしてみました。

レイアウト上、横並びメニューは数に限りがありますが、うまくハマればタッチイベントをトリガーとしたメニューの実装もできるかもしれません!

■デモはこちら(PCとスマフォ・タブレットでは挙動が違います。)

Modernizr(モダナイザー)を読み込む
ブラウザのタッチイベントを取得する為にModernizrを読み込み必要があります。
詳細は「『Modernizr』を使ってブラウザーの機能を調べCSS、JSそれぞれ対応して書いていこう -まとめ」をご覧ください。
※デモではダウンロード時デフォルトで選択された項目のバージョンを使用しております。

デモページを解説【ポイントのみ】
あとに出てくるjQueryを利用して、表示・非表示をコントロールしています。
PCブラウザはclass="pc"を表示、class="sm"とclass="sml"を非表示。
スマフォブラウザは逆のclass="sm"とclass="sml"を表示。class="pc"を非表示。となります。


タッチイベントの有無を利用して表示内容を変更

if (Modernizr.touch){
    // スマフォが持つブラウザを想定
        $('.pc').css('display','none');
    } else {
    //  スマフォではないブラウザを想定
        $('.sm, .sml').css('display','none');
}

iPad用にtouchstartを利用してプルダウンメニューを表示
Androidの端末であれば、a以外へのhoverを設置しても有効になるみたいですが、iPadでは反応しないみたいです。
※手元にiPadしかない為iPadでの確認となります。

	//ipad用のコード
	//メニューをタッチした時にプルダウン開始
	$('.sm').bind('touchstart', function(){
		$('.sm .second').css('display','block');
	});
	
	//body部分をタッチした時にプルダウン部分を隠す
	$('body').bind('touchstart', function(){
		$('.sm .second').css('display','none');
	});

いつもながらjQuery部分のコードは分かる人が書けばもっと簡潔になるのかもしれません。また、これがどこで使えるかは不明ですが、どこかで使えたらいいなぁ~。と思います。

■補足
viewportの部分はしっかりと指定ないとうまく動作しないみたいです。
そもそもtouchstartはタッチした時に発生するイベントみたいで「指が離れたら...?」という疑問が残るのも確かです。実際のところデモでの実現されている挙動がおかしいような気もするわけですが、そこら辺は検証課題としておきます。

ズームの部分が未設定だとプルダウンメニューがうまく動作しないみたいです。
下記はだと、うまく動作しませんでした。


そこで、ズームも出来るカタチで指定すると動作しました。
(user-scalable=no の maximum-scale=1.0 で、固定する事も可能みたいです。)


※最後になりますが、最近出回ってるPCでありながらタッチディスプレイを搭載した機種での挙動がどうなるか心配なところです(^^;