Mirror of
fix: make dropdown links clickable instead of hoverable
+71
-15
+71
-15
src/components/DropdownLinks.astro
+71
-15
src/components/DropdownLinks.astro
···
12
12
}));
13
13
---
14
14
15
-
<nav class="top-dropdown-menu">
15
+
<nav class="top-dropdown-menu" role="navigation" aria-label="Main menu">
16
16
<ul class="menu-list">
17
-
<li class="menu-item">
18
-
<button aria-haspopup="true" aria-expanded="false" class="menu-button">
17
+
<li class="menu-item" data-menu="plugin">
18
+
<button
19
+
class="menu-button"
20
+
aria-haspopup="true"
21
+
aria-expanded="false"
22
+
type="button"
23
+
>
19
24
View by plugin ▾
20
25
</button>
21
-
<ul class="submenu">
26
+
<ul class="submenu" hidden>
22
27
<li><a href="/">View All (Homepage)</a></li>
23
28
{
24
29
pluginLinks.map((plugin) => (
···
29
34
}
30
35
</ul>
31
36
</li>
32
-
<li class="menu-item">
33
-
<button aria-haspopup="true" aria-expanded="false" class="menu-button">
37
+
<li class="menu-item" data-menu="language">
38
+
<button
39
+
class="menu-button"
40
+
aria-haspopup="true"
41
+
aria-expanded="false"
42
+
type="button"
43
+
>
34
44
View by language ▾
35
45
</button>
36
-
<ul class="submenu">
46
+
<ul class="submenu" hidden>
37
47
{
38
48
localeLinks.map((locale) => (
39
49
<li>
···
46
56
</ul>
47
57
</nav>
48
58
59
+
<script>
60
+
document.addEventListener("DOMContentLoaded", () => {
61
+
const menuItems = document.querySelectorAll(".menu-item");
62
+
63
+
menuItems.forEach((item) => {
64
+
const button = item.querySelector(".menu-button");
65
+
const submenu = item.querySelector(".submenu");
66
+
67
+
button.addEventListener("click", () => {
68
+
const expanded = button.getAttribute("aria-expanded") === "true";
69
+
// Close all other menus
70
+
menuItems.forEach((other) => {
71
+
if (other !== item) {
72
+
other.querySelector(".submenu").hidden = true;
73
+
other
74
+
.querySelector(".menu-button")
75
+
.setAttribute("aria-expanded", "false");
76
+
}
77
+
});
78
+
79
+
if (expanded) {
80
+
submenu.hidden = true;
81
+
button.setAttribute("aria-expanded", "false");
82
+
} else {
83
+
submenu.hidden = false;
84
+
button.setAttribute("aria-expanded", "true");
85
+
}
86
+
});
87
+
});
88
+
89
+
// Optional: close menu on outside click
90
+
document.addEventListener("click", (e) => {
91
+
if (!e.target.closest(".top-dropdown-menu")) {
92
+
menuItems.forEach((item) => {
93
+
item.querySelector(".submenu").hidden = true;
94
+
item
95
+
.querySelector(".menu-button")
96
+
.setAttribute("aria-expanded", "false");
97
+
});
98
+
}
99
+
});
100
+
});
101
+
</script>
102
+
49
103
<style>
50
104
/* Container */
51
105
.top-dropdown-menu {
···
89
143
outline: 2px solid var(--ln-color-blue);
90
144
}
91
145
92
-
/* Submenu (dropdown) */
93
146
.submenu {
94
-
list-style: none;
147
+
/* Keep all styles */
148
+
opacity: 1 !important;
149
+
pointer-events: auto !important;
150
+
transform: translateY(0) !important;
151
+
95
152
position: absolute;
96
153
top: 110%;
97
154
left: 0;
···
101
158
min-width: 180px;
102
159
box-shadow: 0 6px 12px var(--ln-color-gray-3);
103
160
border-radius: 0.25rem;
104
-
opacity: 0;
105
-
pointer-events: none;
106
-
transform: translateY(10px);
107
-
transition:
108
-
opacity 0.25s ease,
109
-
transform 0.25s ease;
110
161
z-index: 100;
162
+
}
163
+
164
+
/* Hide when hidden attribute is present */
165
+
.submenu[hidden] {
166
+
display: none !important;
111
167
}
112
168
113
169
/* Show submenu on hover */