Looking to create a navigation menu with unique colors for each selected state? Check out the code below!
After searching extensively, I stumbled upon this snippet. While it only includes one selected state, you can easily customize it for three different color options.
Here's the example code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.one{
background-color:none;
color:black;
}
.one_active a {
color:red;
}
.two_active a {
color:yellow;
}
.three_active a {
color:#e3e3e3;
}
</style>
<script type="text/javascript">
var divSelected = null;
function SelectOrUnSelect(a) {
if (divSelected != null) divSelected.className = 'one';
divSelected = document.getElementById(a);
document.getElementById(a).className = 'one_active'; // Change classes here for multiple colors
}
</script>
</head>
<body>
<ul>
<li class="one" id="t1"><a href="#1" onclick="SelectOrUnSelect('t1')">one</a></li>
<li class="two" id="t2"><a href="#2" onclick="SelectOrUnSelect('t2')">two</a></li>
<li class="three" id="t3"><a href="#3" onclick="SelectOrUnSelect('t3')">three</a></li>
</ul>
</body>
</html>