Skip to content

Commit

Permalink
fix: Visibility menu dropdown
Browse files Browse the repository at this point in the history
Resolves #116
  • Loading branch information
oodamien committed May 24, 2024
1 parent 01c24cc commit 9a86365
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 12 deletions.
40 changes: 29 additions & 11 deletions src/css/header.css
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,8 @@ body {
}

.navbar-burger:not(.is-active) span {
transition: transform ease-out 0.25s, opacity 0s 0.25s, margin-top ease-out 0.25s 0.25s;
transition: transform ease-out 0.25s, opacity 0s 0.25s,
margin-top ease-out 0.25s 0.25s;
}

.navbar-burger span + span {
Expand Down Expand Up @@ -221,12 +222,6 @@ body {
align-items: center;
}

.navbar-item.is-hoverable:hover .navbar-dropdown {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}

.navbar-link::after {
border-width: 0 0 2px 2px;
border-style: solid;
Expand Down Expand Up @@ -267,15 +262,38 @@ body {
width: 230px;
padding: 1rem;
border-radius: 6px;
box-shadow: var(--navbar-menu-boxshadow, 0 5px 30px 0 rgb(108 135 135 / 50%));
box-shadow: var(
--navbar-menu-boxshadow,
0 5px 30px 0 rgb(108 135 135 / 50%)
);
pointer-events: none;
opacity: 0;
transition-duration: 86ms;
transform: translateY(-5px);
transition-property: opacity, transform;
visibility: hidden;
z-index: 999;
}

@keyframes dropdown {
from {
opacity: 0;
visibility: hidden;
transform: translateY(-5px);
}
1% {
visibility: visible;
}
to {
visibility: visible;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
}

.navbar-item.is-hoverable:hover .navbar-dropdown, .navbar-item.is-hoverable:focus .navbar-dropdown,
.navbar-item.is-hoverable:focus-within .navbar-dropdown {
animation: dropdown 86ms linear forwards;
}

.navbar-dropdown.lg {
width: 300px;
left: -20px;
Expand Down
2 changes: 1 addition & 1 deletion src/css/vars.css
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,7 @@
--z-index-nav: 1;
--z-index-toolbar: 2;
--z-index-page-version-menu: 3;
--z-index-navbar: 4;
--z-index-navbar: 100;
}

/* RESPONSIVE OVERRIDES */
Expand Down

0 comments on commit 9a86365

Please sign in to comment.