asp.net 做导航 用menu控件，实现菜单横排，鼠标移动到菜单的一项上，向下弹出子菜单。这个效果的xml怎么

Posted 2023-05-04

一 二 三 四
1 1 1 1
2 2 2 2

就如上面这样的格式，鼠标移动到大写的一上面，就弹出下面的1 2

以下是我以前用过的资料，应该对你有帮助的.
Menu 菜单控件可以建立水平或垂直方向的菜单。<asp:Menu>控件非常容易使用与调整。可以使用 MenuItem 控件来建立静态菜单，或是从 SiteMapDataSource 数据源控件建立动态菜单。Menu 菜单控件有80个公有属性(包括所有控件都拥有的共同属性)。Menu控件的常用属性如表7-4所示。
表7-4 Menu 控件的常用属性
属 性 属 性 描 述
CssClass 允许设置一个应用到整个控件的CSS类属性
StaticDisplayLevels 显示几层静态菜单，超过就成为动态菜单
Orientation 菜单方向是默认垂直 Vertical，或水平 Horizontal
StaticMenuStyle 静态菜单的样式
StaticHoverStyle 当鼠标移至静态菜单的选项上时，显示的样式
StaticMenuItemStyle 静态菜单的选项样式
DynamicMenuStyle 动态菜单的样式
DynamicMenuItemStyle 动态菜单的选项样式
DynamicHoverStyle 当鼠标移至动态菜单的选项上时，显示的样式
MaximumDynamicDisplayLevels 确定控件能显示的子菜单项的级数。
有助于非常大的站点地图限制发送给浏览器的项数
Menu控件包含几个以Static或Dynamic开头的特性。Static特性用来控制加载页面时出现的主菜单项。因为把鼠标悬停在它们上面时它们不会改变或隐藏，所以认为它们是静态的。子菜单是动态的，因为只有当激活相关主菜单项时它们才会出现。
1. 静态菜单
Menu控件可以使用MenuItem控件定义菜单数据来建立静态菜单。下面举例说明在VWD2008中创建静态菜单的方法。
【例7-7】利用Menu控件在网页中添加一个菜单，实现自定义导航功能。
(1) 新建一个Web站点Ex7_7。
(2) 在【解决方案资源管理器】中，添加Web窗体页Program.aspx、Csharp.aspx、JAVA.aspx、VB.aspx。
(3) 在Default.aspx中，切换到【设计】视图，向其中添加一个Menu控件。并设置其Orientation属性为Horizontal。
(4) 在Default.aspx中选择Menu1控件，在【属性】窗体中找到Items选项，单击其右边的【…】按钮打开【菜单项编辑器】对话框，在其中菜单项并设置其相应属性。如图7-6所示。

（点击查看大图）图7-6 【菜单项编辑器】对话框
(5) 菜单项设置完毕，单击【确定】按钮。这时在【源】窗口中可以看到VWD 2008自动生成如下代码：
1. <asp:Menu ID="Menu1" runat="server" Font-Italic
="False" ForeColor="Fuchsia"
2. Orientation="Horizontal" StaticDisplayLevels="1">
3. <Items>
4. <asp:MenuItem NavigateUrl="~/Default.aspx"
Text="首页" Value="首页"></asp:MenuItem>
5. <asp:MenuItem NavigateUrl="~/Program.aspx"
Text="程序设计语言" Value="程序设计语言"/>
6. <asp:MenuItem NavigateUrl="~/Csharp.aspx"
Text="Visual C#" Value="Visual C#" />
7. <asp:MenuItem NavigateUrl="~/VB.aspx"
Text="VB.NET" Value="VB.NET"> </asp:MenuItem>
8. <asp:MenuItem NavigateUrl="~/JAVA.aspx"
Text="JAVA" Value="JAVA"></asp:MenuItem>
9. <asp:MenuItem Text="新闻" Value="新闻"></asp:MenuItem>
10. </Items>
11. </asp:Menu>
上述 MenuItem 控件标记是定义在 <Items> 区段，可以定义菜单的选项，Text属性是菜单项名称，或是使用ImageUrl属性指定菜单项图片，NavigateUrl属性是菜单连接的URL网址。
(6) 切换到Default.aspx中，按Ctrl+F5键，在浏览器中执行程序，查看执行结果。

