bootstrap dropdown hover animation – How to create bootstrap dropdown with hover animation?

bootstrap dropdown hover animation Steps to create bootstrap navbar hover animation menu Example with demo. i will you create a bootstrap dropdown with hover animation.

bootstrap dropdown hover animation

Example of Bootstrap nav dropdown hover animation Brand and toggle get grouped for better mobile display, Collect the nav links, forms, and other content for toggling

HTML Code (index.html)

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Welcome Message</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Pakainfo</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">List <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Sign In</a></li>
        <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="#">Sign up</a></li>
            <li><a href="#">Settings</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Google</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">www.pakainfo.com</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Find">
        </div>
        <button type="submit" class="btn btn-default">Update</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <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 dropdown-profile">
            <li><a href="#">Action</a></li>
            <li><a href="#">Account</a></li>
            <li><a href="#">Settings</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Login</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

don’t miss : Responsive Dropdown Navigation Bar

Read Also:  how to edit footer in wordpress - Remove the Branded Footer on Your WordPress Website

CSS Code

.navbar-nav > li > .dropdown-menu {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    display: block;
    transform: scale(0);
    transition: ease-out 0.3s;
}
.dropdown:hover .dropdown-menu {
    transform: scale(1);
}
.dropdown-profile
{
	border:none;
	display: block;
  transform: scale(1)!important;
	height: 0px;
	overflow: hidden;
	padding: 0px;
	top: 180px;
	transition: all .3s;
}
.dropdown:hover .dropdown-profile
{
	display: block;
	top: 100%;
	height: inherit;
}

I hope you get an idea about bootstrap dropdown hover animation.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.