[OutSystems UI] Submenu auto close after clicking a button or link action
outsystems-ui
Forge component by Platform Maintenace
Application Type
Reactive
Service Studio Version
11.10.19 (Build 41208)

I wrote some Javascript in OnReady of the Menu to add class "open" to the active menu element to keep the submenu items list expand when the main menu is active. But the problem is whenever I click on a button or link action on the screen, the active menu keeps removing the class "open". However, this is solved if I refresh the whole page, and then it will work just fine for the rest. Do you have any idea about this and how to solve this but not by refreshing the website?

mvp_badge
MVP

Hi Linh,

The general behaviour of the Submenu items list is to get collapsed even though the main menu is active. Still, I doubt the user-friendliness based on this requirement.

The solution which I could suggest for the mentioned use case is

  1. Create OnReady event handler for Menu Block
  2. Introduce a JS node within the OnReady event handler flow
  3. Define the below-mentioned JS code in the same JS node

JS Snippet:

var activeSubMenu = document.querySelector('.submenu.is--dropdown.active');

var openActiveSubMenu = function() {
   if (!activeSubMenu.classList.contains('open')) {
       activeSubMenu.classList.add('open');
    }
};

if (activeSubMenu) {
    openActiveSubMenu();
    document.addEventListener('click', openActiveSubMenu, false);
}


Hope this helps you!


Kind regards,

Benjith Sam

Hi Benjith ,

I have the same problem in my application. I tried your JS code in OnReady event, but it does not work.

.submenu.is--dropdown.active

It seems that ".active" class do not exsit in submenu.

Do you have any other soluton about this problem? Thank u.

A08783F9B856469c8201AA3305185896.png

mvp_badge
MVP

Hi Ju,

Sorry for the late response. In my implementation, I was referring to the Reactive application with the Top sub-menu.

You can take a look on the sample screen

If that doesn't help, could you please share a sample .oml


Hope this helps you!


Kind regards,

Benjith Sam

Champion

Dear Linh

You can use the Simple JS to close the Dropdown - 

window.onclick = function(event) {

  if (!event.target.matches('.dropbtn')) {     var dropdowns = document.getElementsByClassName("dropdown-content");     var i;     for (i = 0; i < dropdowns.length; i++) {       var openDropdown = dropdowns[i];       if (openDropdown.classList.contains('show')) {         openDropdown.classList.remove('show');       }     }   } }
.dropbtn is the class of Dropdown Button

Check reference: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar_click


Let me know if you need OML for this. 

I need .oml for this


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.