Highlight the 'Current Page' on the NavMenu

Topics: Themes
Dec 12, 2007 at 8:21 AM
Edited Dec 12, 2007 at 8:33 AM

There's a easy way to identify the current page, compatible with Ie7 and FireFox2.

1, Modify your themes/{ur theme}/site.master.

------------------------------------------------------------------------------------------------------------------
<div id="menu">
<ul id="main">
<li id="home"><a href="<%=Utils.AbsoluteWebRoot %>" rel="home"><%=Resources.labels.home %></a></li>
<li id="archive"><a href="<%=Utils.AbsoluteWebRoot %>archive.aspx" ><%=Resources.labels.archive %></a></li>
<li id="contact"><a href="<%=Utils.AbsoluteWebRoot %>contact.aspx" ><%=Resources.labels.contact %></a></li>
<li id="feed"><a href="<%=Utils.FeedUrl %>" class="feed"><img src="<%=Utils.RelativeWebRoot %>pics/rssButton.gif" alt="Feed" /><%=Resources.labels.subscribe %></a></li>
<li id="login"><asp:LoginStatus ID="LoginStatus1" runat="Server" LoginText="Login" LogoutText="logout" EnableViewState="false" /></li>
</ul>
</div>


<script language="javascript" type="text/javascript">
var url = location.pathname + location.search;

var arr = new Array();
arr.push("default.aspx");
arr.push("archive.aspx");
arr.push("contact.aspx");
arr.push("login.aspx");

var arr2 = new Array();
arr2.push("home");
arr2.push("archive");
arr2.push("contact");
arr2.push("login");

var dc = 0;
for(i=0;i<arr.length;i++)
{
if(url.lastIndexOf(arr[ i ]) > -1)
{
dc = i;
}
}

var dv = document.getElementById(arr2[ dc ]);
dv.className = "current_page_item";

</script>
------------------------------------------------------------------------------------------------------------------

2, and, you need to add "current_page_item" element to your CSS file.
looks like that:

#menu.current_page_item a {
background: url(images/img02.gif) repeat-x;
color: #D56E22;
}
Coordinator
Dec 12, 2007 at 6:51 PM
Great example! You can actually put the script in the HTML footer and the CSS in the HTML header from the admin settings page.