Gumbyのメニューバーのリンクがスマホで上手く動かなかった件

4788 ワード
jQuery Gumby モバイル jQuery テキストリンク

　最近よくGumbyというCSSフレームワークを利用しています．理由はBootstrapが普及してきてBootstrapサイトが多過ぎてて，違うライブラリを使いたいからです．
　

Gumbyのメニューバー

Gumbyのメニューバーはレスポンシブ対応を自動でやってくれて

PCから見たときのメニュー

スマホから見たときのメニュー

項目がボタン１つにまとまって、

↓↓↓
タップ(クリック)すると
↓↓↓

メニューの項目が表示されます．

メニューバーリンクをページ外リンクにした時の挙動

Gumbyのメニューバーのリンクはスマホからのtapイベントに上手く対応できていないのか、ページ内リンクは問題無いのですが、通常のリンク項目を押すとメニューが閉じてしまいリンクが押せないという現象がありました．

jQueryでtouchイベントを制御して改善

私が作ったメニューの場合はメニュー全体はnav4というidを指定してあって，その中でメニューの各項目はliで定義されていました．
touchstartのイベントを使い，liの何番tapしたのかを判断して，location.hrefでリダイレクトさせることで対応できました．

参考 jQueryを使ってスマートフォン用のイベントを扱ってみた | SUSH-i LOG

my_menu_control.js
$("#nav4 li").bind("touchstart", touchHandler);
function touchHandler( event ){
    var num = $("li").index(this);
    console.log(num);
    if(num === 0){//Featuresへリンク
        location.href = "/features";
    }else if(num === 1){//Documentationへリンク
        location.href = "/documentation";
    }else if(num === 2 ){//Customizeへリンク
        location.href = "/customize";
    }else if(num === 3){//Communityへリンク
        location.href = "/community";
    }
}

挙動改善はしたけど、もっと効率の良いやり方があれば知りたいです汗

VBE decoder