Menu Animation

coreNavigation using Animate CSS from https://github.com/daneden/animate.css/ to create animation style

HTML

<nav hidden>
    <div class="nav-header">
        <a href="#" class="brand">
            <img src="/images/brand.png" />
        </a>
        <button class="toggle-bar">
            <span class="fa fa-bars"></span>
        </button>	
    </div>								
    <ul class="menu">
        <li class="dropdown">
            <a href="#">Dropdown</a>
            <ul class="dropdown-content">
                <li><a href="#">Level 1</a></li>
                <li><a href="#">Level 1</a></li>
                <li class="dropdown">
                    <a href="#">Dropdown 2</a>
                    <ul class="dropdown-content">
                        <li><a href="#">Level 2</a></li>
                        <li><a href="#">Level 2</a></li>
                        <li class="dropdown">
                            <a href="#">Dropdown 3</a>
                            <ul class="dropdown-content">
                                <li><a href="#">Level 3</a></li>                                    
                                <li><a href="#">Level 3</a></li>                                    
                                <li><a href="#">Level 3</a></li>                                    
                                <li><a href="#">Level 3</a></li>   
                            </ul>                                 
                        </li>
                        <li><a href="#">Level 2</a></li>
                    </ul>
                </li>
                <li><a href="#">Level 1</a></li>
                <li><a href="#">Level 1</a></li>
                <li class="dropdown">
                    <a href="#">Dropdown 2</a>
                    <ul class="dropdown-content">
                        <li><a href="#">Level 2</a></li>
                        <li><a href="#">Level 2</a></li>
                        <li class="dropdown">
                            <a href="#">Dropdown 3</a>
                            <ul class="dropdown-content">
                                <li><a href="#">Level 3</a></li>                                    
                                <li><a href="#">Level 3</a></li>                                    
                                <li><a href="#">Level 3</a></li>                                    
                                <li><a href="#">Level 3</a></li>   
                            </ul>                                 
                        </li>
                        <li><a href="#">Level 2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="megamenu">
            <a href="#">Megamenu</a>
            <div class="megamenu-content">
                <div class="sample-text">...</div>
            </div>
        </li>
        <li class="megamenu" data-width="500">
            <a href="#">Megamenu set width</a>
            <div class="megamenu-content">
                <div class="sample-text">...</div>
            </div>
        </li>
    </ul>
</nav>

Javascript

$('nav').coreNavigation({
    menuPosition: "right", // left, right, center, bottom
    container: true, // true or false
    animated: true,
    animatedIn: 'flipInX',
    animatedOut: 'bounceOut',
    dropdownEvent: 'click', // Hover, Click & Accordion
    onOpenDropdown: function(){
        console.log('open');
    },
    onCloseDropdown: function(){
        console.log('close');
    },
    onOpenMegaMenu: function(){
        console.log('Open Megamenu');
    },
    onCloseMegaMenu: function(){
        console.log('Close Megamenu');
    }
});

CSS

nav {
    border-bottom: solid 1px #efefef;
    min-height: 60px;
    background: #fff;
}

nav .wrap-core-nav-list,
nav .nav-header {
    background: #fff;
}

nav .brand {
    display: block;
    position: relative;
    width: 170px;
    top: 20px;
}

nav .brand img {
    width: 100%;
}

nav .menu li a {
    display: block;
    padding: 20px 25px;
    text-decoration: none;
    color: #3a3a3a;
}

nav .menu li a:hover {
    color: #e74c3c;
}


/*
DROPDOWN STYLE
=========================== */
nav .menu > li.dropdown  li.dropdown > a::before{
    margin-left: 10px;
    content: '';
    border-top: solid 5px #6a6a6a;
    border-left: solid 5px transparent;
    border-right: solid 5px transparent;
    float: right;
    position: relative;
    top: 8px;
}

nav .menu li.dropdown.open > a{
    color: #e74c3c;
}

.sample-text{
    padding: 30px;
}
/* =========================== */


nav button {
    background: transparent;
    border: none;
    outline: none;
}

@media (max-width: 992px) {
    nav .full-container,
    nav .nav-container {
        padding-left: 0;
        padding-right: 0;
    }

    nav .nav-header {
        min-height: 60px;
    }

    nav .nav-header .brand {
        margin: 0 auto 5px;
        float: none;
    }

    nav .nav-header .toggle-bar {
        font-size: 18px;
        position: absolute;
        top: 17px;
        left: 15px;
    }

    nav .menu li a {
        padding: 10px 10px;
        border-bottom: solid 1px #efefef;
    }

    nav .menu li:last-child a {
        border-bottom: none;
    }
}