How to create bootstrap dropdown with hover animation?


I would like to create a bootstrap dropdown with hover animation, how can I create it?

My Current HTML code is as below, which is a basic drop-down menu created using Bootstrap.

HTML

 <div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown 
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
    </ul>
</div>

It is working when we hover and Click on it, but I need to add hover with animation effect, how to do it?


Asked by:- jon
0
: 259 At:- 5/11/2018 3:25:41 PM
Bootstrap dropdown with hover CSS jQuery






1 Answers
profileImage Answered by:- neena

Try this HTML/CSS code, should work

<ul class="nav navbar-nav">
        
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>

CSS

.dropdown .dropdown-menu {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;

    max-height: 0;
    display: block;
    overflow: hidden;
    opacity: 0;
}

.dropdown:hover .dropdown-menu {
    max-height: 200px;
    opacity: 1;
}

Here is the working fiddle https://jsfiddle.net/d8tkq55k/ we are doing animation using CSS transition property.

2
At:- 5/13/2018 7:14:08 PM
thanks got it 0
By : jon - at :- 5/21/2018 5:58:40 PM





Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use