asp.net添加类当前菜单项 [英] asp.net adding class to current menuItem

问题描述

我是新的asp.net所以我会AP preciate满code答案。

I am new the asp.net so i will appreciate a full code answer.

我在asp.net和c＃网站我添加了一个菜单到页面的Site.Master它看起来是这样的：

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?

感谢您提前

推荐答案

您将不再需要使用会话变量跟踪的页面，当您选择一个菜单项，asp.net好心跟踪您所选择的项目，生成自己的CSS类你（在大多数情况下）。为了获得更好的视觉下载Firefox的Firebug，并期待在HTML输出，你会看到他们将有附加诸如asp-net.menu将selectedItem，例如，你再创建一个.selectedItem {} CSS类CSS样式，然后它会自动拿起风格。

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.

不过如果我还记得它可以是一个有点繁琐的造型微软的控制，因为如果你查看​​源$ C ​​$ C OUT输出，其不完全的HTML友好。

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.

如果你想使用微软的做法样式的菜单项，去这里 HTTP ：//msdn.microsoft.com/en-us/library/ms366731.aspx

If you want to style the Menu item using the Microsoft approach, go here http://msdn.microsoft.com/en-us/library/ms366731.aspx

不过有一个叫库CSSfriendly 的http：//cssfriendly.$c$cplex.com/ 呈现在纯HTML控件，它可以让你更容易附着的CSS类。例如：

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

等等，等等。那里有良好的文档在那里对于这一点，和它我的preferred方法造型。

And so on and so forth. Theres good documentation out there for this, and its my preferred method for styling.

您的修订code下面我解释。

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>

然后在你的CSS：

Then in your CSS:

.normal{ 
background-color:#eaeaea; 
} 

.selected { 
background-color:#000000; 
}

.hover{
background-color:#FF0000; 
}

这篇关于asp.net添加类当前菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！