Changing visibility of an element after clicking anywhere

Hi! I built a mega menu by hiding en element in the navigation bar and toggling the visibility with a button. This works great, but I would like the menu to close (e.g. the visibility set to hidden) when I click anytime on the page outside the menu. How can I achieve such an effect?
Thanks in advance.

Hi,

I recommend building a mega menu using offcanvas feature, following this tutorial :point_down:

I would suggest checking out a custom bric by @PeteSharp called off canvas helper at Offcanvas Helper Bric | Blocs Builder

This makes the process very simple and it has extensions coming that will extend the flexibility. It also has features for accessibility. As an afterthought, version two with added features is in testing right now and will be available as a free update.

2 Likes

Correct Offcanvas Helper v2 is a free update for existing users. Final testing at the moment then it will roll out.

Offcanvas Helper gives you options you can’t easily add yourself without knowledge of code or HTML accessibility, including any buttons / links you use to toggle your menu, it will handle automatically.

It’s all native, correctly applied markup.

Extra options in V2. :smile:

1 Like

I’ve tried creating off-canvas features in two ways: by myself and using @PeteSharp’s Offcanvas Helper tool. Using the Offcanvas Helper is easier, but there’s another, more important reason to use it: it organizes the code better.

Using HTML elements correctly improves a website’s accessibility, makes it easier to find on search engines, allows people from all over the world to use it, and helps it work well with other online services. In simple terms, using the right HTML elements is essential if you want your website to be easy for everyone to use, to rank well in search engine results, to be accessible to an international audience, and to connect smoothly with other online tools.

Creating web content the right way means making it understandable for both people and computers. When both can read the web content easily, it becomes more accessible. Computers can better analyze and organize the information, making it easier for people to find and use, and for developers to combine different pieces of information to create new online services.

If you care about visibility and accessibility Offcanvas Helper is your buddy.