leo/essence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Perfect auto drop for downdown menu.

Browse Source
This commit is contained in:
Leo
2023-02-25 15:08:04 -06:00
parent c797fab84a
commit f0ae58d174
1 changed files with 17 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
scss/bootstrap/_navbar.scss
View File

@@ -11,48 +11,28 @@
} }
// Make dropdown menus auto drop // Make dropdown menus auto drop
@include media-breakpoint-up(md) {
.dropdown { .dropdown {
.dropdown-menu { .dropdown-menu {
// z-index: 10000; display: block;
display: none;
opacity: 0; opacity: 0;
pointer-events: none; transition: all .15s linear;
// transition: all .15s linear; pointer-events: none; // Prevent auto show when mouse is below top menu item
// animation: disappear 0.15s linear; min-width: 170px;
} }
&:hover { &:hover {
.dropdown-menu { .dropdown-menu {
pointer-events: auto;
display: block; display: block;
opacity: 1; opacity: 1;
// transition: all .15s linear; pointer-events: auto; // Prevent auto hide when mouse is in dropdown menu
animation: appear 0.15s linear;
} }
} }
@keyframes appear { .dropdown-menu-end {
0% { right: 0;
display: block; left: auto;
opacity: 0;
}
100% {
display: block;
opacity: 1;
} }
} }
/*@keyframes disappear {
0% {
opacity: 1;
display: block;
transform: scale(1);
}
100% {
opacity: 0;
display: none;
transform: scale(0);
}
}*/
} }
} }