How to change the background color of a menu (composed of simple buttons) on click?

Ask the community
,
1

Hi! :grinning:
In my website, I’ve created a menu (Not the normal wix menu) which is composed of three buttons, as you see in the image below. The buttons only contain an icon. So, my question is:
Can the background color of the button change once a user clicks on it and heads to another page?

Example:
When a user is in the home page, the background color of the home page button is dark gray and all the others have a black background. But, when the user clicks the explore button, which is the one beneath the home button, the background color of the explore button will change to dark gray and all the other will turn black.
Is this possible?
BTW, I don’t use the normal menu just because it doesn’t allow the use of icons.
I would greatly appreciate the help!

1920×1080 30.3 KB

Thanks in advance! :grinning:

2

Here’s the code that I got for now. But it doesn’t work perfectly…

function setButtonColor ( button , opacity ){
button . style . backgroundColor = rgba(17,17,17, ${ opacity } ) ;
}

$w . onReady ( function () {
let buttonsToChange = [ $w ( “#button77” ), $w ( “#button75” ), $w ( “#button76” )]; //put the relevant buttons here
buttonsToChange . forEach ( button => {
setButtonColor ( button , 0 );
button . onClick (( event ) => {
buttonsToChange . forEach ( b => {
setButtonColor ( b , 0 );
});
setButtonColor ( button , 1 );
})
})
})