ホバーインテント
サブメニューへ斜めに移動するとき、素朴な実装は途中の項目に反応して中身が切り替わる。ポインタの移動方向が「サブメニューへ向かう三角形」の中なら切替を遅らせて、ちらつきを防ぐ。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
デザインの要点
- ちらつきの原因は「今どこにいるか」だけで判定すること。「どこへ向かっているか」を前回座標との差で推定する
- 現在位置とサブメニューの上下の角で三角形を作り、ポインタがその中なら 300ms 待つ。外れたらすぐ切り替える
- 遅延は一律に入れない。まっすぐ次の項目へ動いたときまで遅れると、今度は鈍く感じる
- 切替回数を表示して比較する。体感の「ちらつく」は数字にすると 3〜4 倍の差になる
コード（コピーして使えます）
<div class="hi-wrap">
<div class="hi-menu" data-mode="naive">
<p class="hi-cap">素朴版 <span class="hi-n">切替 <b>0</b> 回</span></p>
<div class="hi-body">
<ul class="hi-list">
<li><button class="hi-item hi-on" type="button" data-sub="製品">製品</button></li>
<li><button class="hi-item" type="button" data-sub="料金">料金</button></li>
<li><button class="hi-item" type="button" data-sub="導入事例">導入事例</button></li>
<li><button class="hi-item" type="button" data-sub="サポート">サポート</button></li>
</ul>
<div class="hi-sub"><p class="hi-sub-title">製品</p><span></span><span></span><span></span></div>
</div>
</div>
<div class="hi-menu" data-mode="intent">
<p class="hi-cap">インテント版 <span class="hi-n">切替 <b>0</b> 回</span></p>
<div class="hi-body">
<ul class="hi-list">
<li><button class="hi-item hi-on" type="button" data-sub="製品">製品</button></li>
<li><button class="hi-item" type="button" data-sub="料金">料金</button></li>
<li><button class="hi-item" type="button" data-sub="導入事例">導入事例</button></li>
<li><button class="hi-item" type="button" data-sub="サポート">サポート</button></li>
</ul>
<div class="hi-sub"><p class="hi-sub-title">製品</p><span></span><span></span><span></span></div>
</div>
</div>
</div>