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 */);
});