メニュータッチが効かないバグ

はらだ

今日も手短に一つバグを紹介します。
トップページではハンバーガーメニューを使っているのですが、開いたメニューのタッチ(クリック)感度が悪いという声をお聞きしました。
思い当たる節があったので見てみると、予想的中しました。
transition-delayの設定をし忘れていたのです。

新しいハンバーガーメニュー

どういうことか説明します。
ClubCloudでは、疑似要素 : focusを使ったハンバーガーメニューを使っています。
普通、checkbox型のinputを使って、ラベルタッチ ⇒ inputにcheckedがつく/消える ⇒ input:checked ~ で指定したメニューを表示という形が一般的ですが、問題があります。
それは、ラベルをもう一度タッチしないとメニューが閉じないことです。
前にユーザーの方から、メニューを、他のてきとうな場所を触るだけで閉じて欲しいという風に言われたことがありました。
↓↓ どこを触っても閉じるメニュー ↓↓

実装方法

これを実現するために、input:checked ~ というセレクタではなく、label:focus ~ というセレクタでメニューを表示させるようにしました。
label以外を触ると(もちろんメニューの中身を選択したときも)、focusが移るので、メニューが閉じます。
逆に同じlabelを触ってもfocusは移らないので、メニューは閉じません。
そこで、開くlabelにfocusが移ったときは、閉じるラベルを開くラベルの代わりに同じ位置に置くことにしました。
すると、画面のどこを触っても開くラベルからfocusが移るので、メニューは必ず閉じるという仕掛けです。
:focus の他にも tabindexとかを使います。
少し変化球ですが、inputみたいな媒体を介さないので、HTMLもスッキリします。
一応コード載せときますね。
メニュー部分のコードもあるので、コアの部分は結構簡素です。
<HTML>

<label class="menu_label_open" tabindex="0">開く</label>
<label class="menu_label_close">閉じる</label>
<div class="menu">
   <ul>
       <li><a href="http://google.com">メニュー1</a></li>
       <li><a href="http://google.com">メニュー2</a></li>
       <li><a href="http://google.com">メニュー3</a></li>
       <li><span>キャンセル</span></li>
   </ul>
</div>

<CSS>

label{
   cursor: pointer;
}
.menu{
   transform: translate3d(0,-200%,0);
   transition: .3s ease-in-out;
   -webkit-transition-delay: .1s;
   transition-delay: .1s;
}
.menu_label_open:focus ~ .menu{
   transform: translate3d(0,0,0);
}
.menu_label_open:focus ~ .menu_label_close{
   display: block;
}
.menu_label_open:focus{
   position: fixed;
   top:-100%;
}
.menu_label_close{
   display: none;
}
.menu ul{
   display: inline-block;
   width:100%;
   padding:0;
   list-style: none;
   border:1px solid black;
   background-color: #fff;
   text-align: center;
   cursor: pointer;
}
.menu ul li:hover{
   background-color: rgba(0,0,0,0.2);
}
.menu ul li:not(:last-child){
   border-bottom:0.5px solid black;
}
.menu ul li span,a{
   text-decoration: none;
   display: block;
   padding:20px 0;
   width:100%; 
}

詳しくはQiitaに前にまとめたので、下のリンクからお飛びください。
https://qiita.com/program_diary/items/26679bea0bc78d2d99a3

Qiitaにも書きましたが、transition-delayがないと、メニューを触った瞬間にメニューが閉じ始め、タッチ判定されないことがあります。
クリックで言うと、mousedown(クリックボタンを押し込む)した瞬間にメニューが閉じ始め、mouseup(クリックボタンを押し込むのをやめる)の瞬間にはメニューが動いているがために、メニューをクリックした判定にならない、ということになります。

transition-delayを.15sほどに設定しておくと、タッチ(クリック)判定も厳しくなく、かつストレスのない待ち時間になります。

ということで、transition-delayをきちんと設定したらメニュー感度悪い問題は解決しました。
めでたし。

ちなみに、その人は、PCでハンバーガーメニューをクリックしていたらしいです。
画面が大きいときはヘッダーにメニューを表示するのでハンバーガーメニューは出ないはず…と思っていたら、動画アップロードのためにウインドウをいくつか開いており、ブラウザのウインドウは小さくして使っているとのことでした。
色んな使い方を想定しないといけないですね。

今日もお読みくださりありがとうございます。
ほぼ毎日、アプリ開発や事業に関する日記を書いておりますので是非またお読みになってください！

この記事が気に入ったらサポートをしてみませんか？