how to add submenu in submenu in outsystem. two levels of submenu.
Question

hi i want to add two levels of sub menu. how to add submenu into submenu.

Plz refer the below attached file:


submenu two level.png

bharat koshti wrote:

hi i want to add two levels of sub menu. how to add submenu into submenu.

Plz refer the below attached file:


Bharat,


You can manage with SilkUI to do this look this thread in forum.

https://goo.gl/m6AMgh


Hello!


Bumping this old thread with a solution that might be useful in the future.


In order to have nested Sub-Menus (effectively having one or multiple DropDownMenu Web Block(s) inside another DropDownMenu Web Block), a small JavaScript tweak is needed.


If that is the case, please include the following script in the layout Web Block (or some other place that seems fit).


// Fix opening/closing nested menu items
document.body.addEventListener( "click", function( e ) {
    var currentMenuButton = e.target.parentNode.closest( ".Menu_DropDownButton" );
    if ( ! currentMenuButton ) {
        return;
    }
    var parentMenuButton = currentMenuButton.parentNode.closest( ".Menu_DropDownButton" );
    if ( ! parentMenuButton ) {
        return;
    }
    parentMenuButton.classList.remove( "open" );
    setTimeout( function() {
        parentMenuButton.classList.add( "open" );
    }, 0 );
}, true );

// Set custom menu animation
if ( window.RichWidgets ) {
    window.RichWidgets.DropDownMenus.customOpenFunction = function( e ) {
        if ( e.parentNode.classList.contains( "open" ) ) {
            $( e ).fadeIn( 200 );
        }
    };
    window.RichWidgets.DropDownMenus.customCloseFunction = function( e ) {
        $( e ).stop().fadeOut( 200 );
    };
}


This has been tested in a Traditional Web application (O10).

Caio Santana Magalhães wrote:

Hello!


Bumping this old thread with a solution that might be useful in the future.


In order to have nested Sub-Menus (effectively having one or multiple DropDownMenu Web Block(s) inside another DropDownMenu Web Block), a small JavaScript tweak is needed.


If that is the case, please include the following script in the layout Web Block (or some other place that seems fit).


// Fix opening/closing nested menu items
document.body.addEventListener( "click", function( e ) {
    var currentMenuButton = e.target.parentNode.closest( ".Menu_DropDownButton" );
    if ( ! currentMenuButton ) {
        return;
    }
    var parentMenuButton = currentMenuButton.parentNode.closest( ".Menu_DropDownButton" );
    if ( ! parentMenuButton ) {
        return;
    }
    parentMenuButton.classList.remove( "open" );
    setTimeout( function() {
        parentMenuButton.classList.add( "open" );
    }, 0 );
}, true );

// Set custom menu animation
if ( window.RichWidgets ) {
    window.RichWidgets.DropDownMenus.customOpenFunction = function( e ) {
        if ( e.parentNode.classList.contains( "open" ) ) {
            $( e ).fadeIn( 200 );
        }
    };
    window.RichWidgets.DropDownMenus.customCloseFunction = function( e ) {
        $( e ).stop().fadeOut( 200 );
    };
}


This has been tested in a Traditional Web application (O10).

 

Hi caio, can you please elaborate this, in which exact web block we need to place this Java script code.

More detail to achieve this 3 level menu.

Thanks,
DM

 

Hi! You can place it in your layout webblock.


I've tested it for two-level sub-menus, but not for three-level sub-menus, though.


Thanks.

Thanks, it is working but I had to put 

document.addEventListener( "click", function( e ) {

instead of 

document.body.addEventListener( "click", function( e ) {

in header javascript section.


Another issue, all my submenus inside the menu (inside submenu) are shown when I click the parent menu, and I have to click twice to hide them.

Also the V thingie appears on the left side. You can see it with my printscreen.

MenuSubMenu.png

I've added the following just before 'var parentMenuItem = ...' to fix the problem with all submenu's being (incorrectly) shown as opened.


        //   Fix error in original script, which caused all sub-sub-menu items to be visible initially after opening the parent,
        //   even though the state of the panel was closed (a 'display: none' was missing on the Menu_DropDownPanel)
        var childNodes = currentMenuButton.querySelector(".Menu_DropDownPanel")?.querySelector(".Menu_SubItemsPlaceholder")?.childNodes;
        if (childNodes)
        {
            var childItems = Array.prototype.slice.call(childNodes);
            childItems.forEach(function(e) {
                setTimeout( function() {
                    // Look for submenu's
                    if (e.classList.contains("Menu_DropDownButton")) {
                        var dropDownPanel = e.querySelector(".Menu_DropDownPanel");
                        if (dropDownPanel)
                            dropDownPanel.style.display = "none";
                    }
                }, 0);
            });
        }

Can someone tell the exact solution for it? What needs to be done?

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