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.
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 | - |
Enable static rendering
Add this condition to your existing `
MainMenu.html`
file to enable the option to statically render the megamenu.
This option can be enable or disabled in the TYPO3 Template module inside the backend.
<li ...>
<a ...></a>
<f:if condition="{sgm:hasMegaMenu(page: '{item.data}')} == 'true' && {settings.staticMegamenu}">
<div class="m-mega-menu {f:if(condition: '{settings.staticMegamenu}', then: 'm-mega-menu--static')}">
<div class='m-mega-menu__flyout'>
<sgm:getMenuContent pid='{item.data.uid}' />
</div>
</div>
</f:if>
</li>
Responsive Side Menu integration
Add the responsive-side-menu with the megaMenuReady
event.
document.body.addEventListener('megaMenuReady', () => {
new ResponsiveSideMenu(/* options */);
});