Flat Animated Dropdown Menu with jQuery and Animate.css
File Size: | 1.78 KB |
---|---|
Views Total: | 17649 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A modern flat designed dropdown menu which allows you to toggle sub menus with fancy CSS3 aniamtions based on Animate.css.
How to use it:
1. Include Font Awesome for dropdown icons (Optional).
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
2. Include animate.css for CSS3 animations
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" rel="stylesheet">
3. The Html structure for the dropdown menu. Add the class 'animated' to the parent element, along with any of the animation names picked from animate.css.
<nav class="animated flipInX"> <ul> <li> <a href="#"> <div class="fa fa-home"></div> </a> </li> <li> <a href="#"> About </a> </li> <li class="sub-menu"> <a href="#"> Products <i class="fa fa-angle-down"></i> </a> <ul> <li> <a href="#"> Product Item </a> </li> <li> <a href="#"> Product Item </a> </li> <li> <a href="#"> Product Item </a> </li> </ul> </li> <li class="sub-menu"> <a href="#"> Services <i class="fa fa-angle-down"></i> </a> <ul> <li> <a href="#"> Product Item </a> </li> <li> <a href="#"> Product Item </a> </li> <li> <a href="#"> Product Item </a> </li> </ul> </li> <li> <a href="#"> Contact Us </a> </li> </ul> </nav>
4. The required CSS rules to style the dropdown menu.
nav ul { background: #2ecc71; list-style: none; margin: 0; padding: 0; } nav ul li { position: relative; display: inline-block; margin-right: -4px; text-align: center; } nav ul li:first-child a { background: #27ae60; width: 49px; padding: 15px 0; } nav ul li:last-child { margin: 0; } nav ul li a { display: block; background: #2ecc71; padding: 15px 20px; color: #fff; font-size: 14px; text-decoration: none; transition: 0.2s linear; } nav ul li a:hover { background: #27ae60; } nav ul li ul { position: absolute; top: 100%; left: 0; width: 240px; border-bottom: 4px solid #2ecc71; } nav ul li ul li { display: block; width: 100%; margin: 0; text-align: left; } nav ul li ul li a { display: block; background: #2c3e50; padding: 10px 15px; } nav ul li ul li a:first-child { background: #2c3e50; width: auto; border-left: 4px solid transparent; padding: 10px 15px; font-size: 14px; } nav ul li ul li a:hover { background: #34495e; border-left: 4px solid #2ecc71; }
5. Include jQuery library at the bottom of the document.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
6. A little JS to enable the dropdown menu.
$('.sub-menu ul').hide(); $(".sub-menu a").click(function () { $(this).parent(".sub-menu").children("ul").slideToggle("200"); $(this).find("i.fa").toggleClass("fa-angle-up fa-angle-down"); });
This awesome jQuery plugin is developed by andytran. For more Advanced Usages, please check the demo page or visit the official website.