Side menu with sub-menu

Support
#1

I want to create a side menu something like the attached image, is there any specific component recommended?

side menu

1 Like
#2

Hi,

Currently, there is no such a menu component with drop down menu. I recommend that you try to find and integrate some JavaScript menu that is suitable for you. Also, you can try to adopt existing SideMenu component.

If you want to try this way you can use this CSS hint:


.c-sidemenu {
  overflow-y: initial !important;
  overflow-x: visible;
  position: relative;
}

.c-sidemenu-submenu {
  display: none;
}

.c-sidemenu-submenu-open {
  display: block;
  position: absolute;
  width: auto;
  height: auto;
  z-index: 10;
  background: black;
  top: 0;
  left: 100%;
  overflow: visible;
}

.c-sidemenu .c-sidemenu-submenu:nth-of-type(4) {
  top: $v-unit-size;
}
.c-sidemenu .c-sidemenu-submenu:nth-of-type(6) {
  top: $v-unit-size * 2;
}
.c-sidemenu .c-sidemenu-submenu:nth-of-type(8) {
  top: $v-unit-size * 4;
}

This CSS moves a child menu to external overlay instead of showing them as expanding panels:

This approach requires deep knowledge of CSS, nevertheless it seems that you have to extend SideMenu component to achieve the target design you have attached.

side-menu-css

#3

Thank you Yuriy, I shall try it. May I request a copy of that sample app you made here?

#4

When I tried the subMenu appeared outside the mainMenu but inside the subMenuPanel with a scroll bar as attached. I must have done something wrong, most likely use of the styles at incorrect place!!

sideMenu_sub

#5

I’ve tried it with simple SideMenu template in Studio. Create main window using SideMenu template, create theme extension and add this CSS to halo-ext.scss file. It is just a hint rather than a solution, so you have to tune this solution: CSS and SideMenu code to achieve what you want.