Changing the background colour of a menu item after click.

[micah]

I would like to change the background colour of the side menu items after I've clicked them.  The screenshot below shows the colour I would like to change.

Is it pseudo element or class that I need to apply CSS?

[sebben]

Hi,

you can define a function in your javascript like this:

$scope.changeBackground= function(){
document.querySelector('.simple-label').style.background = 'rgba(255, 255, 255, 1)';
}

You can call the function from your label's click event. The label needs to have the class 'simple-label' in that case.

[micah]

The menu was created by adding another view. It doesn't appear in the tree, so I'm unable to add a class or click event to it.

[sebben]

I'm not sure if I understand you right...

But you should be able to see the tree of the added view when you click on the view first.

Can you add screenshot of you studio editor or even better the project? Then we can figure it out for sure.

Thanks.

[micah]

Vuforia automatically creates the side menu when creating a new view. I've attached a screenshot of my studio editor.

You can recreate this by creating a new experience and adding a new view. When you preview the experience there will be a side menu. When you click each item on the menu the background colour will briefly change colour before swapping to the view you clicked. That's the colour I would like to change.

I tried adding a class to the view itself, and adding the pseudo class:

.test:active {

background-color: red;

}

This didn't work either.

[sebben · Accepted solution]

Hi,

you can change this color by changing the .item.activated class:

For example:

.item.activated {
background-color: red;
}