Header Mega Menu
Documentation and examples for Front's powerful, and responsive navigation mega menu.
How it works
Here's what you need to know before getting started with the mega menu:
- Mega menu requires a wrapping
.js-mega-menu(or any other ID or class which you can replace with) along with.navbarclass. .hs-has-mega-menu- is a parent class that contains sub-elements within it..hs-mega-menu- is a child class that contains a container for the mega menu.- Mega menus are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our
hs-megamenuJavaScript plugin.
How to use?
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="assets/vendor/hs-megamenu/src/hs.megamenu.css">
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
$(window).on('load', function () {
// initialization of HSMegaMenu component
$('.js-mega-menu').HSMegaMenu({
event: 'hover',
pageContainer: $('.container'),
breakpoint: 767,
hideTimeOut: 0
});
});
</script>
Basic
<nav class="js-mega-menu-basic navbar navbar-expand-md u-header__navbar">
<div id="navBarBasic" class="collapse navbar-collapse">
<ul class="navbar-nav u-header__navbar-nav">
<li class="nav-item hs-has-mega-menu"
data-event="hover"
data-animation-in="slideInUp"
data-animation-out="fadeOut"
data-position="left">
<a id="homeMegaMenu" class="nav-link u-header__nav-link" href="javascript:;"
aria-haspopup="true"
aria-expanded="false">
Mega Menu
<span class="fa fa-angle-down u-header__nav-link-icon"></span>
</a>
<div class="hs-mega-menu u-header__sub-menu" aria-labelledby="homeMegaMenu">
<div class="p-5">
<div class="row">
<div class="col-sm-4">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Agency</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Crypto</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Business</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Marketing</a></li>
</ul>
</div>
<div class="col-sm-4">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Agency</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Start-Up</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Business</a></li>
</ul>
</div>
<div class="col-sm-4">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">About</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Services</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Contacts</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
Complex
<nav class="js-mega-menu-complex navbar navbar-expand-md u-header__navbar">
<div id="navBarComplex" class="collapse navbar-collapse">
<ul class="navbar-nav u-header__navbar-nav">
<li class="nav-item hs-has-mega-menu u-header__nav-item"
data-event="hover"
data-animation-in="slideInUp"
data-animation-out="fadeOut"
data-position="left">
<a id="homeMegaMenu" class="nav-link u-header__nav-link pl-0" href="javascript:;"
aria-haspopup="true"
aria-expanded="false">
Home
<span class="fa fa-angle-down u-header__nav-link-icon"></span>
</a>
<div class="hs-mega-menu u-header__sub-menu u-header__mega-menu-width-v1 u-header__mega-menu-wrapper-v2" aria-labelledby="homeMegaMenu">
<div class="row p-0 mr-0">
<div class="col-lg-6 pr-0">
<div class="d-none d-lg-block u-header__banner-v1" data-bg-img-src="../../assets/img/750x750/img1.jpg">
<div class="text-center u-header__banner-v1-content u-content-centered-y p-4">
<div class="mb-4">
<strong class="d-block u-header__banner-v1-title mb-2">Branding Works</strong>
<span class="u-header__banner-v1-text">Experience a level of our quality in both design & customization works.</span>
</div>
<a class="btn btn-primary u-btn-primary btn-sm transition-3d-hover" href="#">Learn More <span class="fa fa-angle-right ml-2"></span></a>
</div>
</div>
</div>
<div class="col-lg-6 u-header__mega-menu-wrapper-v3">
<div class="row u-header__mega-menu-wrapper-v1">
<div class="col-sm-6">
<strong class="d-block mb-2">Classic</strong>
<ul class="list-unstyled mb-4">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Classic Agency</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Classic Crypto</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Classic Business</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Classic Marketing</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Classic Consulting</a></li>
</ul>
<strong class="d-block mb-2">Corporate</strong>
<ul class="list-unstyled mb-4">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Corporate Agency</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Corporate Start-Up</a></li>
</ul>
</div>
<div class="col-sm-6">
<strong class="d-block mb-2">Blog</strong>
<ul class="list-unstyled mb-4">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Agency</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Start-Up</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Business</a></li>
</ul>
<strong class="d-block mb-2">Portfolio</strong>
<ul class="list-unstyled u-list">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Portfolio Agency</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Portfolio Profile</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</ul>
</div>
</nav>
Columns
You might need to adjust the size width of the mega menu, when using less columns or when the content of the container is less. Use utility classes or use one of the predefined .w-* classes and apply them next to .hs-mega-menu class.
<nav class="js-mega-menu-columns navbar navbar-expand-md u-header__navbar">
<div id="navBarAnimatColumns" class="collapse navbar-collapse">
<ul class="navbar-nav u-header__navbar-nav">
<li class="nav-item hs-has-mega-menu"
data-event="hover"
data-animation-in="slideInUp"
data-animation-out="fadeOut"
data-position="left">
<a id="twoColumnsMegaMenu" class="nav-link u-header__nav-link" href="javascript:;"
aria-haspopup="true"
aria-expanded="false">
2 columns
<span class="fa fa-angle-down u-header__nav-link-icon"></span>
</a>
<div class="hs-mega-menu w-50 u-header__sub-menu" aria-labelledby="twoColumnsMegaMenu">
<div class="p-5">
<div class="row">
<div class="col-sm-6">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Agency</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Crypto</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Business</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Marketing</a></li>
</ul>
</div>
<div class="col-sm-6">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Agency</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Start-Up</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Business</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item hs-has-mega-menu"
data-event="hover"
data-animation-in="slideInUp"
data-animation-out="fadeOut"
data-position="left">
<a id="threeColumnsMegaMenu" class="nav-link u-header__nav-link" href="javascript:;"
aria-haspopup="true"
aria-expanded="false">
3 columns
<span class="fa fa-angle-down u-header__nav-link-icon"></span>
</a>
<div class="hs-mega-menu w-75 u-header__sub-menu" aria-labelledby="threeColumnsMegaMenu">
<div class="p-5">
<div class="row">
<div class="col-sm-4">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Agency</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Crypto</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Business</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Marketing</a></li>
</ul>
</div>
<div class="col-sm-4">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Agency</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Start-Up</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Business</a></li>
</ul>
</div>
<div class="col-sm-4">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">About</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Services</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Contacts</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item hs-has-mega-menu"
data-event="hover"
data-animation-in="slideInUp"
data-animation-out="fadeOut"
data-position="left">
<a id="fourColumnsMegaMenu" class="nav-link u-header__nav-link" href="javascript:;"
aria-haspopup="true"
aria-expanded="false">
4 columns
<span class="fa fa-angle-down u-header__nav-link-icon"></span>
</a>
<div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="fourColumnsMegaMenu">
<div class="p-5">
<div class="row">
<div class="col-sm-6 col-lg-3">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Agency</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Crypto</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Business</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Marketing</a></li>
</ul>
</div>
<div class="col-sm-6 col-lg-3">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Agency</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Start-Up</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Business</a></li>
</ul>
</div>
<div class="col-sm-6 col-lg-3">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">About</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Services</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Contacts</a></li>
</ul>
</div>
<div class="col-sm-6 col-lg-3">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Help</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Others</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item hs-has-mega-menu"
data-event="hover"
data-animation-in="slideInUp"
data-animation-out="fadeOut"
data-position="left">
<a id="fiveColumnsMegaMenu" class="nav-link u-header__nav-link" href="javascript:;"
aria-haspopup="true"
aria-expanded="false">
5 columns
<span class="fa fa-angle-down u-header__nav-link-icon"></span>
</a>
<div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="fiveColumnsMegaMenu">
<div class="p-5">
<div class="row">
<div class="col-sm-6 col-lg">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Agency</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Crypto</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Business</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Marketing</a></li>
</ul>
</div>
<div class="col-sm-6 col-lg">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Agency</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Start-Up</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Business</a></li>
</ul>
</div>
<div class="col-sm-6 col-lg">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">About</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Services</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Contacts</a></li>
</ul>
</div>
<div class="col-sm-6 col-lg">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Help</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Others</a></li>
</ul>
</div>
<div class="col-sm-6 col-lg">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Keep doing this</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">We are almost there!</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
Animation
All available animation values, can be found here.
<nav class="js-mega-menu-animation navbar navbar-expand-md u-header__navbar">
<div id="navBarAnimation" class="collapse navbar-collapse">
<ul class="navbar-nav u-header__navbar-nav">
<li class="nav-item hs-has-mega-menu"
data-event="hover"
data-animation-in="bounceInUp"
data-animation-out="bounceOutDown"
data-position="left">
<a id="bounceMegaMenu" class="nav-link u-header__nav-link" href="javascript:;"
aria-haspopup="true"
aria-expanded="false">
Bounce
<span class="fa fa-angle-down u-header__nav-link-icon"></span>
</a>
<div class="hs-mega-menu w-50 u-header__sub-menu" aria-labelledby="bounceMegaMenu">
<div class="p-5">
<div class="row">
<div class="col-sm-6">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Agency</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Crypto</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Business</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Marketing</a></li>
</ul>
</div>
<div class="col-sm-6">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Agency</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Start-Up</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Business</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item hs-has-mega-menu"
data-event="hover"
data-animation-in="fadeInLeft"
data-animation-out="fadeOutRight"
data-position="left">
<a id="fadeMegaMenu" class="nav-link u-header__nav-link" href="javascript:;"
aria-haspopup="true"
aria-expanded="false">
Fade
<span class="fa fa-angle-down u-header__nav-link-icon"></span>
</a>
<div class="hs-mega-menu w-75 u-header__sub-menu" aria-labelledby="fadeMegaMenu">
<div class="p-5">
<div class="row">
<div class="col-sm-4">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Agency</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Crypto</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Business</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Marketing</a></li>
</ul>
</div>
<div class="col-sm-4">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Agency</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Start-Up</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Business</a></li>
</ul>
</div>
<div class="col-sm-4">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">About</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Services</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Contacts</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item hs-has-mega-menu"
data-event="hover"
data-animation-in="flipInX"
data-animation-out="flipOutX"
data-position="left">
<a id="flipMegaMenu" class="nav-link u-header__nav-link" href="javascript:;"
aria-haspopup="true"
aria-expanded="false">
Flip
<span class="fa fa-angle-down u-header__nav-link-icon"></span>
</a>
<div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="flipMegaMenu">
<div class="p-5">
<div class="row">
<div class="col-sm-6 col-lg-3">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Agency</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Crypto</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Business</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Marketing</a></li>
</ul>
</div>
<div class="col-sm-6 col-lg-3">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Agency</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Start-Up</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Business</a></li>
</ul>
</div>
<div class="col-sm-6 col-lg-3">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">About</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Services</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Contacts</a></li>
</ul>
</div>
<div class="col-sm-6 col-lg-3">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Help</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Others</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item hs-has-mega-menu"
data-event="hover"
data-animation-in="zoomIn"
data-animation-out="zoomOut"
data-position="left">
<a id="zoomMegaMenu" class="nav-link u-header__nav-link" href="javascript:;"
aria-haspopup="true"
aria-expanded="false">
Zoom
<span class="fa fa-angle-down u-header__nav-link-icon"></span>
</a>
<div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="zoomMegaMenu">
<div class="p-5">
<div class="row">
<div class="col-sm-6 col-lg">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Agency</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Crypto</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Business</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Marketing</a></li>
</ul>
</div>
<div class="col-sm-6 col-lg">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Agency</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Start-Up</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Business</a></li>
</ul>
</div>
<div class="col-sm-6 col-lg">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">About</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Services</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Contacts</a></li>
</ul>
</div>
<div class="col-sm-6 col-lg">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Help</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Others</a></li>
</ul>
</div>
<div class="col-sm-6 col-lg">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Keep doing this</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">We are almost there!</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
Event
Choose opening events from hover to click through JavaScript init and data-event="event" attribute.
event: 'click',
<nav class="js-mega-menu-event navbar navbar-expand-md u-header__navbar">
<div id="navBarEvent" class="navbar-collapse">
<ul class="navbar-nav u-header__navbar-nav">
<li class="nav-item hs-has-mega-menu"
data-event="click"
data-animation-in="slideInUp"
data-animation-out="fadeOut"
data-position="left">
<a id="eventMegaMenu" class="nav-link u-header__nav-link" href="javascript:;"
aria-haspopup="true"
aria-expanded="false">
Mega Menu
<span class="fa fa-angle-down u-header__nav-link-icon"></span>
</a>
<div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="eventMegaMenu">
<div class="p-5">
<div class="row">
<div class="col-sm-6 col-lg-4">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Agency</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Crypto</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Business</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Marketing</a></li>
</ul>
</div>
<div class="col-sm-6 col-lg-4">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Agency</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Start-Up</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Business</a></li>
</ul>
</div>
<div class="col-sm-6 col-lg-4">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">About</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Services</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Contacts</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
Responsive
Set your collapsing breakpoint to your needs through JavaScript init. This example collapses the mega menu at 576 breakpoint. Learn more here.
$('.js-mega-menu-responsive').HSMegaMenu({
event: 'hover',
pageContainer: $('.container'),
breakpoint: 576,
hideTimeOut: 0
});
<nav class="js-mega-menu-responsive navbar navbar-expand-md u-header__navbar">
<div id="navBarResponsive" class="navbar-collapse">
<ul class="navbar-nav u-header__navbar-nav">
<li class="nav-item hs-has-mega-menu"
data-event="hover"
data-animation-in="slideInUp"
data-animation-out="fadeOut"
data-position="left">
<a id="responsiveMegaMenu" class="nav-link u-header__nav-link" href="javascript:;"
aria-haspopup="true"
aria-expanded="false">
Mega Menu
<span class="fa fa-angle-down u-header__nav-link-icon"></span>
</a>
<div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="responsiveMegaMenu">
<div class="p-5">
<div class="row">
<div class="col-sm-6 col-lg-4">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Agency</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Crypto</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Business</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Marketing</a></li>
</ul>
</div>
<div class="col-sm-6 col-lg-4">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Agency</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Start-Up</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Blog Business</a></li>
</ul>
</div>
<div class="col-sm-6 col-lg-4">
<ul class="list-unstyled mb-0">
<li><a class="nav-link u-list__link py-2 px-0" href="#">About</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Services</a></li>
<li><a class="nav-link u-list__link py-2 px-0" href="#">Contacts</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
Config
event: 'hover' - string
direction: 'horizontal' - string
breakpoint: 991 - integer
animationIn: false - boolean
animationOut: false - boolean
rtl: false - boolean
hideTimeOut: 300 - integer
sideBarRatio: 1/4 - integer(float)
pageContainer: $('body') - selector
classMap: {
initialized: '.hs-menu-initialized', - string
mobileState: '.hs-mobile-state', - string
subMenu: '.hs-sub-menu', - string
hasSubMenu: '.hs-has-sub-menu', - string
hasSubMenuActive: '.hs-sub-menu-opened', - string
megaMenu: '.hs-mega-menu', - string
hasMegaMenu: '.hs-has-mega-menu', - string
hasMegaMenuActive: '.hs-mega-menu-opened' - string
} - object
mobileSpeed: 400 - integer
mobileEasing: 'linear' - string
Callbacks
beforeOpen: function(){} - function
beforeClose: function(){} - function
afterOpen: function(){} - function
afterClose: function(){} - function
Methods
List of available JavaScript functions.
| Attribute | Description | Default value |
|---|---|---|
|
|
Defines the event on which the menu will be displayed. Valid values are:
|
hover |
|
|
Direction of the menus. Valid values are:
|
horizontal |
|
|
Determines below what permission the device layout is enabled. | |
|
|
Revealing effect. To run the script, you must additionally link animate.css All available animation values, can be found here. |
no |
|
|
Disappearing effect. To run the script, you must additionally link animate.css All available animation values, can be found here. |
no |
|
|
If true, displays all items from right-to-left (RTL). |
false |
|
|
Delay of the disappearance of the menu. | 300 |
|
|
Determines which part of the width of the sidebar will be occupied by a drop-down list. Works only if Works only if direction set to true. |
|
|
|
Determines relative to what element the drop-down menu will be positioned. Works only if Works only if direction set to true. |
|
|
|
Defines the class names for the elements of the mega menu. Works only if Works only if direction set to true.
|
|
|
|
Opening speed of the menu in the mobile layout. | 400 |
|
|
Determines the smoothness of the animation. Valid values are:
jquery.easing.min.js plugin is required to extend the plugin.
Additional values:
|
linear |