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 following <script> near the end of your pages under JS Front to enable them.
<script src="../../assets/js/components/hs.header.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.98,
hideTimeOut: 0
});
});
$(document).on('ready', function () {
// initialization of header
$.HSCore.components.HSHeader.init($('#header'));
});
</script>
Basic
<ul class="navbar-nav u-header__navbar-nav">
<!-- Nav Item -->
<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="basicMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Basic mega menu</a>
<!-- Nav Item - Mega Menu -->
<div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="basicMegaMenu">
<div class="row u-header__mega-menu-wrapper">
<div class="col-sm-3 mb-3 mb-sm-0">
<span class="u-header__sub-menu-title">One</span>
<ul class="u-header__sub-menu-nav-group mb-3">
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
</ul>
</div>
<div class="col-sm-3 mb-3 mb-sm-0">
<span class="u-header__sub-menu-title">Two</span>
<ul class="u-header__sub-menu-nav-group">
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
</ul>
</div>
<div class="col-sm-3 mb-3 mb-sm-0">
<span class="u-header__sub-menu-title">Three</span>
<ul class="u-header__sub-menu-nav-group mb-3">
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
</ul>
</div>
<div class="col-sm-3">
<span class="u-header__sub-menu-title">Four</span>
<ul class="u-header__sub-menu-nav-group mb-3">
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
</ul>
</div>
</div>
</div>
<!-- End Nav Item - Mega Menu -->
</li>
<!-- End Nav Item -->
</ul>
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. Set maximum width via data-max-width="" attribute.
<ul class="navbar-nav u-header__navbar-nav">
<!-- 2 Columns Item -->
<li class="nav-item hs-has-mega-menu u-header__nav-item"
data-event="hover"
data-animation-in="slideInUp"
data-animation-out="fadeOut"
data-max-width="400px"
data-position="left">
<a id="twoColumnsMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">2 Columns</a>
<!-- 2 Columns Item - Mega Menu -->
<div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="twoColumnsMegaMenu">
<div class="row u-header__mega-menu-wrapper">
<div class="col-sm-6 mb-3 mb-sm-0">
<span class="u-header__sub-menu-title">One</span>
<ul class="u-header__sub-menu-nav-group mb-3">
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
</ul>
</div>
<div class="col-sm-6">
<span class="u-header__sub-menu-title">Two</span>
<ul class="u-header__sub-menu-nav-group">
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
</ul>
</div>
</div>
</div>
<!-- End 2 Columns Item - Mega Menu -->
</li>
<!-- End 2 Columns Item -->
<!-- 3 Columns Item -->
<li class="nav-item hs-has-mega-menu u-header__nav-item"
data-event="hover"
data-animation-in="slideInUp"
data-animation-out="fadeOut"
data-max-width="500px"
data-position="left">
<a id="threeColumnsMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">3 Columns</a>
<!-- 3 Columns Item - Mega Menu -->
<div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="threeColumnsMegaMenu">
<div class="row u-header__mega-menu-wrapper">
<div class="col-sm-4 mb-3 mb-sm-0">
<span class="u-header__sub-menu-title">One</span>
<ul class="u-header__sub-menu-nav-group mb-3">
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
</ul>
</div>
<div class="col-sm-4 mb-3 mb-sm-0">
<span class="u-header__sub-menu-title">Two</span>
<ul class="u-header__sub-menu-nav-group">
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
</ul>
</div>
<div class="col-sm-4">
<span class="u-header__sub-menu-title">Three</span>
<ul class="u-header__sub-menu-nav-group mb-3">
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
</ul>
</div>
</div>
</div>
<!-- End 3 Columns Item - Mega Menu -->
</li>
<!-- End 3 Columns Item -->
<!-- 4 Columns Item -->
<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="fourColumnsMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">4 Columns</a>
<!-- 4 Columns Item - Mega Menu -->
<div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="fourColumnsMegaMenu">
<div class="row u-header__mega-menu-wrapper">
<div class="col-sm-3 mb-3 mb-sm-0">
<span class="u-header__sub-menu-title">One</span>
<ul class="u-header__sub-menu-nav-group mb-3">
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
</ul>
</div>
<div class="col-sm-3 mb-3 mb-sm-0">
<span class="u-header__sub-menu-title">Two</span>
<ul class="u-header__sub-menu-nav-group">
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
</ul>
</div>
<div class="col-sm-3 mb-3 mb-sm-0">
<span class="u-header__sub-menu-title">Three</span>
<ul class="u-header__sub-menu-nav-group mb-3">
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
</ul>
</div>
<div class="col-sm-3">
<span class="u-header__sub-menu-title">Four</span>
<ul class="u-header__sub-menu-nav-group mb-3">
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
</ul>
</div>
</div>
</div>
<!-- End 4 Columns Item - Mega Menu -->
</li>
<!-- End 4 Columns Item -->
<!-- 5 Items Item -->
<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="fiveColumnsMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">5 Columns</a>
<!-- 5 Items Item - Mega Menu -->
<div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="fiveColumnsMegaMenu">
<div class="row u-header__mega-menu-wrapper">
<div class="col-sm mb-3 mb-sm-0">
<span class="u-header__sub-menu-title">One</span>
<ul class="u-header__sub-menu-nav-group mb-3">
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
</ul>
</div>
<div class="col-sm mb-3 mb-sm-0">
<span class="u-header__sub-menu-title">Two</span>
<ul class="u-header__sub-menu-nav-group">
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
</ul>
</div>
<div class="col-sm mb-3 mb-sm-0">
<span class="u-header__sub-menu-title">Three</span>
<ul class="u-header__sub-menu-nav-group mb-3">
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
</ul>
</div>
<div class="col-sm mb-3 mb-sm-0">
<span class="u-header__sub-menu-title">Four</span>
<ul class="u-header__sub-menu-nav-group mb-3">
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
</ul>
</div>
<div class="col-sm">
<span class="u-header__sub-menu-title">Five</span>
<ul class="u-header__sub-menu-nav-group mb-3">
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
</ul>
</div>
</div>
</div>
<!-- End 5 Items Item - Mega Menu -->
</li>
<!-- End 5 Items Item -->
</ul>
Interactive styles
These are some custom styles with interactive contents.
<!-- Interactive Nav Item -->
<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="interactiveMegaMenu1" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Promo block and Links</a>
<!-- Interactive Nav Item - Mega Menu -->
<div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="interactiveMegaMenu1">
<div class="row no-gutters">
<div class="col-lg-6">
<!-- Banner Image -->
<div class="u-header__banner" style="background-image: url(../../assets/img/img27.jpg);">
<div class="u-header__banner-content">
<div class="mb-4">
<span class="u-header__banner-title">Branding Works</span>
<p class="u-header__banner-text">Experience a level of our quality in both design & customization works.</p>
</div>
<a class="btn btn-primary btn-sm transition-3d-hover" href="#">Learn More <span class="fas fa-angle-right ml-2"></span></a>
</div>
</div>
<!-- End Banner Image -->
</div>
<div class="col-lg-6">
<div class="row u-header__mega-menu-wrapper">
<div class="col-sm-3 mb-3 mb-sm-0">
<span class="u-header__sub-menu-title">One</span>
<ul class="u-header__sub-menu-nav-group mb-3">
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
</ul>
</div>
<div class="col-sm-3 mb-3 mb-sm-0">
<span class="u-header__sub-menu-title">Two</span>
<ul class="u-header__sub-menu-nav-group">
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
</ul>
</div>
<div class="col-sm-3 mb-3 mb-sm-0">
<span class="u-header__sub-menu-title">Three</span>
<ul class="u-header__sub-menu-nav-group mb-3">
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
</ul>
</div>
<div class="col-sm-3">
<span class="u-header__sub-menu-title">Four</span>
<ul class="u-header__sub-menu-nav-group mb-3">
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- End Interactive Nav Item - Mega Menu -->
</li>
<!-- End Interactive Nav Item -->
<!-- Interactive Nav Item -->
<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="interactiveMegaMenu2" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Product block</a>
<!-- Interactive Nav Item - Mega Menu -->
<div class="hs-mega-menu u-header__sub-menu" aria-labelledby="interactiveMegaMenu2">
<div class="u-header__mega-menu-wrapper">
<span class="u-header__sub-menu-title">Shop Elements</span>
<div class="row">
<div class="col-sm-6">
<ul class="u-header__sub-menu-nav-group">
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
</ul>
</div>
<div class="col-sm-6">
<ul class="u-header__sub-menu-nav-group">
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Four</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="#">Five</a></li>
</ul>
</div>
</div>
</div>
<!-- Mega Menu Banner -->
<div class="u-header__product-banner">
<div class="d-flex align-items-end">
<img class="img-fluid mr-4" src="../../assets/img/mockups/img4.png" alt="Image Description">
<div class="u-header__product-banner-content">
<div class="mb-4">
<span class="u-header__product-banner-title">Win T-shirt</span>
<p class="u-header__product-banner-text">Win one of our Front brand T-shirts.</p>
</div>
<a class="btn btn-sm btn-soft-primary transition-3d-hover" href="../shop/classic.html">Learn More <span class="fas fa-angle-right ml-2"></span></a>
</div>
</div>
</div>
<!-- End Mega Menu Banner -->
</div>
<!-- End Interactive Nav Item - Mega Menu -->
</li>
<!-- End Interactive Nav Item -->
<!-- Interactive Nav Item -->
<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="interactiveMegaMenu3" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">2 columns Demo block</a>
<!-- Interactive Nav Item - Mega Menu -->
<div class="hs-mega-menu u-header__sub-menu" aria-labelledby="interactiveMegaMenu3">
<div class="row no-gutters">
<div class="col-md-6">
<!-- Promo Item -->
<div class="u-header__promo-item">
<a class="u-header__promo-link" href="#">
<div class="media align-items-center">
<img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-13.svg" alt="SVG">
<div class="media-body">
<span class="u-header__promo-title">Title</span>
<small class="u-header__promo-text">Content description.</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="u-header__promo-item">
<a class="u-header__promo-link" href="#">
<div class="media align-items-center">
<img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-19.svg" alt="SVG">
<div class="media-body">
<span class="u-header__promo-title">Title</span>
<small class="u-header__promo-text">Content description.</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="u-header__promo-item">
<a class="u-header__promo-link" href="#">
<div class="media align-items-center">
<img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-5.svg" alt="SVG">
<div class="media-body">
<span class="u-header__promo-title">Title</span>
<small class="u-header__promo-text">Content description.</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
</div>
<!-- Promo -->
<div class="col-md-6 u-header__promo">
<a class="d-block u-header__promo-inner" href="#">
<div class="position-relative">
<img class="img-fluid rounded mb-3" src="../../assets/img/380x227/img6.jpg" alt="Image Description">
<span class="badge badge-success badge-pill badge-pos shadow-sm mt-3">New</span>
</div>
<span class="text-secondary font-size-1">Front makes you look at things from a different perspectives.</span>
</a>
</div>
<!-- End Promo -->
</div>
</div>
<!-- End Interactive Nav Item - Mega Menu -->
</li>
<!-- End Interactive Nav Item -->
<!-- Interactive Nav Item -->
<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="interactiveMegaMenu4" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">3 columns Demo block</a>
<!-- Interactive Nav Item - Mega Menu -->
<div class="hs-mega-menu u-header__sub-menu" aria-labelledby="interactiveMegaMenu3">
<div class="row no-gutters">
<div class="col-lg-8">
<div class="u-header__promo-card-deck">
<!-- Promo Item -->
<div class="u-header__promo-card u-header__promo-item">
<a class="u-header__promo-link" href="#">
<div class="media align-items-center">
<img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-45.svg" alt="SVG">
<div class="media-body">
<span class="u-header__promo-title">Title</span>
<small class="u-header__promo-text">Content description</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="u-header__promo-card u-header__promo-item">
<a class="u-header__promo-link" href="#">
<div class="media align-items-center">
<img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-13.svg" alt="SVG">
<div class="media-body">
<span class="u-header__promo-title">Title</span>
<small class="u-header__promo-text">Content description</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
</div>
<div class="u-header__promo-card-deck">
<!-- Promo Item -->
<div class="u-header__promo-card u-header__promo-item">
<a class="u-header__promo-link" href="#">
<div class="media align-items-center">
<img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-19.svg" alt="SVG">
<div class="media-body">
<span class="u-header__promo-title">Title</span>
<small class="u-header__promo-text">Content description</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="u-header__promo-card u-header__promo-item">
<a class="u-header__promo-link" href="#">
<div class="media align-items-center">
<img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-4.svg" alt="SVG">
<div class="media-body">
<span class="u-header__promo-title">Title</span>
<small class="u-header__promo-text">Content description</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
</div>
<div class="u-header__promo-card-deck">
<!-- Promo Item -->
<div class="u-header__promo-card u-header__promo-item">
<a class="u-header__promo-link" href="#">
<div class="media align-items-center">
<img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-5.svg" alt="SVG">
<div class="media-body">
<span class="u-header__promo-title">Title</span>
<small class="u-header__promo-text">Content description</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="u-header__promo-card u-header__promo-item">
<a class="u-header__promo-link" href="#">
<div class="media align-items-center">
<img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-23.svg" alt="SVG">
<div class="media-body">
<span class="u-header__promo-title">Title</span>
<small class="u-header__promo-text">Content description</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
</div>
</div>
<!-- Promo -->
<div class="col-md-4 u-header__promo d-none d-lg-block">
<a class="d-block u-header__promo-inner" href="#">
<div class="position-relative">
<img class="img-fluid rounded mb-3" src="../../assets/img/380x227/img6.jpg" alt="Image Description">
<span class="badge badge-success badge-pill badge-pos shadow-sm mt-3">New</span>
</div>
<span class="text-secondary font-size-1">Front makes you look at things from a different perspectives.</span>
</a>
</div>
<!-- End Promo -->
</div>
</div>
<!-- End Interactive Nav Item - Mega Menu -->
</li>
<!-- End Interactive Nav Item -->
<!-- Interactive Nav Item -->
<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="interactiveMegaMenu5" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Docs block</a>
<!-- Interactive Nav Item - Mega Menu -->
<div class="hs-mega-menu u-header__sub-menu" aria-labelledby="interactiveMegaMenu5" style="min-width: 330px;">
<!-- Promo Item -->
<div class="u-header__promo-item">
<a class="u-header__promo-link" href="#">
<div class="media align-items-center">
<img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-2.svg" alt="SVG">
<div class="media-body">
<span class="u-header__promo-title">
Documentation
<span class="badge badge-primary badge-pill ml-1">v2.0</span>
</span>
<small class="u-header__promo-text">Development guides</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="u-header__promo-item">
<a class="u-header__promo-link" href="#">
<div class="media align-items-center">
<img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-1.svg" alt="SVG">
<div class="media-body">
<span class="u-header__promo-title">Get started</span>
<small class="u-header__promo-text">Components and snippets</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
<div class="u-header__promo-footer">
<!-- List -->
<div class="row no-gutters">
<div class="col-6">
<div class="u-header__promo-footer-item">
<small class="text-muted d-block">Check what's new</small>
<a class="small" href="#">
Changelog
</a>
</div>
</div>
<div class="col-6 u-header__promo-footer-ver-divider">
<div class="u-header__promo-footer-item">
<small class="text-muted d-block">Have a question?</small>
<a class="small" href="#">
Contact us
</a>
</div>
</div>
</div>
<!-- End List -->
</div>
</div>
<!-- End Interactive Nav Item - Mega Menu -->
</li>
<!-- End Interactive Nav Item -->
Animation
To open and close mega menus with animation, use data-animation-in="" and data-animation-out="" attributes
All available animation values, can be found here .
<!-- SlideInUp Item -->
<li class="nav-item hs-has-mega-menu u-header__nav-item"
data-animation-in="slideInUp"
data-animation-out="fadeOut">
<a id="slideInUpMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">SlideIn</a>
</li>
<!-- End SlideInUp Item -->
<!-- FadeIn Item -->
<li class="nav-item hs-has-mega-menu u-header__nav-item"
data-animation-in="fadeIn"
data-animation-out="fadeOut">
<a id="fadeInUpMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">FadeIn</a>
</li>
<!-- End FadeIn Item -->
<!-- No Animation Item -->
<li class="nav-item hs-has-mega-menu u-header__nav-item">
<a id="noAnimationMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">No animation</a>
</li>
<!-- End No Animation Item -->
Alignment
Set data-position="" to "left" or "right" to align the mega menu position according to that side.
<!-- Left Alignment Item -->
<li class="nav-item hs-has-mega-menu u-header__nav-item"
data-position="left">
<a id="leftAlignmentMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Left alignment</a>
</li>
<!-- End Left Alignment Item -->
<!-- Right Alignment Item -->
<li class="nav-item hs-has-mega-menu u-header__nav-item"
data-position="right">
<a id="rightAlignmentMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Right alignment</a>
</li>
<!-- End Right Alignment Item -->
There are certain moments like, when mega menu size is small and located far from left or right corners where setting data-position="" to "left" or "right" is not an optimal solution. In this case, use .u-header__mega-menu-position-right-fix class for proper alignment.
<!-- Proper Alignment Item -->
<li class="nav-item hs-has-mega-menu u-header__nav-item"
data-position="right">
<a id="properAlignmentMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Proper alignment</a>
<!-- Nav Item - Mega Menu -->
<div class="hs-mega-menu u-header__sub-menu u-header__mega-menu-position-right-fix" aria-labelledby="properAlignmentMegaMenu">
</div>
<!-- End Nav Item - Mega Menu -->
</li>
<!-- End Proper Alignment Item -->
Event
Choose opening events from hover to click through JavaScript init and data-event="event" attribute.
<!-- Click Event Item -->
<li class="nav-item hs-has-mega-menu u-header__nav-item"
data-event="click">
<a id="clickEventMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Click Event</a>
</li>
<!-- End Click Event Item -->
event: 'click',
Or set them to hover.
<!-- Hover Event Item -->
<li class="nav-item hs-has-mega-menu u-header__nav-item"
data-event="hover">
<a id="hoverEventMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Hover Event</a>
</li>
<!-- End Hover Event Item -->
event: 'hover',
Responsive
Set your collapsing breakpoint to your needs through JavaScript init. This example collapses the mega menu at 576 breakpoint. Learn more here.
<!-- JS Plugins Init. -->
<script>
$('.js-mega-menu-responsive').HSMegaMenu({
event: 'hover',
pageContainer: $('.container'),
breakpoint: 575.98,
hideTimeOut: 0
});
</script>
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 |