Active Link with SSI

I’ve been searching for something else at ALA regarding my current project, and found an article about using PHP for marking current page. This triggered an idea that immediately crossed my mind – “How about if I make it with SSI only?”. This is supposed to work on Apache without CGI or PHP.

Let’s say you have unordered list of links (<ul>s and <li>s) for navigation wich is included in every page of your web site with simple:

<!--#include file="navigation.html" -->

At the top of every page, place something like this:

<!--#set var="thisPage" value="News" -->

The value should be unique for every page of your web site (at this site it is: “News”, “About”, “My Work”,…). The next we need to do is some modifications of navigation.html:

<ul id="nav">
<li><a <!--#if expr="${thisPage}=News" -->id="activeLink"<!--#endif -->  href="#">News</a></li>
<li><a <!--#if expr="${thisPage}=About" -->id="activeLink"<!--#endif --> href="#">About</a></li>
<li><a <!--#if expr="${thisPage}=My Works" -->id="activeLink"<!--#endif --> href="#">My Works</a></li>
</ul>

And finaly some style:

#nav li a { background: #FFF; color: #000; }
#nav li a#activeLink { background: #000; color: #FFF; }
#nav li a:hover, #nav li a#activeLink:hover { background: #555; color: FFF; }

There you have it! Non-active, non-hovering link is black text on white background, link to current page is white text on the black background. Hovering any link will change text to white, and background to a shade of gray.

If you stuck somewhere, ask. Enyoj!

updated 14th June 2004.

You are reading outdated material, so links from example no more match structure of this website. However, the essence of the article remains the same.