Bootstrap CSS transition onhover

Question

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>

In that specific example it's done with javascript, not pure css. — Dekel
– Dekel, Commented Nov 20, 2016 at 12:44

Chiller · Accepted Answer · 2016-11-21 07:24:20Z

1

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

you can also make it work with CSS only by adding this code:

.dropdown:hover>.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);

}

See your example with CSS only

edited Nov 21, 2016 at 7:24

answered Nov 20, 2016 at 13:57

Chiller

9,7362 gold badges30 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chiller Over a year ago

you are welcome..i'm glad it helped....you can make it work with just CSS ...you can see the update on my post.

Vassilis Pits · Accepted Answer · 2016-11-20 13:24:03Z

0

The following snippet solves your styling issue for the :hover appearance. Add your transition effect in the .dropdown .dropdown-menu-animated rules and there you go ;)

.dropdown {
    float: left;
    cursor: pointer;
}
.dropdown .dropdown-menu-animated {
    border: 0 none;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
    margin-top: 20px;
    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:hover .dropdown-menu-animated {
    visibility: visible;
}

<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse right">
    <ul class="nav navbar-nav navbar-left">
        <li class="dropdown">
            HOVER ME

            <ul class="dropdown-menu-animated" role="menu">
                <li>
                    <a href="/points">Sushi Points</a>
                </li>
                <li><a href="/points">Two</a></li>
            </ul>            
        </li>
    </ul>
</div>

answered Nov 20, 2016 at 13:24

Vassilis Pits

3,8484 gold badges35 silver badges49 bronze badges

1 Comment

marknt15 Over a year ago

Thanks for this but I've just found out that CSS only is not enough. Tried changing it hard coded in the inspect element but no animation was rendered. Thanks though. I will post that updated answer

Collectives™ on Stack Overflow

Bootstrap CSS transition onhover

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related