Skip to content

Instantly share code, notes, and snippets.

@barlowm
Last active September 10, 2015 12:43
Show Gist options
  • Save barlowm/ecf1d69fa657988940b6 to your computer and use it in GitHub Desktop.
Save barlowm/ecf1d69fa657988940b6 to your computer and use it in GitHub Desktop.
making bootstrap drop down menus opened with a sliding animation
.open > .dropdown-menu {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
.open > .dropdown-menu li a {
color: #000;
}
.dropdown-menu li a{
color: #fff;
}
.dropdown-menu {
-webkit-transform-origin: top;
transform-origin: top;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-transform: scale(1, 0);
display: block;
transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
}
.dropup .dropdown-menu {
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
.navbar .nav > li > .dropdown-menu:after {
}
.dropup > .dropdown-menu:after {
border-bottom: 0;
border-top: 6px solid rgba(39, 45, 51, 0.9);
top: auto;
display: inline-block;
bottom: -6px;
content: '';
position: absolute;
left: 50%;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment