project_theme_megamenu

Note: the menu provided by this extension is for use on tablet and desktop screens. For a menu that is shown on smaller screens the responsive-side-menu is recommended.

Warning: check the upgrading instructions if the extension is already installed.

Installation / Integration

First install the extension and activate it in the Extension-Manager.

TypoScript integration

  • Include the TypoScript in Configuration/TypoScript/Frontend/setup.typoscript in your theme.
  • Add a column to your Backend-Layout where the menu items will be stored. This column needs to have the colPos 594.

JavaScript integration

Import the megaMenu.js module in your theme and activate the menu by calling the MegaMenu constructor. You need to pass a reference to your main navigation element as the parameter.

Options object

NameDescriptionTypeRequiredDefault
sizeReferenceThe element which tells the menu the maximum dimensionsHTMLElementYes-
languageBaseThe language base of the TYPO3 site's URL, e.g. / or /de/stringYes-
clickToOpenSet to false if you want to open the flyout via hover statesbooleanNotrue
clickToCloseSet to true if you want to close the flyout instead of navigating to the clicked link. clickToOpen needs to be enabled for this to have an effect.booleanNo-
closeButtonSet to true if a close button should be added to the flyoutsbooleanNo-
flyoutContainerClassThe class name for an optional container for the flyout contentstringNo-
fullWidthSet to true to let the menu span over the full width of the element given as sizeReference, so e.g. the full page width with the body element.booleanNo-
disableRightOverflowResetSet to true to disable the flyout position reset if the flyout can overflow on the right side.booleanNo-

Style integration

You can import the _megaMenu.scss file in your theme to get the basic styles upon which you can then build your design.

Responsive Side Menu integration

Add the responsive-side-menu when the megaMenuReady event is dispatched:

document.body.addEventListener('megaMenuReady', () => {
    new ResponsiveSideMenu(/* navigation id */, /* options */);
});