{"id":66,"date":"2004-11-18T19:10:15","date_gmt":"2004-11-18T17:10:15","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/archives\/2004\/11\/18\/faux-active-link\/"},"modified":"2005-10-14T07:06:56","modified_gmt":"2005-10-14T05:06:56","slug":"faux-active-link","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2004\/11\/18\/faux-active-link\/","title":{"rendered":"Faux Active Link"},"content":{"rendered":"

Over there at The Man in Blue<\/a> there\u2019s nice tip about how to \u2018hide\u2019 link to a current page<\/a>. Here\u2019s server-side solution to improve your main navigation.<\/p>\n

You should know some basics of PHP or ASP to follow examples below and also rename your files according to server-side technology used. Also, this is way too basic for advanced programmers, so don\u2019t bother if you\u2019re the one. I know i\u2019m not : ).<\/em><\/p>\n

Main Navigation<\/h3>\n

Main navigation is usually one unordered list, something like:<\/p>\n

<ul id=\"mainNav\">\r\n    <li><a href=\"\/\">home<\/a><\/li>\r\n    <li><a href=\"\/about\/\">about<\/a><\/li>    \r\n    <li><a href=\"\/products\/\">products<\/a><\/li>\r\n    <li><a href=\"\/services\/\">services<\/a><\/li>\r\n    <li><a href=\"\/contact\/\">contact<\/a><\/li>\r\n<\/ul>\r\n<\/pre>\n
What we are aiming for is to replace <a><\/code> tag with something else, in this case it will be <span><\/code>.<\/p>\n
Particular Pages<\/h3>\n
Open each page and place a string on the top of everything else and assign a value which will be descriptive, for example \u201chomePage\u201d, \u201caboutPage\u201d, \u201cproductsPage\u201d, \u201cservicesPage\u201d and \u201ccontactPage\u201d. Something like:<\/p>\n
<?php $pageName = \"homePage\"; ?>\r\n... the rest of HTML\/PHP here...\r\n<\/pre>\n
if you are using PHP, or <\/p>\n
<% pageName = \"homePage\" %>\r\n... the rest of HTML\/ASP here...<\/pre>\n
if you are using ASP. Repeat this for every page you want… Next,  cut #mainNav<\/code> unordered list, save it as include file and include it back in the same place of every page you\u2019ve modified\u2013PHP:<\/p>\n
<?php include 'mainNav.php'; ?><\/pre>\n
and ASP:<\/p>\n
<!--include file=\"mainNav.asp\" --><\/pre>\n
The Magic<\/h3>\n
Here is an example of what mainNav.php<\/code> should look like:<\/p>\n
<ul id=\"mainNav\">\r\n    <li><?php if ($pageName == 'homePage') { echo '<span>home<\/span>'; } else { echo '<a href=\"\/\">home<\/a>'; } ?><\/li>\r\n    <li><?php if ($pageName == 'aboutPage') { echo '<span>about<\/span>'; } else { echo '<a href=\"\/about\/\">about<\/a>'; } ?><\/li>    \r\n    <li><?php if ($pageName == 'productsPage') { echo '<span>products<\/span>'; } else { echo '<a href=\"\/products\/\">products<\/a>'; } ?><\/li>\r\n    <li><?php if ($pageName == 'servicesPage') { echo '<span>services<\/span>'; } else { echo '<a href=\"\/services\/\">services<\/a>'; } ?><\/li>\r\n    <li><?php if ($pageName == 'contactPage') { echo '<span>contact<\/span>'; } else { echo '<a href=\"\/contact\/\">contact<\/a>'; } ?><\/li>\r\n<\/ul><\/pre>\n
and here\u2019s mainNav.asp<\/code>:<\/p>\n
<ul id=\"mainNav\">\r\n    <li><% If pageName = \"homePage\" Then Response.Write \"<span>home<\/span>\" Else Response.Write\"<a href='\/'>home<\/a>\" End If %><\/li>\r\n    <li><% If pageName = \"aboutPage\" Then Response.Write \"<span>about<\/span>\" Else Response.Write\"<a href='about\/'>about<\/a>\" End If %><\/li>    \r\n    <li><% If pageName = \"productsPage\" Then Response.Write \"<span>products<\/span>\" Else Response.Write\"<a href='products\/'>products<\/a>\" End If %><\/li>\r\n    <li><% If pageName = \"servicesPage\" Then Response.Write \"<span>services<\/span>\" Else Response.Write\"<a href='services\/'>services<\/a>\" End If %><\/li>\r\n    <li><% If pageName = \"contactPage\" Then Response.Write \"<span>contact<\/span>\" Else Response.Write\"<a href='contact\/'>contact<\/a>\" End If  %><\/li>\r\n<\/ul><\/pre>\n
Add\/modify as desired, the styling is up to you…<\/p>\n
Update: JavaScript Solution<\/h3>\n
If you don\u2019t have an option to use server-side scripting, there is nice post with explanation and example: Clear Links to Current Page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Over there at The Man in Blue<\/a> there’s nice tip about how to ‘hide’ link to a current page<\/a>. Here’s server-side solution to improve your main navigation.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/66"}],"collection":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=66"}],"version-history":[{"count":0,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/66\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=66"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=66"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=66"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}