Highlight navigation in ExpressionEngine
Just a quick one to show how I highlight the navigation so that the user knows what section they are in. I use the URL segment variables to highlight the navigation.
I call the navigation using {embed=“includes/nav”}. Because I use image replacement on my navigation, I can’t add a class to a list item, so I have to replace swap the id on the list item to show the correct background image.
<ul>
<li {if segment_1==""}id="nav-home-active"{if:else}id="nav-home"{/if}><a href="{homepage}" title="Home" rel="home">Home</a></li>
<li {if segment_1=="portfolio"}id="nav-portfolio-active" {if:else}id="nav-portfolio"{/if}><a href="/portfolio" title="Portfolio">Portfolio</a></li>
<li {if segment_1=="blog"}id="nav-blog-active" {if:else}id="nav-blog"{/if}><a href="/blog" title="Blog">Blog</a></li>
<li {if segment_1=="about"}id="nav-about-active" {if:else}id="nav-about"{/if}><a href="/about" title="About">About</a></li>
<li {if segment_1=="contact"}id="nav-contact-active" {if:else}id="nav-contact"{/if}><a href="/contact" title="Contact">Contact</a></li>
</ul>
It is a similar process to the one used at FortySevenMedia and as the last comment there mentions, the URL segment has many further possible options, such as setting the ID of the body, or any other element for that matter.
Trevor Davis has an interesting post here which related to this.
There may be other ways or a better way of doing things, so let me know.