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, we recommend the Responsive Side Menu integrated inside the project_theme.

Installation / 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.
  • Add proper stylings (You can import the _megaMenu.scss file in your theme to get the basic styles upon which you can then build your design.)
  • 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, and the language base.

Example:

new Megamenu(document.getElementById('mainMenu'), {
    sizeReference: document.getElementById('mainMenu'),
    languageBase: document.getElementById('translation-container').dataset.languageBase
});

Options object

Hint: Some options will require CSS related changes inside the theme like the close button.

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-

Responsive Side Menu integration

Add the responsive-side-menu with the megaMenuReady event.

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