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
| Name | Description | Type | Required | Default |
|---|---|---|---|---|
sizeReference | The element which tells the menu the maximum dimensions | HTMLElement | Yes | - |
languageBase | The language base of the TYPO3 site's URL, e.g. / or /de/ | string | Yes | - |
clickToOpen | Set to false if you want to open the flyout via hover states | boolean | No | true |
clickToClose | Set 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. | boolean | No | - |
closeButton | Set to true if a close button should be added to the flyouts | boolean | No | - |
flyoutContainerClass | The class name for an optional container for the flyout content | string | No | - |
fullWidth | Set 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. | boolean | No | - |
disableRightOverflowReset | Set to true to disable the flyout position reset if the flyout can overflow on the right side. | boolean | No | - |
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 */);
});