Skip to main content

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 .navbar class.
  • .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-megamenu JavaScript 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

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

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

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>
Copy

Examples

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 -->
Copy

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 -->
Copy

Event

Choose opening events from hover to click through JavaScript init and data-event="event" attribute.

event: 'click',
Copy
<!-- 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 -->
Copy

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
});
Copy
<!-- 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 -->
Copy

JavaScript behavior

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
Copy

Callbacks 

beforeOpen: function(){} - function
beforeClose: function(){} - function
afterOpen: function(){} - function
afterClose: function(){} - function
Copy

Methods

List of available JavaScript functions.

Attribute Description Default value

event

 Defines the event on which the menu will be displayed. Valid values are:
  • click
  • hover
 hover

direction

 Direction of the menus. Valid values are:
  • horizontal
  • vertical
 horizontal

breakpoint

 Determines below what permission the device layout is enabled.

animationIn

 Revealing effect. To run the script, you must additionally link animate.css
All available animation values, can be found here.		 no

animationOut

 Disappearing effect. To run the script, you must additionally link animate.css
All available animation values, can be found here.		 no

rtl

 If true, displays all items from right-to-left (RTL). false

hideTimeOut

 Delay of the disappearance of the menu. 300

sideBarRatio

 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.

pageContainer

 Determines relative to what element the drop-down menu will be positioned. Works only if Works only if direction set to true.

classMap

 Defines the class names for the elements of the mega menu. Works only if Works only if direction set to true.
  • initialized - A class-trigger informing that the menu is ready to work.
  • mobileState - A class-trigger that indicates that the menu has moved to the mobile layout.
  • subMenu - Defines the classes for the sub-menu.
  • hasSubMenu - Defines a trigger class for items that have a sub-menu.
  • hasSubMenuActive - Defines the active class when the sub-menu is opened.
  • megaMenu - Defines the classes for the mega-menu.
  • hasMegaMenu - Defines a trigger class for items that have a mega-menu.
  • hasMegaMenuActive - Defines the active class when opening the mega-menu.

mobileSpeed

 Opening speed of the menu in the mobile layout. 400

mobileEasing

 Determines the smoothness of the animation. Valid values are:
  • linear
  • swing
jquery.easing.min.js plugin is required to extend the plugin.

Additional values:
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInSine
  • easeOutSine
  • easeInOutSine
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInCirc
  • easeOutCirc
  • easeInOutCirc
  • easeInElastic
  • easeOutElastic
  • easeInOutElastic
  • easeInBack
  • easeOutBack
  • easeInOutBack
  • easeInBounce
  • easeOutBounce
  • easeInOutBounce
 linear