Valo menubuttom click focus problem

Flow
4

problem solve, finally i figure it out.

regards,
m.

5

How to get rid of this white block from the valo menu? I am attaching an image for clarification. I just want that user icon with drop down menu… but I don’t want the rectangular white block.
19111.jpg

6

Looks like you have an empty button there for some reason.

7

Hei Jouni,

Thanks for your comment. I have two simple questions for you…

a) How do you change the color of the menu items… for example, if have menu like "
File
", "
Edit
" and "
View
" etc… and the color is let’s say pink … but how do I change it to white ? and also change the font to let’s say, Calibri Regular.

b) If I put the valo menu items and the icon seperately in the menu item than how do I arrange horizontally ? I hope you understand what I mean here… I mean, like the top-menu bar of Vaadin site.

8

Hey Keto,

I’d probably recommend setting the background color of the v-menubar-popup element.

.v-menubar-popup {
  background-color: white;
}

Or if you want, you can also set it for v-menubar-menuitem, but I wouldn’t recommend that, as there is padding on the v-menubar-popup element by default.

9

You could do the following. If I understood you correctly.

.v-menubar-popup .v-menubar-menuitem .v-icon {
  display: block;
  margin-right: 0;
}
10

Thanks for your answer.

11

Dear friends,

How do you create horizontal-sub menu in Vaadin? I know I can easily create a simple drop down menu, but I am struggling to create a
horizontal sub-menu
 in Valo.

I am attaching a image for clarification.
19142.jpg

12

Hey Keto,

Hmm, you could go the client-side route. Or perhaps simply show/hide a horizontal layout containing the sub menu items.

13

Thanks for your answer. Unfortunately, it doesn’t work. The menu color is not white with the above css … I also tried setting it for v-menubar-menuitem… even that doesn’t seem to work.

14

I’m sorry… I don’t understand what you mean by ‘client-side route’. How do you show and hide horizontal layout? Could you please give an example.

15

Make sure your theme isn’t compiled, i.e. the theme folder doesn’t contain a styles.css (not .scss) file.

16

Client-side:
https://vaadin.com/book/-/page/clientside.html
.

Most Vaadin components can be shown/hidden with setVisible(boolean).

17

So I delete the styles.css?

18

Yes. And make sure your theme changes or additions are located in the .scss.

19

Thanks for your answer. Is there any other way … I can change the menu text color without deleting the styles.css? I put in .scss following line:

$v-focus-color: #fff;

and magically the menu text is working nicely with white text… however, when I remove this … it changes to dark blue. Is there any other way… I can keep the menu text white.

20

Hey Keto,

The magic is explained here:
https://vaadin.com/book/vaadin7/-/page/themes.valo.html
.

If you inspect the DOM structure of the menu bar and its items, you can check where the items get their color from. Then simply override that in your theme.

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/