asp.net adding class to current menuItem

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

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; 
}

You can use

<DynamicSelectedStyle BackColor="#1C5E55" />

and

<StaticSelectedStyle BackColor="#1C5E55" />

Besides usually you will need NavigateUrl attribute for your MenuItem. So the whole thing will look smth like:

<asp:Menu ID="mainMenu" runat="server" autopostback="true">
            <Items>
                <asp:MenuItem Text="Home" NavigateUrl="~/Home.aspx" 
                 Value="Home" ></asp:MenuItem>
    ...
            </Items>
            <DynamicSelectedStyle BackColor="#1C5E55" />
            <StaticSelectedStyle BackColor="#1C5E55" />
        </asp:Menu>

I don't know about any server-side methods. I normally resort to a client side method using jQuery. For that you should give your menu a CssClass. For example, CssClass="mymenu"

Inside your Master Page's head tag, do this.

$(document).ready(function() {
    // not bothering about query strings and hash right now.
    var url = window.location.href.toString().split("/").pop();
    $(".mymenu a[href*='" + url + "']")
        .closest("li")
        .addClass("selected-item");
});

Disclaimer: I do not know a solution for this seemingly trivial requirement on Server Side. This is what I have been using. Oh! and this code works for ASP.NET 4.0. Prior to that the rendering was done using table. you might then want to change the closest to .closest("td")

codemonkey

I had a similar problem where I couldn't stylize each individual MenuItem. Using this post...

asp:MenuItem / CSS

...you could use code like the following:

<div>
    <asp:Menu ID="mainMenu" runat="server">
        <Items>
            <asp:MenuItem NavigateUrl="~/Default.aspx" Text="HOME" />
            <asp:MenuItem NavigateUrl="~/Page1.aspx" Text="Page1" />
        </Items>
    </asp:Menu>
</div>

and the CSS:

div.menu ul li a[href*="Default.aspx"]  { background-color: rgb(100, 100, 100); }
div.menu ul li a[href*="Page1.aspx"]    { background-color: rgb(150, 50, 100); }

Hope this helps somebody. :-)

来源：https://stackoverflow.com/questions/6826760/asp-net-adding-class-to-current-menuitem

标签

ASP.NET

menuitem

css