Created
December 23, 2014 14:20
-
-
Save bitflower/2cfe1f4663bd6ec93ae6 to your computer and use it in GitHub Desktop.
Bootstrap: Open dropdown / Nav sub menu on hover with fade in & transform
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @-webkit-keyframes fadeIn { | |
| 0% { | |
| opacity: 0; | |
| transform: translate(0, 20px); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: translate(0, 0); | |
| } | |
| } | |
| @keyframes fadeIn { | |
| 0% { | |
| opacity: 0; | |
| transform: translate(0, 20px); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: translate(0, 0); | |
| } | |
| } | |
| // BOOTSTRAP: Open Submenu on hover | |
| li.dropdown:hover ul.dropdown-menu { | |
| opacity: 1; | |
| } | |
| li.dropdown:hover ul.dropdown-menu { | |
| display: block; | |
| -webkit-animation: fadeIn 0.7s; | |
| animation: fadeIn 0.7s; | |
| -webkit-animation-fill-mode: forwards; | |
| animation-fill-mode: forwards; | |
| } |
Worked like a charm! thank you!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Great! - thank you!
for WordPress menu i used with this selectors:
li.menu-item-has-children:hover ul.sub-menu {
opacity: 1;
}
li.menu-item-has-children:hover ul.sub-menu {
display: block;
-webkit-animation: fadeIn 0.3s;
animation: fadeIn 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
..