【摘抄】如何高亮ASP.NET MENU 的父节点
原文地址:http://www.codeproject.com/KB/webforms/AspMenuParentHighlighting.aspx
最近有几个客户问我如何高亮ASP.NET MENU的父节点,我就google了一把,找到了这篇文章,感觉不错,故搬了过来。
看看效果先,
刚刚又搜索了下,以前好像有人在博客园里发过了,那就直接参考他的吧,
http://www.cnblogs.com/forward/archive/2008/01/26/1054604.html
Posted on 2008-01-26 22:12 foward.molly.宝儿 阅读(304) 评论(1) 编辑 收藏 网摘
今天偶逛CodeProject,又发现个好东东,另一种实现父菜单选中的方法,之前找到过一个,CSSAdapters(http://www.asp.net/cssadapters)的方法,这个又是一种,都很经典的说
这个新的方式也很不错
我将sample code留下来,以后也会记得,嘿嘿 原文: http://www.codeproject.com/KB/webforms/AspMenuParentHighlighting.aspx
使用js来实现的,恩,页面会有太多的js,如果菜单很多,那么应该也会很慢的应该,性能考量不见的比上面那个CSSAdapters的好,CSSAdapter配置确实要麻烦很多不过
html
code behind
这个新的方式也很不错
我将sample code留下来,以后也会记得,嘿嘿 原文: http://www.codeproject.com/KB/webforms/AspMenuParentHighlighting.aspx
使用js来实现的,恩,页面会有太多的js,如果菜单很多,那么应该也会很慢的应该,性能考量不见的比上面那个CSSAdapters的好,CSSAdapter配置确实要麻烦很多不过
html
1
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
<html xmlns="http://www.w3.org/1999/xhtml">
6
<head id="Head1" runat="server">
7
<title>Untitled Page</title>
8
<script type="text/javascript">
9
function HoverParents(id, parentSnake)
10
{
11
Menu_HoverDynamic(document.getElementById(id));
12
var parents = parentSnake.toString().split(',');
13
for(i = 0;i < parents.length;i++)
14
{
15
if(parents[i] != '')
16
{
17
Menu_HoverDynamic(document.getElementById(parents[i]));
18
}
19
}
20
}
21
22
function UnhoverParents(id, parentSnake)
23
{
24
Menu_Unhover(document.getElementById(id));
25
26
var parents = parentSnake.toString().split(',');
27
for(i = 0;i < parents.length;i++)
28
{
29
if(parents[i] != '')
30
{
31
Menu_Unhover(document.getElementById(parents[i]));
32
}
33
}
34
}
35
</script>
36
</head>
37
<body>
38
<form id="form1" runat="server">
39
<div>
40
<asp:ScriptManager ID="sm" runat="server" />
41
<asp:UpdatePanel ID="up" runat="server">
42
<ContentTemplate>
43
<asp:Menu ID="mainMenu" runat="server"
44
StaticMenuItemStyle-CssClass="MenuItem"
45
StaticHoverStyle-CssClass="MenuItemHover"
46
StaticSelectedStyle-CssClass="MenuItemSelected"
47
StaticPopOutImageUrl="~/Images/PopOut.png"
48
DynamicPopOutImageUrl="~/Images/PopOut.png"
49
DynamicMenuItemStyle-CssClass="DynamicMenuItem"
50
DynamicHoverStyle-CssClass="MenuItemHover"
51
StaticSubMenuIndent="0"
52
StaticDisplayLevels="2"
53
>
54
<Items>
55
<asp:MenuItem Text="Music">
56
<asp:MenuItem Text="Classical" />
57
<asp:MenuItem Text="Rock">
58
<asp:MenuItem Text="Electric" />
59
<asp:MenuItem Text="Acoustical" />
60
<asp:MenuItem Text="Classical4" />
61
<asp:MenuItem Text="Rock4">
62
<asp:MenuItem Text="Electric4" />
63
<asp:MenuItem Text="Acoustical4" />
64
</asp:MenuItem>
65
</asp:MenuItem>
66
<asp:MenuItem Text="Classical2" />
67
<asp:MenuItem Text="Rock2">
68
<asp:MenuItem Text="Electric2">
69
<asp:MenuItem Text="Classical3" />
70
<asp:MenuItem Text="Rock3">
71
<asp:MenuItem Text="Electric3" />
72
<asp:MenuItem Text="Acoustical3" />
73
</asp:MenuItem>
74
</asp:MenuItem>
75
<asp:MenuItem Text="Acoustical5" />
76
</asp:MenuItem>
77
</asp:MenuItem>
78
</Items>
79
</asp:Menu>
80
<asp:Label id="MessageLabel" runat="server" />
81
</ContentTemplate>
82
</asp:UpdatePanel>
83
84
</div>
85
</form>
86
</body>
87
</html>
88![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
29
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
30
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
31
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
32
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
33
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
34
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
35
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
36
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
37
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
38
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
39
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
40
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
41
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
42
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
43
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
44
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
45
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
46
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
47
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
48
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
49
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
50
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
51
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
52
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
53
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
54
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
55
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
56
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
57
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
58
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
59
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
60
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
61
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
62
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
63
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
64
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
65
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
66
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
67
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
68
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
69
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
70
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
71
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
72
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
73
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
74
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
75
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
76
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
77
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
78
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
79
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
80
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
81
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
82
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
83
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
84
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
85
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
86
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
87
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
88
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
code behind
1
using System;
2
using System.Collections.Generic;
3
using System.Configuration;
4
using System.Data;
5
using System.Linq;
6
using System.Web;
7
using System.Web.Security;
8
using System.Web.UI;
9
using System.Web.UI.HtmlControls;
10
using System.Web.UI.WebControls;
11
using System.Web.UI.WebControls.WebParts;
12
using System.Xml.Linq;
13![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
14
public partial class _Default : System.Web.UI.Page
15
{
16
protected void Page_Load(object sender, EventArgs e)
17
{
18
mainMenu.MenuItemClick += new MenuEventHandler(mainMenu_MenuItemClick);
19
string script = String.Empty;
20![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
21
List<MenuItem> list = new List<MenuItem>();
22
list.Add(mainMenu.Items[0]);
23
FindMenuItems(mainMenu.Items[0], list);
24![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
25
foreach (MenuItem mi in list)
26
{
27
List<MenuItem> parents = new List<MenuItem>();
28
FindParents(mi, parents);
29![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
30
string parentSnake = String.Empty;
31
foreach (MenuItem parent in parents)
32
{
33
parentSnake += "mainMenun" + list.IndexOf(parent).ToString() + ",";
34
}
35![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
36
parentSnake.TrimEnd(',');
37![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
38
script += "document.getElementById('" + mainMenu.ClientID + "n" + list.IndexOf(mi).ToString() + "').onmouseover = function(){HoverParents('" + mainMenu.ClientID + "n" + list.IndexOf(mi).ToString() + "', '" + parentSnake + "')};";
39
script += "document.getElementById('" + mainMenu.ClientID + "n" + list.IndexOf(mi).ToString() + "').onmouseout = function(){UnhoverParents('" + mainMenu.ClientID + "n" + list.IndexOf(mi).ToString() + "', '" + parentSnake + "')};";
40
}
41![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
42
ScriptManager.RegisterStartupScript(this, typeof(string), "MenuHoverUnhover", script, true);
43
}
44![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
45
void FindMenuItems(MenuItem mi, List<MenuItem> list)
46
{
47
foreach (MenuItem child in mi.ChildItems)
48
{
49
list.Add(child);
50
}
51![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
52
foreach (MenuItem child in mi.ChildItems)
53
{
54
FindMenuItems(child, list);
55
}
56
}
57![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
58
void FindParents(MenuItem mi, List<MenuItem> list)
59
{
60
if (mi.Parent != null)
61
{
62
if (mi.Parent != mainMenu.Items[0])
63
{
64
list.Add(mi.Parent);
65
FindParents(mi.Parent, list);
66
}
67
}
68
}
69![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
70
void mainMenu_MenuItemClick(object sender, MenuEventArgs e)
71
{
72
MessageLabel.Text = e.Item.Text;
73
}
74
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
29
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
30
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
31
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
32
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
33
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
34
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
35
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
36
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
37
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
38
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
39
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
40
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
41
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
42
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
43
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
44
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
45
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
46
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
47
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
48
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
49
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
50
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
51
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
52
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
53
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
54
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
55
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
56
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
57
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
58
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
59
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
60
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
61
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
62
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
63
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
64
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
65
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
66
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
67
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
68
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
69
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
70
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
71
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
72
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
73
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
74
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)