programing

Hoverintent 지연 온마우스아웃을 유지하면서 Superfish 드롭다운 메뉴 온마우스오버 지연 제거

abcjava 2023. 3. 12. 10:18
반응형

Hoverintent 지연 온마우스아웃을 유지하면서 Superfish 드롭다운 메뉴 온마우스오버 지연 제거

Superfish 드롭다운 픽스의 초기 지연을 제거하는 데 문제가 있습니다.내 고객은 지연 온마우스 아웃을 원하지만 지연 온마우스 오버는 원하지 않습니다.

순수 CSS 드롭다운 메뉴(Twenten 드롭다운 메뉴와 동일)를 가지고 있으며, 여기에 Suckerfish.js를 적용하고 있습니다.

코드는 다음과 같습니다.

$('ul#menu-airco-mb-navigatiestructuur').superfish({
    delay: 600,
    autoArrows:    false,
    speed: 'fast'
}); 

Superfish의 매뉴얼을 읽어봤는데, 초기 지연의 원인이 무엇인지 알 수가 없네요.어쩌면 애니메이션과 관련이 있을지도 몰라animation: {opacity:'show'}(도저히 이해가 안 가는군요)

잘 부탁드립니다!

HoverIntent 플러그인을 포함하고 있는 것 같습니다.Superfish의 옵션 중 하나는 "비활성화"입니다.HI."를 true로 설정하면 Superfish는 HoverIntent를 사용하여 마우스 입력 이벤트를 지연시키지 않습니다.또는 사이트에서 HoverIntent 플러그인을 사용할 계획이 없는 경우 이를 포함하지 않을 수도 있습니다.이게 도움이 됐으면 좋겠다.

$('ul#menu-airco-mb-navigatiestructuur').superfish({
    delay: 600,
    autoArrows: false,
    speed: 'fast',
    disableHI: true
});

테스트 케이스를 2개 작성했습니다. 번째 버전은 CSS를 사용하여 페이지를 간략화한 것입니다.두 번째 버전은 CSS를 모두 삭제하고 Superfish 웹사이트에 있는 기본적인 Superfish.css만 포함시켰다는 점을 제외하면 완전히 동일합니다.슈퍼피쉬.css가 작동하도록 메뉴 클래스를 'menu'에서 'sf-menu'로 변경했습니다.

CSS를 탑재한 버전은 원하는 대로 동작하지만 CSS를 탑재한 버전은 사용자가 설명한 버그가 있습니다.내 것과 네 것을 비교하고 네 것과 더 가깝게 맞추면 해결할 수 있는 CSS 문제가 있을 것 같아.한 가지 다른 점은 서브메뉴 ULs를 고정EM폭으로 설정하고 하위 LIs를 100%로 설정하는 것입니다만, 당신은 그렇지 않습니다.이것이 원인은 아니지만, CSS를 Superfish 메뉴를 실행하는 테스트된 방법에 더 가깝게 맞추는 것이 도움이 될 수 있음을 보여줍니다.이게 도움이 됐으면 좋겠다.

마우스 오버에 표시되는 것은 지연이 아니라 실제 애니메이션 실행입니다.

애니메이션을 제거할 수 있을 것 같습니다.

높이만 애니메이션으로 만들면 나타나는 데 1초가 걸리는 불투명도가 아니라 시각적으로 즉시 응답합니다.

기능성은 뛰어나지만, 시각적으로는 알 수 없습니다.

        $('ul#menu-airco-mb-navigatiestructuur').superfish({
            delay       : 0,
            animation   : { height:'show' },
            speed       : 'fast'
        });

언급URL : https://stackoverflow.com/questions/8229013/remove-delay-of-superfish-dropdown-menu-onmouseover-while-keeping-the-hoverinte

반응형