menu with horizontal submenu

menu with horizontal submenu

  

Hi,

I am trying to implement below sample of menu bar. 

How I can start with. Please guide me. Currently "Common\Menu" web block has only single level.



With Kind Regards,

Santosh



Hi Santosh,

I do not believe there is any components with this pattern readily available (At least from my searching, I couldn't find anything). You would need to customize your own menu block in order to achieve this. You could follow the pattern of a horiztonal menu, for instance from the liverpool template: 

https://labs.outsystems.net/liverpoolpreview/

http://www.outsystems.com/forge/component/918/liverpool-template/

By copying the menu web block, and adding a second layer of menus underneath the first placeholder.

Justin


Solution

Hi Santosh,

I recommend you to use the Liverpool Template and use the following code in your application.

.Menu_DropDownPanel {
    width: 100%;
    left: 0;
    text-align: center;
}

.Menu_SubItemsPlaceholder {
    max-width: 1240px;
    padding-left: 10px;
    padding-right: 10px;
    margin: 0 auto;
}

.Menu_DropDownPanel a.Menu_SubMenuItem,
.Menu_DropDownPanel a.Menu_SubMenuItem:link,
.Menu_DropDownPanel a.Menu_SubMenuItem:visited {
    display: inline-block;
    padding: 9px 30px;
    text-align: center;
    min-width: auto;
}


I hope this help you, 


Best Regards

José Rosário

Solution

Hi Justin, 

Thanks for your time and response. I was having the same idea to put one menu web block under the another menu web block. 


Hi José , thanks a lot for your effort. I used your CSS . This is what I wanted.  :)