Animated Megadropdown
An Animated Dropdown Mega Menu that uses Animate CSS/HoverIntent with CSS only fallback
Note: Wouldn't use this as is, needs tweaking
Demo
Features
- Javascript Based menu with CSS only fallback
- Uses CSS3 animation when available (fallback to js)
- Works in IE7+
Dependencies
Will work without however if you have them added this plugin can use the following:
- Animate.css
- HoverIntent
- Compass
Installation
Inlude Animate.css or copy the relavent styles "animate.css" Load the CSS: "Megadropdown.css" Include js plugin: "Megadropdown.js"
Set up your HTML
Add the following classes to the menu UL:
.nav // styles assigned to this class .nojs // contains the hover classes that will be removed if javascript is present <nav class="navigation"> <ul class="nav shadow clearfix nojs" id="menu"> <li><a href="#"><i class="fa fa-home"></i> Home</a></li> <li><a href="#">Megadrop</a> <div class="container-4"> <div class="col1"> <h3>Megadrop</h3> <ul> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li><a href="">Item 4</a></li> <li><a href="">Item 5</a></li> <li><a href="">Item 6</a></li> <li><a href="">Item 7</a></li> <li><a href="">Item 8</a></li> </ul> </div> <div class="col1"> <h3> </h3> <ul> <li><a href="">Item 9</a></li> <li><a href="">Item 10</a></li> <li><a href="">Item 11</a></li> <li><a href="">Item 12</a></li> <li><a href="">Item 13</a></li> <li><a href="">Item 14</a></li> <li><a href="">Item 15</a></li> </ul> </div> <div class="col1"> <h3> </h3> <ul> <li><a href="">Item 16</a></li> <li><a href="">Item 17</a></li> <li><a href="">Item 18</a></li> <li><a href="">Item 19</a></li> <li><a href="">Item 20</a></li> </ul> </div> <div class="col1"> <h3> </h3> <ul> <li><a href="">Item 21</a></li> <li><a href="">Item 22</a></li> <li><a href="">Item 23</a></li> <li><a href="">Item 24</a></li> <li><a href="">Item 25</a></li> </ul> </div> <div class="col4"> <a href='#'><h3>Subhead Link.</h3></a> </div> </div> </li> <li><a href="#">About</a> <div class="container-1"> <ul> <li><a href="#">Who We Are</a></li> <li><a href="#">Why We Care</a></li> <li><a href="#">Some other page</a></li> <li><a href="#">How We Work</a></li> </ul> </div> </li> <li><a href="#">Link</a></li> <li><a href="#">Contact</a></li> <li class="nav-right"><a href="#">Request a Callback</a></li> </ul> </nav> Call the plugin
$('#menu').Megadropdown({ activeClass: 'open', fadeInDuration: 250, fadeOutDuration: 'slow', openAnimation: 'fadeInUp', closeAnimation: 'fadeOutDown', hoverTimeout: 450 }); Tested on
- IE7+
- Safari
- Firefox
- Chrome
License
The MIT License (MIT)