7.3.3 利用Menu控件实现自定义导航（2）
2. 从SiteMapDataSource控件获取菜单数据
Menu 控件的菜单数据源如果是 SiteMapDataSource 数据源控件，在 ASP.NET 程序中需要创建此控件，如下所示：
1. <asp:SiteMapDataSource Id="sitemap" Runat="server"/>
上述标记建立名为 sitemap 的 SiteMapDataSource 数据源控件，在Menu控件中是使用 DataSourceID 属性来指定数据源，如下所示。
1. <asp:Menu id="Menu1" Runat="Server"
2. StaticDisplayLevels="2" DataSourceID="sitemap"
3. StaticMenuItemStyle-VerticalPadding="3"
4. …
5. DynamicHoverStyle-ForeColor="black"/>
【例7-8】演示从SiteMapDataSource控件获取菜单数据方法。
(1) 复制Web站点Ex7_6，修改其名称为Ex7_8。
(2) 在VWD 2008中打开Ex7_8。
(3) 在【解决方案资源管理器】双击Default.aspx，从【工具箱】的【导航】类别中，拖动一个Menu控件放到DIV标记之间。生成的代码如下所示：
1. <asp:Menu ID="Menu1" runat="server"> </asp:Menu>
(4) 切换到【设计】视图。单击Menu控件的智能标记(灰色右箭头)打开【Menu任务】快捷菜单。在【选择数据源】下拉列表中选择【<新建数据源>】。在出现的【数据源配置向导】对话框中单击【站点地图】图标。如图7-7所示。
(5) 单击【确定】按钮关闭对话框。
(6) 当返回页面时，Menu控件现在显示了顶级元素【主页】(如图7-8所示)。这时，可以看到VWD 2008在【源】视图窗口中自动添加了SiteMapDataSource控件，同时给Menu控件添加了DataSourceID="SiteMapDataSource1"的属性值。生成的代码如下所示：

（点击查看大图）图7-7 【数据源配置向导】对话框

（点击查看大图）图7-8 添加了SiteMapDataSource控件后显示的结果
1. <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1">
2. </asp:Menu>
3. <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
(7) 再单击一次SiteMapDataSource，然后按F4键打开或激活【属性】窗口。将Show StartingNote属性的值由True改为False。注意，一旦这样做后，设计器中的Menu控件就会更新，并显示根元素下的所有直接子菜单。
(8) 再次单击Menu控件，然后用【属性】窗口对控件的属性作下列修改，如表7-5所示。
表7-5 Menu控件属性的设置
特 性 值
StaticEnableDefaultPopOutImage False
Orientation Horizontal
ItemSpacing(需要展开的StaticMenuItemStyle的子特性) 10px
(9) 按Ctrl+F5键，在浏览器中打开页面。当把鼠标放在【计算机类】主菜单时，会自动显示其下拉菜单，选择【硬件】命令，执行结果如图7-9所示。

22.3 实现Menu控件的导航
Menu控件是一个页面上使用的菜单。该控件有静态模式和动态模式两种显示模式，静态模式的菜单项始终是完全展开的，在这种模式下，设置StaticDisplayLevels属性指定显示菜单的级别，如果菜单的级别超过了StaticDisplayLevels属性指定的值，则把超过的级别自动设置为动态模式显示。动态模式需要响应用户的鼠标事件才在父节点上显示子菜单项，MaximumDynamicDisplayLevels属性指定动态菜单的显示级别，如果菜单的级别超过了该属性指定的值，则不显示超过的级别。
Menu控件最简单的用法是在设计视图中使用Items属性添加MenuItem对象的集合。MenuItem对象有一个NavigateUrl属性，如果设置了该属性，单击菜单项后将导航到指定的页面，可以使用Menu控件的Target属性指定打开页的位置，MenuItem对象也有一个Target属性，可以单独指定打开页面的位置。如果没有设置NavigateUrl属性，则把页面提交到服务器进行处理。本示例将演示如何使用Menu控件实现导航。
技术要点
使用Menu控件实现导航的技术要点如下。

