ASP.NET - 菜单控件概述

本文详细介绍了ASP.NET中的Menu控件,包括静态和动态显示模式,如何通过StaticDisplayLevels和MaximumDynamicDisplayLevels属性控制显示层级,以及如何通过数据绑定和XML数据源定义菜单内容。此外,还探讨了控件的外观和行为定制,如Orientation属性、样式设置和动态外观计时。Menu控件支持与SiteMapDataSource集成,提供了丰富的事件和自定义选项,可用于创建强大的网站导航结构。
摘要由CSDN通过智能技术生成

      利用 ASP.NET Menu 控件,可以开发 ASP.NET 网页的静态和动态显示菜单。

      Menu 控件具有两种显示模式:静态模式和动态模式。静态显示意味着 Menu 控件始终是完全展开的。整个结构都是可视的,用户可以单击任何部位。在动态显示的菜单中,只有指定的部分是静态的,而只有用户将鼠标指针放置在父节点上时才会显示其子菜单项。

您可以在 Menu 控件中直接配置其内容,也可通过将该控件绑定到数据源的方式来指定其内容。无需编写任何代码,便可控制 ASP.NET Menu 控件的外观、方向和内容。除该控件公开的可视属性外,该控件还支持 ASP.NET 控件外观和主题。

 

一、静态显示行为

使用 Menu 控件的 StaticDisplayLevels 属性可控制静态显示行为。StaticDisplayLevels 属性指示从根菜单算起,静态显示的菜单的层数。例如,如果将 StaticDisplayLevels 设置为 3,菜单将以静态显示的方式展开其前三层。静态显示的最小层数为 1,如果将该值设置为 0 或负数,该控件将会引发异常。

 

二、动态显示行为

MaximumDynamicDisplayLevels 属性指定在静态显示层后应显示的动态显示菜单节点层数。例如,如果菜单有 3 个静态层和 2 个动态层,则菜单的前三层静态显示,后两层动态显示。

如果将 MaximumDynamicDisplayLevels 设置为 0,则不会动态显示任何菜单节点。如果将 MaximumDynamicDisplayLevels 设置为负数,则会引发异常。

 

三、定义菜单内容

可以通过两种方式来定义 Menu 控件的内容:添加单个 MenuItem 对象(以声明方式或编程方式);用数据绑定的方法将该控件绑定到 XML 数据源。

 

四、手动添加菜单项

可以通过在 Items 属性中指定菜单项的方式向控件添加单个菜单项。Items 属性是 MenuItem 对象的集合。下面的示例演示 Menu 控件的声明性标记,该控件有三个菜单项,每个菜单项有两个子项:

<asp:Menu ID="Menu1" runat="server" StaticDisplayLevels="3">

  <Items>

    <asp:MenuItem Text="File" Value="File">

      <asp:MenuItem Text="New" Value="New"></asp:MenuItem>

      <asp:MenuItem Text="Open" Value="Open"></asp:MenuItem>

    </asp:MenuItem>

    <asp:MenuItem Text="Edit" Value="Edit">

      <asp:MenuItem Text="Copy" Value="Copy"></asp:MenuItem>

      <asp:MenuItem Text="Paste" Value="Paste"></asp:MenuItem>

    </asp:MenuItem>

    <asp:MenuItem Text="View" Value="View">

      <asp:MenuItem Text="Normal" Value="Normal"></asp:MenuItem>

      <asp:MenuItem Text="Preview" Value="Preview"></asp:MenuItem>

    </asp:MenuItem>

  </Items>

</asp:Menu>

 

五、用数据绑定的方法将控件绑定到 XML 数据源

利用这种将控件绑定到 XML 文件的方法,可以通过编辑此文件来控制菜单的内容,而不需要使用设计器。这样就可以在不重新访问 Menu 控件或编辑任何代码的情况下,更新站点的导航内容。如果站点内容有变化,便可使用 XML 文件来组织内容,再提供给 Menu 控件,以确保网站用户可以访问这些内容。

 

六、外观和行为

可通过 Menu 控件的属性来调整该控件的行为。此外,您还可以控制动态显示行为,包括菜单节点持续显示的时间长度。例如,若要将 Menu 的方向从水平更改为垂直,则可按以下所述来设置 Orientation 属性:

Menu.Orientation = Orientation.Vertical;

      将该属性设置为 Orientation.Horizontal,便可将菜单方向恢复为水平。

可以逐个设置 Menu 控件的属性来指定其外观的大小、颜色、字体和其他特性。此外,还可以对 Menu 控件应用外观和主题。

 

七、样式

每个菜单层都支持样式属性。如果没有设置动态样式属性,则使用静态样式属性。如果设置了动态样式属性,而没有设置静态样式属性,则使用默认的静态样式属性进行呈现。Menu 控件样式的层次结构如下所示:

      1、控件

2SubMenuStyles

3MenuItemStyles

4SelectedItemStyles

5HoverMenuItemStyles

使用下面的逻辑可跨动态和静态菜单合并这些样式:

·各种样式分别被应用至适当的操作或项类型。

·所有样式都被合并到层次结构中优先于这些样式的样式中,并重写最后的样式。

 

说明: 永远不会合并静态菜单;如果没有定义静态样式,则应用动态样式。

 

八、动态外观计时

设计动态菜单时需要注意的一个方面便是菜单动态显示部分从显示到消失所需的时间长度。按以下方式调整 DisappearAfter 属性,可以按毫秒配置此值:

Menu.DisappearAfter = 1000;

默认值为 500 毫秒。如果将 DisappearAfter 的值设置为 0,在 Menu 控件之外暂停便会使其立即消失。将此值设置为 -1 指示暂停时间无限长,只有在 Menu 控件之外单击,才会使动态部分消失。

 

九、将 Menu 控件与 UpdatePanel 控件一起使用

UpdatePanel 控件用于通过回发更新页面的选定区域,而不是更新整个页面。Menu 控件可以在 UpdatePanel 控件内使用,限制条件是必须使用对级联样式表 (CSS) 类的引用来应用样式。例如,使用属性-CssClass(其中属性指 Property)属性 (Attribute) 来设置样式,而不是使用属性-子属性(其中属性指 Property

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:150px; height:30px; text-align:center; color:#fff; border-bottom:1px solid #FFF; background:#0069A3; line-height:30px; font-size:14px; overflow:hidden;} .menu ul {padding:0; margin:0;list-style-type: none; } .menu ul li {float:left; margin-right:1px; position:relative;} .menu ul li ul {display: none;} /* specific to non IE browsers */ .menu ul li:hover a {color:#fff; background:#028DE8;}/*一级菜单事件*/ .menu ul li:hover ul {display:block; position:absolute; top:0; left:151px; width:100px;} .menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}/*三级菜单常规*/ .menu ul li:hover ul li:hover a.hide {background:#028DE8; color:#000;}/*三级菜单事件*/ .menu ul li:hover ul li ul {display: none;} .menu ul li:hover ul li a {display:block; background:#028DE8; color:#000;}/*二,三级菜单常规*/ .menu ul li:hover ul li a:hover {background:#6fc; color:#000;}/*二,三级菜单事件*/ .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:151px; top:0; width:100px;} </style> </head> <body> <form id="form1" runat="server"> <div class="menu"> <ul> <li><a class="hide" href="#">城乡规划</a> <ul> <li><a href="#" title="二级菜单1">二级菜单一</a></li> <li><a href="#" title="二级菜单2">二级菜单二</a></li> <li><a href="#" title="二级菜单3">二级菜单三</a></li> <li><a class="hide" href="#" title="这是三级菜单">三级菜单</a> <ul> .................
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值