Bootstrap snippet: Dropdown animation with CSS

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: menu,navbar,nav



<div class="navbar navbar-default navbar-static-top"> <div class="container bootstrap snippet"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Grones</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li class="dropdown "><a href="#" id="drop1" data-toggle="dropdown" class="dropdown-toggle" role="button">Music <b class="caret"></b></a> <ul role="menu" class="dropdown-menu" aria-labelledby="drop1"> <li role="presentation"><a href="#" role="menuitem">Grones</a></li> <li role="presentation"><a href="#" role="menuitem">Nach</a></li> <li role="presentation"><a href="#" role="menuitem">Zpu</a></li> <li role="presentation"><a href="#" role="menuitem">Madnass</a></li> </ul> </li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> <div class="container bootstrap snippet"> </div><!-- /.container -->
.open > .dropdown-menu { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity:1; } .dropdown-menu { opacity:.3; -webkit-transform-origin: top; transform-origin: top; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transform: scale(1, 0); display: block; transition: all 0.3s linear; -webkit-transition: all 0.3s linear; }
Dey-Dey

Dropdown animation with CSS

Dey-Dey
  Jun 27th 2014, 21:01
4.6K Views