MenuItem对象表示菜单的一项通过该对象的属性可以设置菜单的内容和导航方式。

Menu控件的项可以使用设计器和编程两种方法添加。

StaticDisplayLevels属性指定静态菜单的显示级别。
实现步骤
（1）在VS2008中创建一个ASP.NET网站，命名为“MenuSample”。
（2）添加一个页面，命名为“Menu.aspx”，并把这个页设置为起始页。
（3）从工具箱选择Menu控件设计页面，并在窗口的Items属性中打开编辑菜单项的界面，添加“系统操作”和“帮助”两个根菜单项，如图22.3所示。

（点击查看大图）图22.3 添加根菜单项
（4）在首次加载页面时，用编程的方式，指定Menu控件的一些属性，并为两个根菜单项添加子菜单。代码如下所示。
<%@ Page Language="C#" AutoEventWireup="true" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)

if (!IsPostBack)

this.Menu1.Orientation = Orientation.Horizontal;//设置菜单水平显示
this.Menu1.StaticDisplayLevels = 1;//只显示第一级菜单
this.Menu1.Target = "_blank";//指定在新的窗口打开页面
MenuItem register = new MenuItem();//定义子菜单
register.Text = "注册用户";
register.NavigateUrl = "~/register.aspx";
this.Menu1.Items[0].ChildItems.Add(register);//添加子菜单
MenuItem Login = new MenuItem();
Login.Text = "登录";
Login.NavigateUrl = "~/Login.aspx";
this.Menu1.Items[0].ChildItems.Add(Login);
MenuItem help = new MenuItem();//定义第二项菜单的子菜单
help.Text = "帮助";
help.NavigateUrl = "~/help.aspx";
this.Menu1.Items[1].ChildItems.Add(help);
MenuItem About = new MenuItem();
About.Text = "关于";
About.NavigateUrl = "~/About.aspx";
this.Menu1.Items[1].ChildItems.Add(About);


</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Menu使用示例</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu ID="Menu1" runat="server">
<Items>
<asp:MenuItem Text="系统操作" Value="系统操作"></asp:MenuItem>
<asp:MenuItem Text="帮助" Value="帮助"></asp:MenuItem>
</Items>
</asp:Menu>
</div>
</form>
</body>
</html>
（5）按Ctrl+F5组合键运行程序，运行结果如图22.4所示。

图22.4 运行结果

源程序解读
（1）Menu控件的StaticDisplayLevels属性设置为1，表示只静态显示根菜单项，其子菜单动态显示。
（2）Target属性指定单击菜单项打开新页面的位置，该属性的级别低于MenuItem类的Target属性，当两个对象同时指定Target属性时，MenuItem类的Target属性优先。
（3）MenuItem类的NavigateUrl属性用于指定URL地址。
、

在.net的导航控件中,我用的最多的是TreeView控件,今天无意间用到了menu控件,感觉挺好的.写出来当作笔记吧!

