3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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

Gumbyのメニューバー

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

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

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

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

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

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

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

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";
	}
}

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

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?