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

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

Plz refer the below attached file:

bharat koshti wrote:

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:

// 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 );
    };
}

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.