asp.net adding class to current menuItem

c# asp.net menuitem css

16,678

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 &amp; Query" Value="View &amp; 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; 
}

16,678

Author by

Tovi Klein-Berzon

Updated on June 23, 2022

Comments

Tovi Klein-Berzon almost 2 years
I am new the asp.net so i will appreciate a full code answer.

I have a web site in asp.net and c# i added a menu to the site.master page it looks like this:
```
<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 &amp; Query" Value="View &amp; Query"></asp:MenuItem>
                <asp:MenuItem Text="API" Value="API"></asp:MenuItem>
            </Items>
        </asp:Menu>
```
I now need to add that when the user is on a specific page for example Pipes, then the right menuItem should have a different background color.

i can use a session variable but i am not sure how to do that.

Can any one please write for me a full example for this?

Thank you in advance
- Govind Malviya almost 13 years
  
  have navigationurl in MenuItem?
- naveen almost 13 years
  
  are you comfortable with jquery?
- naveen almost 13 years
  
  and whats the relevance of AutoPostBack=true" here?
- Tovi Klein-Berzon almost 13 years
  
  @naveen,Im great with jquery, abd i dont know why AutoPostBack=true is here.
Tovi Klein-Berzon almost 13 years

Thank you, i have firebug and i see that if i change a item to be select, (in edit menu items), then i gets the class selected. that fine. but now how does it dynamically add the right class to the right item? i am probably missing something, can you explain more clearly, how it is done.
Tovi Klein-Berzon almost 13 years

I am not getting something, how does the right item get the selected style??
tutts almost 13 years

When you create an asp page, you define a global stylesheet (style.css) in this stylesheet you have multiple classes .body{} .h1{} .p{} and so on. You need to create a class that corresponds with the class defined in the asp control. Usually you have to define the asp control like so: <asp:Menu ID="mainMenu" runat="server" autopostback="true" CssClass="mainMenuCss"> then in your css file you add #mainMenuCss{ background-color:#eaeaea;} then for the child nodes mainMenuCss .selected-item{ background-color:#000000;}
tutts almost 13 years

or use the ASP control definitions: <StaticMenuItemStyle CssClass="normal" /> <StaticSelectedStyle CssClass="selected" /> <StaticHoverStyle CssClass="hover" /> and add the css styles: .normal{ background-color:#eaeaea; } .selected { background-color:#000000; }
tutts almost 13 years

Thanks for the accept. You might want to make a coffee and take an hour out and read about html + CSS and asp.net control styles. How they are rendered, and how styles are applied. A good knowledge of whats going on will help you to develop your site, quickly and efficiently :)