Slidebar Menu > Detect when Open [Solved]

Hi all, is there a way to detect when the Slidebar Menu is open?

Thanks!

There isn’t.

i suppose you could go with an see through box over the menu button, user clicks that non the wiser and you can log the event…

Cool, thanks @jarrad - I’ll give that a try.

To query in javascript …

$('.slideable-menu').css('display')

shows either ‘none’ or ‘block’.

Thanks @mishav - where is this javascript placed?

Here:

Or in Run Javascript workflow?

Thanks again!

“Run Javascript” action and HTML element javascript have no direct way to get a value or event into Bubble.

“Javascript to Bubble” defines a function that you can call to get an event or a value back into Bubble.

The “display none/block” is a style value, rather than an event, so it answers “is it open now” rather than “when has it opened”.

Choices:
A. “Is it open now?”
Run Javascript → Javascript to Bubble’s value.

var visible = $('.slideable-menu').css('display') === 'block';
bubble_fn_isOpen(visible);

B. Poll the style value and raise an event or value change to Bubble. It is kind of a waste of cycles though.

C. Detect open/close event - its kind of hard to do this if we didn’t create the control.

D. Detect click on the hamburger icon and on/off the slide menu, then query the value …
HTML element javascript → click handler → Javascript to Bubble’s value and event.

This is rather complex, I’ll get back to you on this option.

@collegefund.me, here is a demo solution.

Event handlers are added for click on the menu plus click on the page, which triggers three delayed checks on the menu visibility. I found the delay was needed, because at the time of the click, the menu has not yet responded to it. Repeated three times to allow for delays, or if the user clicks quickly to open and close the menu.

If the visibility has changed since the last check, an event is triggered in the workflow, and the boolean value is published.

1 Like

@mishav - wow, this is amazing! Thank you!

1 Like