Mega menu dissappearing when tab clicked

[mgaussie]

Hey all,

I’ve created a mega menu with some custom code using Wapplers drop down element - within that I’ve added a tab navigation menu to create the mea menu (see screen below).

The problem I’m having as when I click on each of the tabs to display the different tab content area the whole drop down closes.

Any recommendations on how to stop this happening?

Also as this is in a layout page - I don’t seem to be able to trigger any actions on hover (mouse over) - nothing appears in the actions options menu, just blank.

[mebeingken]

You'll want to take a look at the modifiers -- either within Wappler, or your custom code.

Just for a Wappler only example:

This is a container with a default set of tabs added. The container has a click event that triggers a notification. Without the modifier (self) the notification triggers on each click of a tab, because the click bubbles up the dom.

Here's a quick rundown from Patrick:

What is the meaning of Input (Dynamic Events under Data) Modifiers for Text Input

Not sure if it is explained in the docs, they are event modifiers. stop - is same as stopPropagation(), it prevents the event from bubbling up the dom prevent - is the preventDefault(), it prevents the default action (like following the link) capture - execute the actions in the action phase of the event bubbling self - only execute the action if the event was triggered on the current node (not triggered using bubbling from a node below the current) once - only execute the action once, remo…

[mgaussie]

Thank you for replying Ken.

Unfortunately I am unable to do any events for some reason, perhaps as this is on a layout - the events section is blank. I’m using the default Wappler tab navigation - so this switches between tabs and tab content on click.

I’ve tried adding a click event but leaving the selection empty and testing the various modifiers based on your recommendation just now - without luck.

[mebeingken]

Assuming you haven’t modified the tabs Wappler starts with, you can add this:

	<script>
        $('.nav-link').on('click', function(event) {

            event.stopPropagation();
            event.preventDefault();
            $(this).tab('show');
        })
	</script>

Obviously this will interrupt every tab nav with the nav-link class, so if that isn’t desired, you can add your own class to control.

[mgaussie]

Hey Ken,

Thank you for this, much appreciated. Unfortunately this stopped the nav drop down from opening at all - however, opening within Wappler this did in fact work as desired when open which is amazing, I just can’t figure out why it’s stopping it from opening in the first place.

When you say class control, where would you add this in the code?

Noting this is a NodeJS project if that makes any difference?

[mebeingken]

	<script>
        $('.nav-link').on('click', function(event) {

            event.stopPropagation();
            event.preventDefault();
            $(this).tab('show');
        })
	</script>

This code is executing on any element with the class nav-link. You can change that to anything you want. For example

	<script>
        $('.special-nav-link').on('click', function(event) {

            event.stopPropagation();
            event.preventDefault();
            $(this).tab('show');
        })
	</script>

And then add special-nav-link to the class property of the Tab Nav Links only.

[mgaussie]

Amazing, this works. Thank you so very much!!