'다이나믹 히트 영역'이있는 메뉴

플라이 아웃 다이나믹 히트 영역이있는 메뉴는 독특한 과제를 제시합니다. 마우스가없는 사람을 포함하여 모든 사용자에게 사용할 수있는 호버 활성화 다이나믹 히트 영역이있는 메뉴를 만듭니다. 핵심 문제는 호버 오프 동작에 있습니다. 잠수함이 호버에 나타나면 사용자의 마우스는 좁은 경로를 탐색하여 상호 작용해야합니다. 이 영역 외부의 우발적 인 마우스 움직임으로 인해 다이나믹 히트 영역이있는 메뉴가 닫히므로 실망스러운 사용자 경험이 생깁니다.

이 문제는 특히 "숨겨진 히트 지역"을 사용하여 이전에 해결되었습니다. 현재는 덜 일반적이지만, 이전에 아마존에서 사용한이 기술은 가시 하위 다이나믹 히트 영역이있는 메뉴를 넘어 호버 대상을 확장하는 보이지 않는 영역 (종종 SVG를 사용)을 동적으로 생성하는 것이 포함됩니다. 이렇게하면 마우스가 눈에 띄는 하위 다이나믹 히트 영역이있는 메뉴 영역을 간단히 떠나더라도 다이나믹 히트 영역이있는 메뉴가 열려 있습니다.

CSS Day 2019의 Hakim El Hattab이 전시 한이 접근법의 현대적인 구현은 SVG를 사용하여 이러한 적중 영역을 동적으로 생성합니다. 지역 자체는 보이지 않지만 효과적으로 더 크고 용서하는 호버 영역을 만듭니다.

El Hattab의 프레젠테이션 (관련 섹션에서 시작)에 대한 비디오 발췌문을 사용할 수 있습니다 .

이 기술의 라이브 데모는 Slides.com Pattern Library에서 사용할 수 있습니다.

위 내용은 '다이나믹 히트 영역'이있는 메뉴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!