menu控件制作下拉式导航菜单
2010-04-06 14:01
471 查看
1. XML文件。这里用XML文档:slivermenu.xml描述了菜单的具体内容。如 <?xml version="1.0" encoding="utf-8" ?> <items> <menuitem navigateurl="http //dotnet. x.cc/" text="网站首页"> <menuitem navigateurl="http //dotnet. x.cc/ShowList. x?id=1" text="新闻通知"> <menuitem navigateurl="Classical. x" text="新闻1"/> <menuitem navigateurl="Rock. x" text="新闻2"> <menuitem navigateurl="Classical. x" text="最新新闻2.1"/> <menuitem navigateurl="Classical. x" text="最新新闻2.2"/> </menuitem> </menuitem> <menuitem navigateurl="Movies. x" text="学科介绍"> <menuitem navigateurl="Action. x" text="通知1"/> <menuitem navigateurl="Drama. x" text="通知2"/> <menuitem navigateurl="Musical. x" text="通知3"/> </menuitem> <menuitem navigateurl="" text="导师风采"> </menuitem> <menuitem navigateurl="" text="党团工作"> </menuitem> <menuitem navigateurl="" text="招生就业"> </menuitem> <menuitem navigateurl="" text="研究生会"> </menuitem> <menuitem navigateurl="" text="毕业生风采"> </menuitem> <menuitem navigateurl="" text="请假系统"> </menuitem> <menuitem navigateurl="" text="下载专栏"> </menuitem> <menuitem navigateurl="" text="BBS"> </menuitem> </menuitem> </items> 2.添加XMLDataSource控件,配置数据源:slivermenu.xml 3.添加Menu控件。配置数据源XMLDataSource1. 4.数据绑定。在Menu1的属性面板里,选择Databinding,点选menuitem,添加到“所选数据绑定里”在右侧的对话框的数据绑定中,TextField选text,NavigatrURLField选Navigatrurl。点“确定”。 5.在Menu控件属性面板中选择Orientation:Horizontal。 ok,打完收工。具体代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="slivermenu.aspx.cs" Inherits="slivermenu" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>slivermenu</title> </head> <body> <form id="form1" runat="server"> <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/App_Data/staticmenu.xml" XPath="items/menuitem" OnTransforming="XmlDataSource1_Transforming"></asp:XmlDataSource> <asp:Menu ID="Menu1" runat="server" DataSourceID="XmlDataSource1" DynamicHorizontalOffset="17" Font-Bold="True" Font-Size="Small" MaximumDynamicDisplayLevels="2" Orientation="Horizontal" StaticDisplayLevels="2" Style="position: relative" mce_Style="position: relative"> <DataBindings> <asp:MenuItemBinding DataMember="menuitem" NavigateUrlField="navigateurl" TextField="text" /> </DataBindings> </asp:Menu> </form> </body> </html>
后来经某个提示,突然想到会不会在属性里可以设置呢?一试,果然如此!怎么就没想到呢! 方法: 右击Menu控件点属性,把Orientation设置为Horizontal,把StaticDisplayLevels设置为2或2以上的数字,就可以了! 把StaticDisplayLevels设为2时的情况如下图所示,:
说明:Orientation是"方向,定向"的意思;
Horizontal是"横向"的意思;Vertical是"竖向"的意思; StaticDisplayLevels表示静态显示的层次.
因为站点地图Web.sitemap里只允许一个根节点,所以菜单中第一层次的菜单项只有一个, 比如上例中的Home菜单项,
而StaticDisplayLevels默认值为1, 所以默认显示的只有一个菜单项,其余的都是弹出式.
知道这个道理后,只要StaticDisplayLevels的值够大,就可以把所以菜单项都横向显示出来(当然若层次很多的话,没必要把所有的菜单项都
显
相关文章推荐
- ASP.NET2.0 menu控件制作下拉式导航菜单
- 【荐】JavaScript制作可伸缩的淡绿色菜单导航
- jQuery制作的网页菜单导航
- CSS+DIV设计实例:纯CSS制作下拉导航菜单
- 列表中的导航菜单的制作
- 使用display:block制作横向导航菜单
- js入门·表单元素(select下拉列表)制作二级联动菜单和网站导航 .txt
- 快速制作CSS导航菜单
- HTML/CSS导航菜单-垂直菜单的制作
- 使用CSS 制作导航菜单 (一)
- javascript笔记09:javascript的下拉式导航菜单
- 使用CSS3制作立体效果的导航菜单
- 制作CSS导航菜单
- 下拉式导航菜单
- 一款活动下拉式菜单的制作 ( jQuery & CSS )
- 转:使用无需列表制作导航菜单。
- Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换
- 应用javascript脚本制作二级导航菜单
- 两种防刷新的高亮导航菜单制作 记录cookies和根据Url网址
- 【CSS3】---练习制作导航菜单