1. The site structure:
- TheMaster.master
- Default.aspx
- MenuJS.js
- MenuStyles.css
TheMaster.master
Code:
<%@ Master Language="VB" CodeFile="TheMaster.master.vb" Inherits="TheMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>The Master Page</title>
<link href="MenuStyles.css" rel="stylesheet" media="screen" type="text/css" />
</head>
<body>
<form id="myform" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
<div id="modernbricksmenu" style="width: 801px;">
<ul>
<li id="Home_ListItem" style="margin-left: 1px"><a href="#" title="Home">Home</a></li>
<li id="Who"><a href="#" title="Who">Who Are We?</a></li>
<li id="Servicing"><a href="#" title="Servicing">Servicing</a></li>
<li id="ContactUs"><a href="#" title="Forums">Contact Us</a></li>
<li id="Forums"><a href="#" title="Swift Forums">Forums</a></li>
</ul>
</div>
<div id="modernbricksmenuline" style="width: 801px;">
</div>
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Master page code behind:
Code:
Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
Page.ClientScript.RegisterClientScriptInclude("MenuJS", ResolveUrl("MenuJS.js"))
End Sub
Default.aspx - This is the "Home" page
Code:
<%@ Page Language="VB" MasterPageFile="~/TheMaster.master" AutoEventWireup="false"
CodeFile="Default.aspx.vb" Inherits="_Default" Title="Home" %>
nothing else in here because the content was set as to be the same as the master Page content (from design view)
MenuJS.js
Code:
function setMenuItem()
{
var currentPage = document.title;
var listItem1 = document.getElementById('Home_ListItem');
var listItem2 = document.getElementById('Who');
switch(currentPage)
{
case "Home":
listItem1.className = "current";
break;
case "Who":
listItem2.className = "current";
break;
}
}
window.onload = setMenuItem;
MenuStyles.css
Find this:
Code:
#modernbricksmenu #current a{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/
border-color: #D25A0B; /*Brown color theme*/
}
And replace with this:
Code:
#modernbricksmenu LI.current a{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/
border-color: #D25A0B; /*Brown color theme*/
}
the rest of the css is the same.
The examples are in VB.NET. All you have to do, actually is to change this
Code:
Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init...
into C#.
If you have any questions, I'll be here
