Neu Megamenü erweitern (Mouseenter Event fehlerhaft)

[Teststrecke]

Hallo, ich wollte gerne das Megamenü auf der Startseite im NOVA template erweitern, sodass man sich per "mouseenter" weitere Unterkategorien anzeigen lassen kann. Zur Veranschaulichung, ich möchte so ein ähnliches Menü wie das auf hornbach.de.

Dazu habe ich die header.js im NOVA template um ein neues Mouseenter Event für die Unterkategorien erweitert. Das ganze funktioniert im Großen und Ganzen, nur eben nicht immer. Hin und wieder kommt es vor, dass sich ein Reiter einfach nicht öffnet. Das passiert eher zufällig und ich konnte den Fehler bisher nicht eindeutig reproduzieren, siehe script.

Ich habe im Grunde das Mouseevent, die "showdropdown()" und "hidedropdown()" -Funktonen sowie alle nötigen Variablen in der header.js kopiert und daraus mein eigenes Unterkategorie-Menü gebastelt. Bin um jede Hilfe dankbar.

$document.on('mouseenter', `${mainNavigation} .subcategoryItems > .dropdown`, onDesktop((e) => {
    if(hasTouch())
        return

    if(dropdownOutToSub != undefined)
        clearTimeout(dropdownOutToSub)

    dropdownInToSub = setTimeout(() => {
        if($activeDropdownSub !== null) {
            hideSubcategory()
        }
        showSubcategory($(e.target))
       
    }, delayDropdownFadeIn)
})).on('mouseleave', `${mainNavigation} .subcategoryItems > .dropdowsn`, onDesktop((e) => {
    if(hasTouch())
        return

    if(dropdownInToSub != undefined)
        clearTimeout(dropdownInToSub)

    dropdownOutToSub = setTimeout(() => {
        hideSubcategory()

    }, delayDropdownFadeOut)
}))

 

[bbfdesign]

Moin
Zeige uns doch mal Deine Arbeit. Dann können wir uns das auch besser anschauen.

 

[css-umsetzung]

Ich verstehe gerade nicht so richtig warum man da JS braucht?