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