Using CSS to Create Current States on Server Side Includes (SSI) Navigation

The basic idea is to assign each link a unique ID so that when they are placed inside a box with a specified class only the corresponding link will have the current state. This way you can have the same unordered list navigation code on every page or have it included and still apply the current state CSS.

In this example the link with ID nav1 will have the current state CSS applied to it. To apply the current state CSS to another link you would just change the class of the containing box.

Example Code:

<div class="nav1">
  <ul>
    <li id="nav1"><a href="link.html">Link</a></li>
    <li id="nav2"><a href="link.html">Link</a></li>
    <li id="nav3"><a href="link.html">Link</a></li>
    <li id="nav4"><a href="link.html">Link</a></li>
    <li id="nav5"><a href="link.html">Link</a></li>
  </ul>
</div>

Example CSS:

.nav1 #nav1 a,
.nav2 #nav2 a,
.nav3 #nav3 a,
.nav4 #nav4 a,
.nav5 #nav5 a {
          color: #FF0066;
}
June 14, 2009 @ 3:41 pm Posted By: Jeff Metter

Leave a Reply

You must be logged in to post a comment.