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
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.