JS only Mega Menu in Bricks Builder

Example

Here you can see a full working example of the Mega-Menu.

Video Walkthrough

Step-by-step guide

The Step-by-Step Instructions always assume that you have installed the child-theme. If not you will have to manually enqueue the script/styles.

Assign An ID to your Nav-Menu

First of all you have to place a Nav-Menu on your page/template. Assign that Nav-Menu an ID then like so:

Create Your Dropdowns

Creating a Dropdown for the Mega Menu is as easy as creating any other Content.

Put anything you would like to show up in a Container element.
Assign that Container-Element at least the attribute “wcd_mm_target” with a corresponding Value
- To get the right Value you have to count from 0 to X. I.e. If you want to to assign the dropdown to the second Menu-Item you have to use a Value of “1”.
Optional: Give it a custom Position by using the attribute “wcd_mm_position”
Repeat that step for every Dropdown you want to create!

Enqueue The Files

Assuming that you are using the child-theme all you need to do is using wp_enqueue_script to load the necessary JS file. Then you just need to initialize the Mega Menu by passing the ID of the Nav-Element (Step 1) and also defining the options you want to use.

You can copy & paste the example below, which also includes all possible options, make sure to change the ID of the Mega-Menu.

Paste that following code inside a Code-Block. Doesn’t matter where on your page the code block is. If you use the provided Code all Javascript-Files will get loaded in the correct order & in the footer by default!

<?php

wp_enqueue_script('wcd_megaMenu');

add_action('wp_footer', function() { 
?>

<script>
const megaMenu = new WCD_megaMenu({
    menu : '#myMegaMenu',
    position : 'center',            // GLOBAL, CAN BE OVERWRITTEN BY EVERY DROPDOWN
    click : {
        open},
    hover: {
        open},
    breakpoint : window.matchMedia("(max-width: 766px)"),
});
</script>


<?php

}, 99);

?>

Options & Parameter to adapt

As you maybe saw in the Code above, there are a few options you can adapt to change the behaviour of the Mega-Menu:

Option Name	Type	Default Value	Note
menu	String	-	ID of your Nav-Menu Element. Include the hash (#) sign!
position	String	'right'	Where to align the Mega-Menu (in relation to it's corresponding menu-item). Possible options are: 'left', 'center', 'right' and 'screen-center'
click	Object	-	Accepts two child-parameters: open & close which are both Boolean Values.
click.open	Boolean	true	Whether the Mega-Menu should be opened on click or not!
click.close	Boolean	true	Whether the Mega-Menu should be closed on click (outside) or not!
hover	Object	-	Accepts two child-parameters: open & close which are both Boolean Values.
hover.open	Boolean	false	Whether the Mega-Menu should be opened when hovering the menu-item.
hover.close	Boolean	false	Whether the Mega-Menu should be closed when hovering outside.
breakpoint	String	-	Defines at which breakpoint the mega-menu should switch to mobile-mode. Use the same Setting as in Bricks Builder for your mobile-nav. use `window.matchMedia` with a certain breakpoint like so `window.matchMedia("(max-width: 766px)")` Learn more about it here!

Example of a completed Options Object:

const options = {
    menu: '#myMegaMenu',
    position: 'center',
    click: {
        open},
    hover: {
        open},
    breakpoint: window.matchMedia("(max-width: 766px)"),
}

Full Source Code

This Section get's updated automatically and always shows the latest Version of the source-code. You can copy & paste that code if you haven't installed the child-theme.

https://raw.githubusercontent.com/Wolfi1616/Bricks-Tutorial-Elements/main/snippets/mega-menu/wcd_megaMenu.js

Hosted with ❤️ by Github, created with bricks