How change color of items in MenuBar when selecting sub-item

Vaadin 6 / 7 / 8
1

Items in my menu do have sub-menu items.
How can I set style for parent when a child is selected?

Currently, I’m trying to use setStyleName in menuSelected function like what I posted below, but it does not work.

public void menuSelected(final MenuItem selectedItem) { removeAllStyleFromMenuItem(); setHighLightSelectedMenuItem(selectedItem); } private void setHighLightSelectedMenuItem(final MenuItem selectedItem) { if (selectedItem.getParent() == null) { selectedItem.setStyleName("selected"); } else { setHighLightSelectedMenuItem(selectedItem.getParent()); } } Please give me the feedback if anyone knows any solution.
Thank you in advance.

2

What styles you have defined your theme file for that stylename?

3

Hi Tatu Lund,
Thank you for your reply.
I set border, background for v-menubar-menuitem and set color for v-menubar-menuitem-caption

4

I see, if you do something like this selectedItem.setStyleName(“selected”); you should have something set for target selected in your styles, otherwise there is no effect. You should have something like this in your styles.

.selected {
background-color: red
}

Although I would give more specific stylename for my custom style in order to avoid conflicts.

5

Yes, I already added selected class into my css file, but it does not work. Do you have any idea?

6

By the way, the code I posted was only sample code, i named the css class in different way in my real project. Thank you for your feedback Tatu Lund.