You won't need to track the page using session variables, as when you select a menu item, asp.net kindly tracks the item you've selected and generates its own CSS class for you (in most cases). To get a better visual download firebug for Firefox and look at the HTML output, you'll see they'll have CSS styles attached such as "asp-net.menu selectedItem" for example, you then create a .selectedItem{} CSS class, and then it will pick up the style automatically.
However If I recall it can be a bit fiddly styling Microsoft controls, as if you check the source code out of the output, its not exactly HTML friendly.
If you want to style the Menu item using the Microsoft approach, go here http://msdn.microsoft.com/en-us/library/ms366731.aspx
However there is a library called CSSfriendly http://cssfriendly.codeplex.com/ that renders the control in pure HTML, which allows you to attach CSS classes much more easily. For example:
.CssAdapterMenu ul.AspNet-Menu /* Tier 1 */
{
width: 961px !important;
cursor:pointer;
background-color:#000000;
}
.CssAdapterMenu ul.AspNet-Menu ul /* Tier 2 */
{
left: 0;
background-color:#f8f8f8;
width: 145% !important;
max-width: 160px !important;
}
.CssAdapterMenu ul.AspNet-Menu ul li:hover /* Tier 2 cell */
{
background: #636363 url(../images/menu_bg_hover.png) no-repeat !important;
}
.CssAdapterMenu ul.AspNet-Menu ul .AspNet-Menu-Selected{
background: transparent url(../images/menu_bg_hover.png) no-repeat !important;
}
.CssAdapterMenu li.AspNet-Menu-WithChildren li .AspNet-Menu-ChildSelected {
background: transparent url(../images/menu_bg_hover.png) no-repeat !important;
}
And so on and so forth. Theres good documentation out there for this, and its my preferred method for styling.
Amended your code with my explanations below.
<asp:Menu ID="mainMenu" runat="server" autopostback="true">
<Items>
<asp:MenuItem Text="Home" Value="Home" ></asp:MenuItem>
<asp:MenuItem Text="Pipes" Value="Pipes"></asp:MenuItem>
<asp:MenuItem Text="View & Query" Value="View & Query</asp:MenuItem>
<asp:MenuItem Text="API" Value="API"></asp:MenuItem>
</Items>
<StaticMenuItemStyle CssClass="menuItem" />
<StaticSelectedStyle CssClass="selectedItem" />
<StaticHoverStyle CssClass="hoverItem" />
</asp:Menu>
Then in your CSS:
.normal{
background-color:#eaeaea;
}
.selected {
background-color:#000000;
}
.hover{
background-color:#FF0000;
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…