<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css" rel="stylesheet" /> <div class="container"> <nav class="navbar navbar-default"> <div class="collapse navbar-collapse js-navbar-collapse"> <ul class="nav navbar-nav"> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Collection <span class="glyphicon glyphicon-chevron-down pull-right"></span></a> <ul class="dropdown-menu mega-dropdown-menu row"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Dresses</li> <li><a href="#">Unique Features</a></li> <li><a href="#">Image Responsive</a></li> <li><a href="#">Auto Carousel</a></li> <li><a href="#">Newsletter Form</a></li> <li><a href="#">Four columns</a></li> <li class="divider"></li> <li class="dropdown-header">Tops</li> <li><a href="#">Good Typography</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Dresses</li> <li><a href="#">Unique Features</a></li> <li><a href="#">Image Responsive</a></li> <li><a href="#">Auto Carousel</a></li> <li><a href="#">Newsletter Form</a></li> <li><a href="#">Four columns</a></li> <li class="divider"></li> <li class="dropdown-header">Tops</li> <li><a href="#">Good Typography</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Jackets</li> <li><a href="#">Easy to customize</a></li> <li><a href="#">Glyphicons</a></li> <li><a href="#">Pull Right Elements</a></li> <li class="divider"></li> <li class="dropdown-header">Pants</li> <li><a href="#">Coloured Headers</a></li> <li><a href="#">Primary Buttons & Default</a></li> <li><a href="#">Calls to action</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Jackets</li> <li><a href="#">Easy to customize</a></li> <li><a href="#">Glyphicons</a></li> <li><a href="#">Pull Right Elements</a></li> <li class="divider"></li> <li class="dropdown-header">Pants</li> <li><a href="#">Coloured Headers</a></li> <li><a href="#">Primary Buttons & Default</a></li> <li><a href="#">Calls to action</a></li> </ul> </li> </ul> </li> </ul> </div><!-- /.nav-collapse --> </nav> </div>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); body { font-family: 'Open Sans', 'sans-serif'; background:#ffffff; } .navbar-nav>li>.dropdown-menu { margin-top:20px; border-top-left-radius:4px; border-top-right-radius:4px; } .navbar-default .navbar-nav>li>a { width:200px; font-weight:bold; } .mega-dropdown { position: static !important; width:100%; } .mega-dropdown-menu { border-color: #D9D9D9; box-shadow: 0 3px 5px rgba(0,0,0,.175); } .mega-dropdown-menu { padding: 20px 0px; width: 100%; } .mega-dropdown-menu:before { content: ""; border-bottom: 20px solid #fff; border-right: 17px solid transparent; border-left: 17px solid transparent; position: absolute; top: -20px; left: 19px; z-index: 10; } .mega-dropdown-menu:after { content: ""; border-bottom: 22px solid #D9D9D9; border-right: 19px solid transparent; border-left: 19px solid transparent; position: absolute; top: -22px; left: 17px; z-index: 8; } .mega-dropdown-menu > li > ul { padding: 0; margin: 0; } .mega-dropdown-menu > li > ul > li { list-style: none; } .mega-dropdown-menu > li > ul > li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.428571429; color: #999; white-space: normal; } .mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus { text-decoration: none; color: #444; background-color: #f5f5f5; } .mega-dropdown-menu .dropdown-header { color: #428bca; font-size: 18px; font-weight:bold; } .mega-dropdown-menu form { margin:3px 20px; } .mega-dropdown-menu .form-group { margin-bottom: 3px; }

$('#data-toggle').each(function() { animationClick(this, 'bounce'); }); function animationClick(element, animation) { element = $(element); element.click( function() { element.addClass('animated ' + animation); //wait for animation to finish before removing classes window.setTimeout( function(){ element.removeClass('animated ' + animation); }, 2000); }); }