Looking for a way to dynamically change the color of navigation links based on which section of the page a user is currently viewing? Here's an example setup:
<div id="topNav">
<ul>
<li><a href="#contact">Contact</a></li>
<li><a href="#web_design">Web Design</a></li>
<li><a href="#home">Home</a></li>
</ul>
</div>
<div id="home">
<img src="images/dog.jpg" class="bg" />
</div>
<div id="web_design">
<img class="titleImage" src="images/web_design.jpg" />
</div>
<div id="contact">
<img class="titleImage" src="images/contact.jpg" />
</div>
To achieve this, you can use a CSS class "selected" on list items corresponding to the current section like so:
#topNav li.selected a {
color: #cbcacc;
}
Your menu will now update its link colors based on the user's location on the page. Hope this helps!