您的位置:首页 > 编程语言 > ASP

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的值够大,就可以把所以菜单项都横向显示出来(当然若层次很多的话,没必要把所有的菜单项都
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息