hover dropdown
This commit is contained in:
parent
98a88e4c88
commit
a0559a9b93
|
@ -1,4 +1,4 @@
|
||||||
<nav id="Navigation" class="fixed-top navbar-dark bg-dark navbar navbar-expand-lg">
|
<nav id="Navigation" class="fixed-top navbar-dark bg-dark navbar navbar-expand-lg dropdown-hover">
|
||||||
<a class="navbar-brand" href="#">UI Kit</a>
|
<a class="navbar-brand" href="#">UI Kit</a>
|
||||||
<button
|
<button
|
||||||
data-target="#NavbarResponsive" aria-controls="NavbarResponsive"
|
data-target="#NavbarResponsive" aria-controls="NavbarResponsive"
|
||||||
|
|
|
@ -9,7 +9,7 @@ import 'bootstrap/js/dist/carousel';
|
||||||
import 'bootstrap/js/dist/collapse';
|
import 'bootstrap/js/dist/collapse';
|
||||||
|
|
||||||
// conflicting with bootstrap-select/dist/js/bootstrap-select
|
// conflicting with bootstrap-select/dist/js/bootstrap-select
|
||||||
//import 'bootstrap/js/dist/dropdown';
|
import 'bootstrap/js/dist/dropdown';
|
||||||
|
|
||||||
import 'bootstrap/js/dist/modal';
|
import 'bootstrap/js/dist/modal';
|
||||||
import 'bootstrap/js/dist/tooltip';
|
import 'bootstrap/js/dist/tooltip';
|
||||||
|
|
|
@ -137,3 +137,70 @@ button, input, optgroup, select, textarea,
|
||||||
|
|
||||||
@extend .alert-danger;
|
@extend .alert-danger;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// dropdown icon
|
||||||
|
.dropdown.show .dropdown-toggle::after,
|
||||||
|
.dropdown-toggle.active-dropdown::after,
|
||||||
|
.dropdown-toggle.active::after {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
// dropdown hover
|
||||||
|
@media only screen and (min-width: map-get($grid-breakpoints, "md")) {
|
||||||
|
.dropdown-hover .collapse ul li {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-hover .collapse ul li:hover {
|
||||||
|
> .dropdown-toggle::after {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
> ul {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-hover .collapse ul ul {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
min-width: 250px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*******/
|
||||||
|
.dropdown-hover .collapse ul ul li {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-hover .collapse ul ul li:hover > ul {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-hover .collapse ul ul ul {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 100%;
|
||||||
|
min-width: 250px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*******/
|
||||||
|
.dropdown-hover .collapse ul ul ul li {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-hover .collapse ul ul ul li:hover ul {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-hover .collapse ul ul ul ul {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
min-width: 250px;
|
||||||
|
display: none;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue