fix: responsive mega menu

This commit is contained in:
mohamad
2026-05-31 10:30:36 +03:30
parent 52516d5a5a
commit 7726b0b6ec
2 changed files with 125 additions and 14 deletions
+57 -8
View File
@@ -2926,15 +2926,50 @@ a.citation-count-badge:hover {
font-size: 0.95rem;
}
.nav-item.has-megamenu:hover .nav-arrow {
transform: none;
}
.nav-item.has-megamenu.open .nav-arrow {
transform: rotate(180deg);
}
.megamenu {
position: static;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--glass-border);
max-height: 0;
overflow: hidden;
margin: 0;
padding: 0;
border: none;
border-radius: var(--radius-md);
transform: none;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.nav-item.has-megamenu:hover .megamenu {
opacity: 0;
visibility: hidden;
max-height: 0;
pointer-events: none;
transform: none;
}
.nav-item.has-megamenu.open .megamenu {
max-height: 2000px;
overflow: visible;
margin-top: 0.25rem;
padding: 0;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--glass-border);
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
}
.megamenu-inner {
@@ -2956,14 +2991,28 @@ a.citation-count-badge:hover {
max-width: none;
}
.megamenu-product-item.has-subproducts .megamenu-sublist {
max-height: none;
opacity: 1;
border-top-color: var(--glass-border);
.megamenu-product-item.has-subproducts:hover .megamenu-sub-chevron,
.megamenu-product-item.has-subproducts:focus-within .megamenu-sub-chevron {
transform: none;
color: var(--text-muted);
}
.nav-item.has-megamenu:hover .megamenu {
transform: none;
.megamenu-product-item.has-subproducts:hover .megamenu-sublist,
.megamenu-product-item.has-subproducts:focus-within .megamenu-sublist {
max-height: 0;
opacity: 0;
border-top-color: transparent;
}
.megamenu-product-item.has-subproducts.open .megamenu-sub-chevron {
transform: rotate(180deg);
color: var(--accent-blue-light);
}
.megamenu-product-item.has-subproducts.open .megamenu-sublist {
max-height: 320px;
opacity: 1;
border-top-color: var(--glass-border);
}
.sub-product-grid {