Opening Submenus with Click Instead of Hover in Bricks

This Pro tutorial provides the code for opening submenus with click instead of hover in Bricks.

Step 1

Add this in child theme‘s style.css:

body .brxe-nav-menu .bricks-nav-menu li:hover > .sub-menu,
body .brxe-nav-menu .bricks-nav-menu li[aria-expanded="true"] > .sub-menu {
  opacity: 0;
  visibility: hidden;
}

Step 2

Let’s load a custom script.js file by implementing the Enqueueing a JavaScript File in Bricks tutorial.

Step 3

Paste the following JS inside script.js:

document.addEventListener("DOMContentLoaded", () => {
  // ensure that clicking sub menu links work as intended and that it does not close the menu by preventing event bubbling
  document
    .querySelectorAll(".brxe-nav-menu .bricks-nav-menu > li li a")
    .forEach((link) => {
      link.addEventListener("click", (e) => {
        e.stopPropagation()
      })
    })

  // when ".brxe-nav-menu .bricks-nav-menu li" having a child "ul" is clicked, toggle opacity and visibility of ".brxe-nav-menu .bricks-nav-menu li > .sub-menu" to 1
  document
    .querySelectorAll(".brxe-nav-menu .bricks-nav-menu > li")
    .forEach((link) => {
      link.addEventListener("click", (e) => {
        if (link.querySelector("ul")) {
          e.preventDefault()

          // toggle opacity and visibility of siblings' ".brxe-nav-menu .bricks-nav-menu li > .sub-menu" to 0 and hidden
          link.parentNode
            .querySelectorAll("li > .sub-menu")
            .forEach((sibling) => {
              sibling.style.opacity = 0
              sibling.style.visibility = "hidden"
            })

          if (link.querySelector("ul").style.opacity == 0) {
            link.querySelector("ul").style.opacity = 1
            link.querySelector("ul").style.visibility = "visible"
          } else {
            link.querySelector("ul").style.opacity = 0
            link.querySelector("ul").style.visibility = "hidden"
          }
        }
      })
    })

  // if a click happens anywhere on the page except on ".brxe-nav-menu .bricks-nav-menu > li" or its children, set opacity and visibility of ".brxe-nav-menu .bricks-nav-menu .sub-menu" to 0 and hidden
  document.addEventListener("click", (e) => {
    if (!e.target.closest(".brxe-nav-menu .bricks-nav-menu > li")) {
      document
        .querySelectorAll(".brxe-nav-menu .bricks-nav-menu .sub-menu")
        .forEach((link) => {
          link.style.opacity = 0
          link.style.visibility = "hidden"
        })
    }
  })
})