Animated Dropdown Mega Menu

Project maintained by djsmithme Hosted on GitHub Pages — Theme by mattgraham

With JS:


Animated Megadropdown

An Animated Dropdown Mega Menu that uses Animate CSS/HoverIntent with CSS only fallback



Will work without however if you have them added this plugin can use the following:


Inlude Animate.css or copy the relavent styles

Load the CSS:

Include js plugin:

Set up your HTML

Add the following classes/html:

.nav      // styles assigned to this class
.nojs     // 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">
                                    <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>

                    <div class="col1">
                                    <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>
                    <div class="col1">
                                    <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>

                    <div class="col1">
                                     <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>

                    <div class="col4">
                        <a href='#'><h3>Subhead Link.</h3></a>
    <li><a href="#">About</a>
                <div class="container-1">
                            <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>
    <li><a href="#">Link</a></li>
    <li><a href="#">Contact</a></li>
    <li class="nav-right"><a href="#">Request a Callback</a></li>   

Call the plugin

        activeClass: 'open',                                                                                   
        fadeInDuration: 250,
        fadeOutDuration: 'slow',
        openAnimation: 'fadeInUp',
        closeAnimation: 'fadeOutDown',
        hoverTimeout: 450

Tested on


The MIT License (MIT)