cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

The community will undergo maintenance on October 16th at 10:00 PM PDT and will be unavailable for up to one hour.

Changing the background colour of a menu item after click.

micah
12-Amethyst

Changing the background colour of a menu item after click.

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?

ACCEPTED SOLUTION

Accepted Solutions
sebben
12-Amethyst
(To:micah)

Hi,

 

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

 

For example:

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

 

View solution in original post

5 REPLIES 5
sebben
12-Amethyst
(To:micah)

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
12-Amethyst
(To:sebben)

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
12-Amethyst
(To:micah)

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
12-Amethyst
(To:sebben)

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
12-Amethyst
(To:micah)

Hi,

 

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

 

For example:

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

 

Announcements

Top Tags