highlight menu button while on the current page (like Slack or Email Apps)...

Ask the community
,
1

i have a sidebar menu that i made, not Wix’s standard menu. how do i make each button highlight after i click on it and stay highlighted while im on that page? And then have it go back to its normal color after i click on another page? similar to Slack and other email apps that have sidebar Menu navigations (I’ve included an example)…

600×1004 66.4 KB

2
3

thanks for this. do i just combine these 2 so that the URL knows when to display the “button style”? this is alittle outside my knowledge of coding. im used to just copy and pasting from examples…

4

@joelsf15 You can either set a condition for the button’s styling based on its current styling, or based on wixLocation, or both!

5

@skmedia So i used this code below and it worked, but it doesn’t change the color back to the original. It just stays the changed color even when i click something else. Do i need to add an “else” statement to make the color go back?

$w(“#button”).style.color = “red”; //for the text color
$w(“#button”).style.backgroundColor = “blue”;
$w(“#button”).style.borderColor = “black”;

6

Not sure if this might help but I figured a way that works for me! I created a button with the style I want it to be when selected (which goes on top of the actual menu item I wanted to highlight) and then in the properties for the button tick the box hidden on load.

So on the main site code you would write:
$w.onReady( function () {
$w(“#button”).hide();
} );

And on the Page code you would write:
$w.onReady( function () {
$w(“#button”).show();
} );

Hope this might help somebody else.