Mega Menu

Documentation and examples for Front's powerful, and responsive navigation mega menu.

How to use

Copy-paste the stylesheet <link> into your <head> to load the CSS.

              
                <link rel="stylesheet" href="../assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

              
                <script src="../assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

              
                <script>
                  $(document).on('ready', function () {
                    // initialization of mega menu
                    var megaMenu = new HSMegaMenu($('.js-mega-menu')).init();
                  });
                </script>

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.

Example

Columns

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-hs-mega-menu-item-options='{ "desktop": { "maxWidth": "" } }' attribute.

Alignment

Set "desktop": { "position": "left" } to "left" or "right" to align the mega menu position according to that side.

Responsive

Set your collapsing breakpoint - Determines with what resolution mobile layout is enabled. Resolution Map corresponds to Bootstrap and requires the same .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing. This example collapses the mega menu at 768 / md breakpoint.

Methods

Parameters Description Default value

eventType

 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 with what resolution mobile layout is enabled. Resolution Map corresponds to Bootstrap 4 'lg'

itemOptions.desktop.animationIn

 Appearing effect 'slideInUp'

itemOptions.desktop.animationOut

 Disappearing effect false

itemOptions.desktop.position

 Menu location during initialization null

itemOptions.desktop.maxWidth

 Sets the maximum width for the dropdown menu null

rtl

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

hideTimeOut

 Delay of the disappearance of the menu 300

sideBarRatio

 Determines how much of the width the sidebar will occupy the dropdown list. Only works if direction: 'vertical' 1 / 4

pageContainer

 Determines with respect to which element the drop-down menu will be positioned. Only works if direction: 'vertical' $('body')

mobileSpeed

 Opening speed of the menu in the mobile layout 400

classMap.initialized

 Class informing that the menu is ready to work '.hs-menu-initialized'

classMap.mobileState

 Class informing that the menu has moved to mobile layout '.hs-mobile-state'

classMap.subMenu

 Class for the sub menu. The script will look for exactly this class when working '.hs-sub-menu'

classMap.hasSubMenu

 Class for items that contain a sub menu. The script will look for exactly this class when working '.hs-has-sub-menu'

classMap.hasSubMenuActive

 Class given to an invoker when opening a sub menu '.hs-sub-menu-opened'

classMap.megaMenu

 Class for mega menu. The script will look for exactly this class when working '.hs-mega-menu'

classMap.hasMegaMenu

 Class for items that contain mega menus. The script will look for exactly this class when working '.hs-has-mega-menu'

classMap.hasMegaMenuActive

 Class given to an invoker when opening a mega menu '.hs-mega-menu-opened'