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
: 2274 At:- 5/11/2018 3:25:41 PM
Bootstrap dropdown with hover CSS jQuery






2 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


profileImage Answered by:- bhanu

Above answer works for Bootstrap 3, but if you are using Bootstrap 4, then to show dropdown of navbar on hover you can use below jQuery code

 $(document).ready(function(){
    $(".navbar .dropdown").hover(function() {
      $(this).find(".dropdown-toggle").dropdown("toggle");
    });  
})

Here is the complete code

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<script>
   $(document).ready(function(){
    $(".navbar .dropdown").hover(function() {
      $(this).find(".dropdown-toggle").dropdown("toggle");
    });
   
   
   })
</script>

Fiddle here: https://jsfiddle.net/gzrL3f8v/

Thanks

0
At:- 5/19/2021 8:17:12 AM






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