Header Mega Menu
Documentation and examples for Space'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 Space 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
<!-- Nav -->
<nav class="js-mega-menu-basic navbar navbar-expand-lg u-header__navbar">
<div id="navBarBasic" class="navbar-collapse u-header__navbar-collapse">
<ul class="navbar-nav u-header__navbar-nav">
<!-- Basic Mega Menu -->
<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" href="javascript:;"
aria-haspopup="true"
aria-expanded="false">
Mega Menu
<span class="fa fa-angle-down u-header__nav-link-icon"></span>
</a>
<!-- Mega Menu -->
<div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="basicMegaMenu">
<div class="u-header__mega-menu-wrapper-v1">
<ul class="row list-unstyled u-header__mega-menu-list">
<li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
<span class="u-header__sub-menu-title">Title</span>
<!-- Links -->
<ul class="list-unstyled">
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
</ul>
<!-- End Links -->
</li>
<li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
<span class="u-header__sub-menu-title">Title</span>
<!-- Links -->
<ul class="list-unstyled">
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
</ul>
<!-- End Links -->
</li>
<li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
<span class="u-header__sub-menu-title">Title</span>
<!-- Links -->
<ul class="list-unstyled">
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
</ul>
<!-- End Links -->
</li>
<li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-sm-0">
<span class="u-header__sub-menu-title">Title</span>
<!-- Links -->
<ul class="list-unstyled">
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
</ul>
<!-- End Links -->
</li>
</ul>
</div>
</div>
<!-- End Mega Menu -->
</li>
<!-- Basic Mega Menu -->
</ul>
</div>
</nav>
<!-- End 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 -->
<nav class="js-mega-menu-columns navbar navbar-expand-lg u-header__navbar">
<div id="navBarBasic" class="navbar-collapse u-header__navbar-collapse">
<ul class="navbar-nav u-header__navbar-nav">
<!-- Two Columns Mega Menu -->
<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="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>
<!-- Mega Menu -->
<div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="twoColumnsMegaMenu">
<div class="u-header__mega-menu-wrapper-v1">
<ul class="row list-unstyled u-header__mega-menu-list">
<li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
<span class="u-header__sub-menu-title">Title</span>
<!-- Links -->
<ul class="list-unstyled">
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
</ul>
<!-- End Links -->
</li>
<li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
<span class="u-header__sub-menu-title">Title</span>
<!-- Links -->
<ul class="list-unstyled">
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
</ul>
<!-- End Links -->
</li>
</ul>
</div>
</div>
<!-- End Mega Menu -->
</li>
<!-- End Two Columns Mega Menu -->
<!-- Three Columns Mega Menu -->
<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="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>
<!-- Mega Menu -->
<div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="threeColumnsMegaMenu">
<div class="u-header__mega-menu-wrapper-v1">
<ul class="row list-unstyled u-header__mega-menu-list">
<li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
<span class="u-header__sub-menu-title">Title</span>
<!-- Links -->
<ul class="list-unstyled">
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
</ul>
<!-- End Links -->
</li>
<li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
<span class="u-header__sub-menu-title">Title</span>
<!-- Links -->
<ul class="list-unstyled">
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
</ul>
<!-- End Links -->
</li>
<li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
<span class="u-header__sub-menu-title">Title</span>
<!-- Links -->
<ul class="list-unstyled">
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
</ul>
<!-- End Links -->
</li>
</ul>
</div>
</div>
<!-- End Mega Menu -->
</li>
<!-- End Three Columns Mega Menu -->
<!-- Four Columns Mega Menu -->
<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" href="javascript:;"
aria-haspopup="true"
aria-expanded="false">
4 Columns
<span class="fa fa-angle-down u-header__nav-link-icon"></span>
</a>
<!-- Mega Menu -->
<div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="fourColumnsMegaMenu">
<div class="u-header__mega-menu-wrapper-v1">
<ul class="row list-unstyled u-header__mega-menu-list">
<li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
<span class="u-header__sub-menu-title">Title</span>
<!-- Links -->
<ul class="list-unstyled">
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
</ul>
<!-- End Links -->
</li>
<li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
<span class="u-header__sub-menu-title">Title</span>
<!-- Links -->
<ul class="list-unstyled">
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
</ul>
<!-- End Links -->
</li>
<li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
<span class="u-header__sub-menu-title">Title</span>
<!-- Links -->
<ul class="list-unstyled">
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
</ul>
<!-- End Links -->
</li>
<li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-sm-0">
<span class="u-header__sub-menu-title">Title</span>
<!-- Links -->
<ul class="list-unstyled">
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
</ul>
<!-- End Links -->
</li>
</ul>
</div>
</div>
<!-- End Mega Menu -->
</li>
<!-- End Four Columns Mega Menu -->
<!-- Five Columns Mega Menu -->
<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" href="javascript:;"
aria-haspopup="true"
aria-expanded="false">
5 Columns
<span class="fa fa-angle-down u-header__nav-link-icon"></span>
</a>
<!-- Mega Menu -->
<div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="fiveColumnsMegaMenu">
<div class="u-header__mega-menu-wrapper-v1">
<ul class="row list-unstyled u-header__mega-menu-list">
<li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
<span class="u-header__sub-menu-title">Title</span>
<!-- Links -->
<ul class="list-unstyled">
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
</ul>
<!-- End Links -->
</li>
<li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
<span class="u-header__sub-menu-title">Title</span>
<!-- Links -->
<ul class="list-unstyled">
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
</ul>
<!-- End Links -->
</li>
<li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
<span class="u-header__sub-menu-title">Title</span>
<!-- Links -->
<ul class="list-unstyled">
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
</ul>
<!-- End Links -->
</li>
<li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-sm-0">
<span class="u-header__sub-menu-title">Title</span>
<!-- Links -->
<ul class="list-unstyled">
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
</ul>
<!-- End Links -->
</li>
<li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-sm-0">
<span class="u-header__sub-menu-title">Title</span>
<!-- Links -->
<ul class="list-unstyled">
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
</ul>
<!-- End Links -->
</li>
</ul>
</div>
</div>
<!-- End Mega Menu -->
</li>
<!-- End Five Columns Mega Menu -->
</ul>
</div>
</nav>
<!-- End Nav -->
Event
Choose opening events from hover to click through JavaScript init and data-event="event" attribute.
event: 'click',
<!-- Nav -->
<nav class="js-mega-menu-event navbar navbar-expand-lg u-header__navbar">
<div id="navBarBasic" class="navbar-collapse u-header__navbar-collapse">
<ul class="navbar-nav u-header__navbar-nav">
<!-- Basic Mega Menu -->
<li class="nav-item hs-has-mega-menu u-header__nav-item"
data-event="click"
data-animation-in="slideInUp"
data-animation-out="fadeOut"
data-position="left">
<a id="basicMegaMenu" 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>
<!-- Mega Menu -->
<div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="basicMegaMenu">
<div class="u-header__mega-menu-wrapper-v1">
<ul class="row list-unstyled u-header__mega-menu-list">
<li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
<span class="u-header__sub-menu-title">Title</span>
<!-- Links -->
<ul class="list-unstyled">
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
</ul>
<!-- End Links -->
</li>
<li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
<span class="u-header__sub-menu-title">Title</span>
<!-- Links -->
<ul class="list-unstyled">
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
</ul>
<!-- End Links -->
</li>
<li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
<span class="u-header__sub-menu-title">Title</span>
<!-- Links -->
<ul class="list-unstyled">
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
</ul>
<!-- End Links -->
</li>
<li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-sm-0">
<span class="u-header__sub-menu-title">Title</span>
<!-- Links -->
<ul class="list-unstyled">
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
</ul>
<!-- End Links -->
</li>
</ul>
</div>
</div>
<!-- End Mega Menu -->
</li>
<!-- End Basic Mega Menu -->
</ul>
</div>
</nav>
<!-- End 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 -->
<nav class="js-mega-menu-responsive navbar navbar-expand-sm u-header__navbar">
<div id="navBarResponsive" class="navbar-collapse u-header__navbar-collapse">
<ul class="navbar-nav u-header__navbar-nav">
<!-- Basic Mega Menu -->
<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" href="javascript:;"
aria-haspopup="true"
aria-expanded="false">
Mega Menu
<span class="fa fa-angle-down u-header__nav-link-icon"></span>
</a>
<!-- Mega Menu -->
<div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="basicMegaMenu">
<div class="u-header__mega-menu-wrapper-v1">
<ul class="row list-unstyled u-header__mega-menu-list">
<li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
<span class="u-header__sub-menu-title">Title</span>
<!-- Links -->
<ul class="list-unstyled">
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
</ul>
<!-- End Links -->
</li>
<li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
<span class="u-header__sub-menu-title">Title</span>
<!-- Links -->
<ul class="list-unstyled">
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
</ul>
<!-- End Links -->
</li>
<li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
<span class="u-header__sub-menu-title">Title</span>
<!-- Links -->
<ul class="list-unstyled">
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
</ul>
<!-- End Links -->
</li>
<li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-sm-0">
<span class="u-header__sub-menu-title">Title</span>
<!-- Links -->
<ul class="list-unstyled">
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
</ul>
<!-- End Links -->
</li>
</ul>
</div>
</div>
<!-- End Mega Menu -->
</li>
<!-- End Basic Mega Menu -->
</ul>
</div>
</nav>
<!-- End 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 |