Megamenu

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><a href="#">Home</a></li>
        <li class="megamenu">
            <a href="#">Megamenu</a>
            <div class="megamenu-content">
                Lorem ipsum dolor sit amet, vim cu case altera expetendis. Habeo eligendi persequeris quo ei, id sed prima volumus. Eum ad elitr utamur imperdiet, sit te detraxit evertitur, mel posse malorum consequat cu. Omnesque qualisque no cum. Molestiae voluptatibus te qui, summo graece meliore eu per. Vitae nullam ea nec. Mel in dicunt oportere, te sea exerci aperiam alterum. Ne mel delenit nostrum dissentias, eam quem gubergren deseruisse te, ullum harum temporibus vel ut. Duo omnis minimum te, pro ad nulla scaevola. Quo tation nostro reprimique no.
            </div>
        </li>
        <li class="megamenu" data-width="full">
            <a href="#">Megamenu Full</a>
            <div class="megamenu-content">
                Lorem ipsum dolor sit amet, vim cu case altera expetendis. Habeo eligendi persequeris quo ei, id sed prima volumus. Eum ad elitr utamur imperdiet, sit te detraxit evertitur, mel posse malorum consequat cu. Omnesque qualisque no cum. Molestiae voluptatibus te qui, summo graece meliore eu per. Vitae nullam ea nec. Mel in dicunt oportere, te sea exerci aperiam alterum. Ne mel delenit nostrum dissentias, eam quem gubergren deseruisse te, ullum harum temporibus vel ut. Duo omnis minimum te, pro ad nulla scaevola. Quo tation nostro reprimique no.
            </div>
        </li>
        <li class="megamenu" data-width="500">
            <a href="#">Megamenu set width</a>
            <div class="megamenu-content">
                Lorem ipsum dolor sit amet, vim cu case altera expetendis. Habeo eligendi persequeris quo ei, id sed prima volumus. Eum ad elitr utamur imperdiet, sit te detraxit evertitur, mel posse malorum consequat cu. Omnesque qualisque no cum. Molestiae voluptatibus te qui, summo graece meliore eu per. Vitae nullam ea nec. Mel in dicunt oportere, te sea exerci aperiam alterum. Ne mel delenit nostrum dissentias, eam quem gubergren deseruisse te, ullum harum temporibus vel ut. Duo omnis minimum te, pro ad nulla scaevola. Quo tation nostro reprimique no.
            </div>
        </li>
    </ul>
</nav>

Javascript

$('nav').coreNavigation({
    menuPosition: "right",
    container: true, 
    dropdownEvent: 'click',
    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;
}

/*
MEGAMENU STYLE
=========================== */
nav .menu > li.megamenu li.megamenu > 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.megamenu.open > a{
    color: #e74c3c;
}
/* =========================== */

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;
    }
}