「ダイナミックヒットエリア」のメニュー

Flyoutメニューは、ユニークな課題を提示します。マウスのないユーザーを含むすべてのユーザーが使用できるホバー活性化メニューを作成します。コアの問題は、ホバーオフの動作にあります。ホバーにサブメニューが表示されると、ユーザーのマウスは狭いパスをナビゲートして対話する必要があります。このエリアの外での偶発的なマウスの動きにより、メニューが閉じられ、ユーザーエクスペリエンスがイライラします。

この問題は、特に「隠されたヒットエリア」の使用で以前に対処されています。現在はあまり一般的ではありませんが、以前はAmazonで採用されていたこの手法では、目に見えるサブメニューを超えてホバーターゲットを拡張する目に見えない領域（多くの場合SVGを使用）を動的に作成することが含まれます。これにより、マウスが目に見えるサブメニュー領域を一時的に離れても、メニューが開いたままになります。

CSS 2019年にHakim El Hattabによって紹介されたこのアプローチの最新の実装は、SVGをエレガントに使用してこれらのヒットエリアを動的に作成しています。エリア自体は目に見えませんが、より大きく、より寛容なホバーゾーンを効果的に作成します。

El Hattabのプレゼンテーションのビデオ抜粋（関連するセクションで開始）が利用可能です[こちら -これがWebページの場合はYouTube Embedがここに移動します]

この手法のライブデモは、Slides.comパターンライブラリで入手できます。

以上が「ダイナミックヒットエリア」のメニューの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。