I'm relatively new to servoy and javascript and am wondering whether anyone has experience with CSS/less. I've recently been working on a project and am wondering how to update the style of an element using CSS without using the properties.less. It's for a sidenav, and every time I figure out a potential solution theres another issue with the program.
I think I need to remove all 'active' classes from all the elements of the nav, and add an active class to the one that has just been clicked but I just can't figure out how to do it.
Here is my CSS at the moment:
- Code: Select all
.menu-item,
.menu-item:after,
.menu-item:before {
transition: all .5s;
}
/* Hover Effect */
.menu-item:hover {
color: #FFF; /* Change the color on hover */
background: #464646;
}
/* Active Item Styling */
.menu-item.active {
background: #363636;
}
/* Underline Stroke for Menu Items */
.menu-item {
position: relative;
}
.menu-item:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%; /* Initial width of the underline */
content: ".";
color: transparent;
background: #FFF;
height: 1px;
}
.menu-item:hover:after {
width: 100%; /* Underline expands on hover */
}
.menu-item.active:after {
width: 100%; /* Underline is meant to remain full for active items */
}
Thanks!