前台代码:
<asp:Menu ID="Menu1" runat="server" BackColor="#FFFBD6" DynamicHorizontalOffset="2"
ForeColor="#990000" Height="187px" Orientation="Horizontal" StaticSubMenuIndent="10px"
Style="font-size: 8pt; font-family: Verdana; display: block; background-position-x: center; background-attachment: scroll; background-image: url(img/Alter.jpg); visibility: visible; color: #ff3399; background-repeat: repeat-x; position: static; background-color: #99ff00; text-align: center;" Font-Names="Verdana" Font-Size="0.8em" Width="594px" OnMenuItemClick="Menu1_MenuItemClick">
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#990000" ForeColor="White" />
<DynamicMenuStyle BackColor="#FFFBD6" BorderColor="White" BorderStyle="Solid" BorderWidth="1px" />
<StaticSelectedStyle BackColor="#FFCC66" />
<DynamicSelectedStyle BackColor="#FFCC66" />
<StaticHoverStyle BackColor="#990000" ForeColor="White" />
<DynamicMenuItemStyle BackColor="#B5C7DE" Font-Names="Verdana" Font-Size="8pt" BorderColor="White" BorderStyle="Solid" BorderWidth="1px" HorizontalPadding="5px" VerticalPadding="2px" />
</asp:Menu>

后台代码:
#region 页面初始化
protected void Page_Load(object sender, EventArgs e)


if (!Page.IsPostBack)

PR.BLL.menu.A_Menu bll = new PR.BLL.menu.A_Menu();
DataSet ds = bll.GetList();
CreateMenu(1, (MenuItem)null, ds);


#endregion
#region 递归生成横向菜单
public void CreateMenu(int ParentID, MenuItem tempItem, DataSet ds)

DataView dvMenu = new DataView(ds.Tables[0]);
//过滤ParentID,得到当前菜单的所有子节点
dvMenu.RowFilter = "[MenuParentId] = " + ParentID;

foreach (DataRowView Row in dvMenu)

if (tempItem == null)
//添加根节点
MenuItem Node = new MenuItem();
//节点的文本
Node.Text = Row["FMenuName"].ToString();
//节点旁边的图片
// Node.ImageUrl = "img/" + Row["MenuImage"].ToString();
//有子菜单时的图片
//Node.PopOutImageUrl = "img/02.gif";
this.Menu1.Items.Add(Node);
CreateMenu(Int32.Parse(Row["Fid"].ToString()), Node, ds);//再次递归

else
//添加当前节点的子节点
MenuItem Node = new MenuItem();
Node.Text = Row["FMenuName"].ToString();
//点击节点后的连接地址
Node.NavigateUrl = Row["Url"].ToString();
//Node.ImageUrl = "Image/" + Row["MenuImage"].ToString();
//Node.Target = Row["left"].ToString();
tempItem.ChildItems.Add(Node);
CreateMenu(Int32.Parse(Row["Fid"].ToString()), Node, ds); //再次递归



