Valo menubuttom click focus problem

Flow
21

Hey Päivärinne,

Thanks for your answer. But, I am looking for some kind of animation in the menu… for example, when somebody hovers in the menu… it should automatically display horizontal sub-menu…like in e.g. below:


http://codepen.io/vichid/pen/cHnmK

22

Hey Keto,

Well, you could just replicate something similar in Vaadin. Just as a proof of concept:

  @Override
  protected void init(VaadinRequest request) {
    final VerticalLayout layout = new VerticalLayout();
    layout.setMargin(true);
    layout.setSizeFull();
    setContent(layout);

    CssLayout menu = new CssLayout();
    menu.setStyleName("menu");
    menu.setWidth("100%");

    for (int i = 0; i < 5; i++) {
      menu.addComponent(createMenuItem(i));
    }

    layout.addComponent(menu);
  }

  private Component createMenuItem(int id) {
    Button btn = new Button("Item " + id);
    btn.setStyleName(ValoTheme.BUTTON_BORDERLESS + " "
        + ValoTheme.BUTTON_SMALL);

    CssLayout subMenu = new CssLayout();
    subMenu.setStyleName("sub-menu");

    for (int i = 0; i < 5; i++) {
      Button subMenuItem = new Button("Sub-item " + id + " " + i);
      subMenuItem.setStyleName(ValoTheme.BUTTON_BORDERLESS + " "
          + ValoTheme.BUTTON_SMALL);
      subMenu.addComponent(subMenuItem);
    }

    CssLayout menuItem = new CssLayout(btn, subMenu);
    menuItem.setStyleName("menu-item");

    return menuItem;
  }

SCSS

.menu {
  position: relative;
}

.menu-item:hover .sub-menu {
  opacity: 1;
  visibility: visible;
}
  
.sub-menu {
  display: block;
  left: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 0.1s ease-in;
  visibility: hidden;
  width: 100%;
}
23

Hey Päivärinne,

Thank you for your help… It works nicely like Vaadin menu style however, can it be tweaked like in Example 4 here:

http://themedemos.dottoro.com/features/menu/horizontal-submenu/

24

Hey Keto,

Yes, it can definitely be tweaked to look/behave like that. But I will leave that to you. :wink:

You can use Chrome’s or Firefox’s inspector to get the example menu’s stylesheet. Then simply “adjust” it to fit your DOM structure.

25

Hey Päivärinne,

Thanks for your solution. I am still having some difficulty in tweaking that menu structure. You’re right that I have to look at DOM structure and adjust that…

I changed SCSS to

.menu-item { position: none; background-color: #EB0973; &:hover .sub-menu { opacity: 1; } } and it does show menu structure in horizontal format… I don’t know … how to accomplish such effect. :frowning:

26

Hi

How do you remove the transperency of the sub-menu?

27

Hey Keto,

You could define a background-color for sub-menu.

28

Thanks. It works as expected now.