01
通過した項目に反応する
ナビから離れたリンクへ斜めに向かうと、途中で横切った項目のメニューに切り替わります。
UI Gallery / 005
Mega Menu
メガメニューへ向かう斜め移動で、意図しないメニュー切り替えを防ぐ。
01 / Pointer path
Safe Triangle
カーソルの現在地とメガメニューの上辺を結び、斜めに移動するときの誤反応を防ぎます。
セーフトライアングルの有無による比較
Without safe triangle
02
斜めに移動しても切り替わらない
三角形の内側では背後のナビを反応させず、開いているメニューをそのまま保ちます。
02 / Why
意図したメニューへ移動しやすくする
斜めに移動できる
最短経路を選んでも、途中にある別のナビ項目へ誤反応しません。
外へ出れば切り替わる
セーフトライアングルの外では通常どおり反応します。操作全体を遅くする必要はありません。
通過中は反応させない
三角形がポインター操作を受け止めるため、背後のナビ項目はホバーにもクリックにも反応しません。
Implementation memo
実装時のポイント
- アクティブなナビ項目内にいる間だけカーソル座標を取得し、項目を離れたら三角形の頂点を固定する。
- 固定した頂点とメガメニュー上辺の左右端をCSS変数へ渡し、
clip-pathでセーフトライアングルを作る。 - メガメニューへ到達するまでは、セーフトライアングルがポインターイベントを受け止めて別のナビ項目への誤反応を防ぐ。
- メガメニューへの到達を検知したらセーフトライアングルの判定を解除し、以前の範囲内でも別のナビ項目へ切り替えられるようにする。