#endregion 参考技术A <script src="" type="text/javascript"></script>
<a href="#" onmouseover="MM_showHideLayers('siteMapDiv','','show');" onmouseout="MM_showHideLayers('siteMapDiv','','hide');" />下拉菜单测试</a>
<div id="siteMapDiv" style="width:220px; height:20px; top:30px; left:100px; border:1px #ffffff solid; padding:2px; background-color:#ffffff; filter:Alpha(Opacity=85); z-index:9999; visibility: hidden;" onmouseover="MM_showHideLayers('siteMapDiv','','show');" onmouseout="MM_showHideLayers('siteMapDiv','','hide');">
<a href="" target="_blank">菜单1</a> <a href="" target="_blank">菜单2</a> <a href="" target="_blank">菜单3</a>
</div> 参考技术B 这个用js可以实现。把1、 2 隐藏，给一加onmourseover事件，使用定位可以弹出。
要是可以的话使用bootstrap做布局，挺简单的 参考技术C <?xml version="1.0" encoding="utf-8" ?>
- <Menus>
- <MenuItem>
<Text>一</Text>
<ItemID>1000</ItemID>
<ParentItemID>0</ParentItemID>
<IsModule>1</IsModule>
<Level>1</Level>
</MenuItem>
-
- <MenuItem>
<Text>1</Text>
<ItemID>100001</ItemID>
<ParentItemID>1000</ParentItemID>
<IsModule>0</IsModule>
<Level>2</Level>
</MenuItem>
- <MenuItem>
<Text>2</Text>
<ItemID>100002</ItemID>
<ParentItemID>1000</ParentItemID>
<IsModule>0</IsModule>
<Level>2</Level>
</MenuItem>
- <MenuItem>
<Text>二</Text>
<ItemID>1100</ItemID>
<ParentItemID>0</ParentItemID>
<IsModule>1</IsModule>
<Level>1</Level>
</MenuItem>
- <MenuItem>
<Text>1</Text>
<ItemID>110001</ItemID>
<ParentItemID>1100</ParentItemID>
<IsModule>0</IsModule>
<Level>2</Level>
</MenuItem>
- <MenuItem>
<Text>2</Text>
<ItemID>110002</ItemID>
<ParentItemID>1100</ParentItemID>
<IsModule>0</IsModule>
<Level>2</Level>
</MenuItem>
- <MenuItem>
<Text>三</Text>
<ItemID>1200</ItemID>
<ParentItemID>0</ParentItemID>
<IsModule>1</IsModule>
<Level>1</Level>
</MenuItem>
- <MenuItem>
<Text>1</Text>
<ItemID>120001</ItemID>
<ParentItemID>1200</ParentItemID>
<IsModule>0</IsModule>
<Level>2</Level>
</MenuItem>
- <MenuItem>
<Text>2</Text>
<ItemID>120002</ItemID>
<ParentItemID>1200</ParentItemID>
<IsModule>0</IsModule>
<Level>2</Level>
</MenuItem>
- <MenuItem>
<Text>四</Text>
<ItemID>1300</ItemID>
<ParentItemID>0</ParentItemID>
<IsModule>1</IsModule>
<Level>1</Level>
</MenuItem>
- <MenuItem>
<Text>1</Text>
<ItemID>130001</ItemID>
<ParentItemID>1300</ParentItemID>
<IsModule>0</IsModule>
<Level>2</Level>
</MenuItem>
- <MenuItem>
<Text>2</Text>
<ItemID>130002</ItemID>
<ParentItemID>1300</ParentItemID>
<IsModule>0</IsModule>
<Level>2</Level>
</MenuItem>
</Menus>追问

不对，提示错误。

xml文件是不是只能有一个根节点，如果是这样的话，我一排有四个根节点。用menu控件就不可能做到。除非用四次menu控件。

或者menu读取xml文件时，从父节点开始显示。

本回答被提问者采纳

从 ASP.NET 菜单中删除默认悬停效果

【中文标题】从 ASP.NET 菜单中删除默认悬停效果

【英文标题】：Remove default hovering effect from ASP.NET menu

【发布时间】：2013-08-03 08:25:25

【问题描述】：

我想从 asp.net 菜单中删除默认的悬停效果，并且我想在单击父项时显示子项。

我正在使用内置的 asp.net 菜单。我正在从站点地图数据源绑定菜单项。

<div class="span2 menu-bar">
                                <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" EnableViewState="false" IncludeStyleBlock="false" 
                                    StaticDisplayLevels="2"  Orientation="Horizontal"  CssClass="row-fluid" DynamicHorizontalOffset="-2" RenderingMode="List">
                                </asp:Menu>
                                <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
                            </div>

请帮帮我。

提前致谢

【问题讨论】：

您尝试过哪些解决方案？请多解释一下您的问题是 asp.net 菜单是基于 css 的吗？还是内置 asp.net 菜单？

forums.asp.net/t/1829903.aspx/…

【参考方案1】：

在页面加载（或准备就绪）时，写入以下行： $('#Menu1').find('ul .level2').css('display','none');

一旦您这样做，它将停止该菜单的悬停效果。但是一旦你这样做了，那么你只能通过使其显示块来打开子菜单，所以我写了以下几行，点击菜单内的图像： $('#Menu1').find('ul .level2').css('display','block');