{"id":17,"date":"2004-01-27T18:18:36","date_gmt":"2004-01-27T16:18:36","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/archives\/2004\/01\/27\/active-link-with-ssi\/"},"modified":"2006-10-29T00:34:39","modified_gmt":"2006-10-28T22:34:39","slug":"active-link-with-ssi","status":"publish","type":"post","link":"https:\/\/www.maratz.com\/blog\/archives\/2004\/01\/27\/active-link-with-ssi\/","title":{"rendered":"Active Link with SSI"},"content":{"rendered":"

I’ve been searching for something else at ALA<\/a> regarding my current project, and found an article about using PHP for marking current page<\/a>. 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<\/a> without CGI or PHP.<\/p>\n

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

<!--#include file=\"navigation.html\" --><\/pre>\n
\t\t\tAt the top of every page, place something like this:<\/p>\n
<!--#set var=\"thisPage\" value=\"News\" --><\/pre>\n
\t\t\tThe value<\/code> 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:<\/p>\n
<ul id=\"nav\">\r\n<li><a <!--#if expr=\"${thisPage}=News\" -->id=\"activeLink\"<!--#endif --><\/strong>  href=\"#\">News<\/a><\/li>\r\n<li><a <!--#if expr=\"${thisPage}=About\" -->id=\"activeLink\"<!--#endif --><\/strong> href=\"#\">About<\/a><\/li>\r\n<li><a <!--#if expr=\"${thisPage}=My Works\" -->id=\"activeLink\"<!--#endif --><\/strong> href=\"#\">My Works<\/a><\/li>\r\n<\/ul><\/pre>\n
\t\t\tAnd finaly some style:<\/p>\n
#nav li a { background: #FFF; color: #000; }\r\n#nav li a#activeLink { background: #000; color: #FFF; }\r\n#nav li a:hover, #nav li a#activeLink:hover { background: #555; color: FFF; }<\/pre>\n
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.<\/p>\n
If you stuck somewhere, ask<\/a>. Enyoj!<\/p>\n
updated 14th June 2004.<\/span><\/h3>\n
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.<\/p>\n","protected":false},"excerpt":{"rendered":"
I’ve been searching for something else at ALA<\/a> regarding my current project, and found an article about using PHP for marking current page<\/a>. 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<\/a> without CGI or PHP.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-17","post","type-post","status-publish","format-standard","hentry","category-codingdesign"],"_links":{"self":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=17"}],"version-history":[{"count":0,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/17\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=17"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=17"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}