Log in to AnswerLog in to Follow
bharat koshti
477Views
6Comments
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

0
0
on 2018-03-22

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


0
0
on 2018-03-22

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).

2
0
on 2020-06-04

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

 

0
0
on 2020-07-23

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.

1
0
on 2020-07-24

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

0
0
on 2020-12-23

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);
            });
        }
0
0
on 15th Mar
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.