marknt15 marknt15 - 14 days ago 9
CSS Question

Bootstrap CSS transition onhover

Hi I'm trying to replicate the beautiful CSS transition dropdown menu onhover of devdojo.com (https://devdojo.com/ebook/laravelsurvivalguide) but can't replicate it. It is the onhover of the 3 dots in the main menu. Maybe I'm missing something? Thanks!

My CSS:

.dropdown-menu-animated {
border: 0 none;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
display: block;
margin-top: 0;
opacity: 0;
transform: scale3d(0.95, 0.95, 1) translate3d(0px, -15px, 0px);
transform-origin: 100% 0 0;
transition-delay: 0s, 0s, 0.5s;
transition-duration: 0.5s, 0.5s, 0s;
transition-property: opacity, transform, visibility;
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
visibility: hidden;
}

.dropdown-menu {
background-clip: padding-box;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
display: none;
float: left;
font-size: 14px;
left: 0;
list-style: outside none none;
margin: 2px 0 0;
min-width: 160px;
padding: 5px 0;
position: absolute;
top: 100%;
z-index: 1000;
}
.open > .dropdown-menu-animated {
visibility: visible;
opacity: 1;
transition: opacity .5s, -webkit-transform .5s;
transition: opacity .5s, transform .5s;
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
}


My HTML:

<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse right">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a class=" dropdown-toggle" href="#_" data-toggle="dropdown">
HOVER ME
</a>
<ul class="dropdown-menu dropdown-menu-animated" role="menu">
<li>
<a href="/points">Sushi Points</a>
</li>
<li><a href="/points">Two</a></li>
</ul>
</li>
</ul>
</div>





Thanks @chiller .


Updated and edited answer:


JS

$('.dropdown-toggle').hover(function() {
$(this).parent().addClass("open");
});

$('.dropdown').mouseleave(function() {
$(this).removeClass("open");
});


CSS

.dropdown-menu li a {
color: white;
}
.dropdown-menu-animated {
border: 0 none;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
display: block;
margin-top: 0;
opacity: 0;
transform: scale3d(0.95, 0.95, 1) translate3d(0px, -15px, 0px);
transform-origin: 100% 0 0;
transition-delay: 0s, 0s, 0.5s;
transition-duration: 0.5s, 0.5s, 0s;
transition-property: opacity, transform, visibility;
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
visibility: hidden;
}
.dropdown-menu {
background-clip: padding-box;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
/*display: none;*/
float: left;
font-size: 14px;
left: 0;
list-style: outside none none;
margin: 2px 0 0;
min-width: 160px;
padding: 5px 0;
position: absolute;
top: 100%;
z-index: 1000;
}
.open > .dropdown-menu-animated {
visibility: visible;
opacity: 1;
transition: opacity .5s, -webkit-transform .5s;
transition: opacity .5s, transform .5s;
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
}


HTML

<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse right">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a class="dropdown-toggle" href="#_" data-toggle="dropdown">
HOVER ME
</a>
<ul class="dropdown-menu dropdown-menu-animated" role="menu" style="color:white;background:black;">
<li><a href="#">Bulanching</a></li>
<li><a href="#">Kuya Matmat</a></li>
<li><a href="#">Baby</a></li>
<li><a href="#">Wedding</a></li>
<li><a href="#">Excited</a></li>
</ul>
</li>
</ul>
</div>

Answer

this actually done with JavaScript and all you have to do is add this jquery code in your script

$('.dropdown-toggle').hover(function() {
  $(this).parent().addClass("open");
});

$('.dropdown').mouseleave(function() {
  $(this).removeClass("open");
});

and you have to remove display: none; from the class .dropdown-menu for the animation to work

see your example here

Comments