[英]asp.net adding class to current menuItem
I am new the asp.net so i will appreciate a full code answer. 我是asp.net的新手,所以我将感谢完整的代码答案。
I have a web site in asp.net and c# i added a menu to the site.master page it looks like this: 我在asp.net中有一个网站,并且C#我向site.master页面添加了一个菜单,它看起来像这样:
<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>
</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. 现在,我需要补充一点,当用户位于特定页面(例如Pipes)上时,则正确的menuItem应该具有不同的背景色。
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). 您无需使用会话变量来跟踪页面,因为当您选择菜单项时,asp.net会很好地跟踪您选择的项并为您生成自己的CSS类(在大多数情况下)。 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. 为了获得更好的Firefox可视下载Firebug并查看HTML输出,您将看到它们具有CSS样式,例如“ asp-net.menu selectedItem”,然后创建一个.selectedItem {} CSS类,然后它将自动选择样式。
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. 但是,如果我还记得微软控件的样式有点古怪,就好像您从输出中检查了源代码一样,它也不完全是HTML友好的。
If you want to style the Menu item using the Microsoft approach, go here http://msdn.microsoft.com/en-us/library/ms366731.aspx 如果要使用Microsoft方法设置菜单项的样式,请访问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. 但是,有一个名为CSSfriendly http://cssfriendly.codeplex.com/的库,该库以纯HTML形式呈现控件,它使您可以更轻松地附加CSS类。 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: 然后在您的CSS中:
.normal{
background-color:#eaeaea;
}
.selected {
background-color:#000000;
}
.hover{
background-color:#FF0000;
}
I had a similar problem where I couldn't stylize each individual MenuItem. 我有一个类似的问题,我无法风格化每个单独的MenuItem。 Using this post... 使用这篇文章...
asp:MenuItem / CSS 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: 和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. 希望这对某人有帮助。 :-) :-)
You can use 您可以使用
<DynamicSelectedStyle BackColor="#1C5E55" />
and 和
<StaticSelectedStyle BackColor="#1C5E55" />
Besides usually you will need NavigateUrl
attribute for your MenuItem
. 此外,通常,您需要为MenuItem
NavigateUrl
属性。 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. 我通常使用jQuery的客户端方法。 For that you should give your menu a CssClass
. 为此,您应该给菜单一个CssClass
。 For example, CssClass="mymenu"
例如, 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. 并且此代码适用于ASP.NET 4.0。 Prior to that the rendering was done using table
. 在此之前,渲染是使用table
完成的。 you might then want to change the closest to .closest("td")
然后您可能想要将最接近的值更改为.closest("td")
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.