https://www.wunderkarten.de/common/components-js/mega-navigation-bar.js?af0a6386

1import { SV } from "./hover-intent.js";
2
3const navbar = document.querySelector(".mega-navbar-items");
4if (navbar) {
5    const navbarItems = navbar.querySelectorAll(".mega-navbar-item");
6    const navbarWidth = navbar.offsetWidth;
7    const navbarSearchToggle = navbar.querySelector(".mega-navbar-input-icon");
8    const navbarInput = navbar.querySelector(".mega-navbar-input-container");
9    const navbarSearchClose = navbar.querySelector(".mega-navbar-close-btn");
10
11    new SV.HoverIntent(navbarItems, {
12        // required parameters
13        onEnter: (targetItem) => {
14            targetItem.classList.add("active");
15            const dropdownContent = targetItem.querySelector(".mega-dropdown-content");
16            if (dropdownContent) {
17                dropdownContent.classList.add("active");
18            }
19        },
20        onExit: (targetItem) => {
21            targetItem.classList.remove("active");
22            const dropdownContent = targetItem.querySelector(".mega-dropdown-content");
23            if (dropdownContent) {
24                dropdownContent.classList.remove("active");
25            }
26        },
27
28        // default options
29        exitDelay: 800,
30        interval: 100,
31        sensitivity: 7,
32        dropdownElement: ".mega-dropdown-content",
33        exitDropdownDelay: 200,
34    });
35
36    navbar.addEventListener("click", (e) => {
37        let href;
38        if (e.target.hasAttribute("href")) {
39            e.preventDefault();
40            href = e.target.getAttribute("href");
41        } else {
42            const navbarItemLink = e.target.querySelector("a");
43            if (navbarItemLink) {
44                e.preventDefault();
45                href = navbarItemLink.getAttribute("href");
46            }
47        }
48        if (href) {
49            window.location.href = href;
50        }
51    });
52
53    navbarSearchToggle.addEventListener("click", (e) => {
54        navbarInput.classList.toggle("active");
55        navbarInput.style.width = navbarWidth + "px";
56        navbarInput.querySelector("input").focus();
57    });
58
59    navbarSearchClose.addEventListener("click", (e) => {
60        e.preventDefault();
61        navbarInput.classList.toggle("active");
62        navbarInput.querySelector("input").value = "";
63    });
64}