ホバーインテント
サブメニューへ斜めに移動するとき、素朴な実装は途中の項目に反応して中身が切り替わる。ポインタの移動方向が「サブメニューへ向かう三角形」の中なら切替を遅らせて、ちらつきを防ぐ。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- サブメニューへ斜めに移動するメガメニュー
- ホバーで中身が切り替わる2段ナビ
- ちらつきの改善効果を数字で示したいレビュー
- 避ける場面
- タッチ主体の画面（ホバーが無い）
- サブメニューが無い1段のナビ
- 構成要素
- 素朴版／インテント版の枠
- 切替回数
- 項目リスト
- サブメニュー
- 現在項目の強調
- 持っている状態
- 通常
- ホバー
- 押下中
- フォーカス
- キーボード
Tab で各項目へ移動するとフォーカスで即座にサブメニューが切り替わる（遅延なし）。Enter／Space でも確定
- 支援技術
項目は button でフォーカスにより即時切替。切替回数を数字で表示。サブメニューは装飾のダミー行で読み上げ内容は見出しのみ。APG メニューの role 契約は持たない
- 動き
視覚的な動きはなし。インテント版はサブメニューへ向かう三角形内の移動なら切替を 300ms 遅らせ、外れたら即時
デザインの要点
- ちらつきの原因は「今どこにいるか」だけで判定すること。「どこへ向かっているか」を前回座標との差で推定する
- 現在位置とサブメニューの上下の角で三角形を作り、ポインタがその中なら 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>