基于XML的下拉菜单（源代码）

以前曾看到过有人写出这样的菜单，可是自己却没有源代码，放假的时候，闲着没事，就自己写了一个，并把它制成了服务器控件。这里我用到了六个文件，当然你可以把某些文件合并，以减少耦合，我的用意是将各种不同的代码分离。在写的过程中，遇到了很多问题，不知道大家又没有碰到过，希望各位注意。好了，下面切入正题！
1、服务器控件制作：基于Xml的下拉菜单
xml文件为：
<?xml version="1.0" encoding="utf-8" ?>
<!--
服务端控件 - 数据文件
基于Xml的下拉菜单
作者：Terry Li（Icefox）
日期：2003年2月2日    Fab 2nd, 2003
-->
<NavMenu title="BenQ China">
<Category title="ETeam" id="btn1" menuitem="menu1" Down="ShowHide(btn1,menu1)" Over="MakeBtn(btn1)">
        <MenuItem title="Link1" url="../ETeam/Default.aspx" />
        <MenuItem title="Link2" url="../ETeam/Default.aspx" />
    </Category>
<Category title="R1L-a" id="btn2" menuitem="menu2" Down="ShowHide(btn2,menu2)" Over="MakeBtn(btn2)">
        <MenuItem title="Link3" url="../ETeam/Default.aspx" />
        <MenuItem title="Link4" url="../ETeam/Default.aspx" />
        <MenuItem title="Link5" url="../ETeam/Default.aspx" />
    </Category>
<Category title="R1L-b" id="btn3" menuitem="menu3" Down="ShowHide(btn3,menu3)" Over="MakeBtn(btn3)">
        <MenuItem title="Link6" url="../ETeam/Default.aspx" />
        <MenuItem title="Link7" url="../ETeam/Default.aspx" />
        <MenuItem title="Link8" url="../ETeam/Default.aspx" />
    </Category>
</NavMenu>
xslt文件为：其中引用一个脚本文件和一个样式表文件
<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
//注意：由.NET自动产生的xsl命名空间在运行的时候会产生错误，应将命名空间改为上面所示。
<xsl:template match="/NavMenu">
<!--引用脚本文件和样式文件-->
<link rel="stylesheet" href="Styles/NavMenu.css" />
<script language="JavaScript" src="Styles/NavMenu.js"></script>
    <table width="150" border="0" onMouseOut="ClearMenu()">
        <tr><td><xsl:value-of select="@title" /></td></tr>
        <!—选取根菜单
        <xsl:for-each select="Category">
        <tr><td class="btnNormal"><!—读取属性
        <xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute>
        <xsl:attribute name="onMouseDown"><xsl:value-of select="@Down" /></xsl:attribute>
        <xsl:attribute name="onMouseOver"><xsl:value-of select="@Over" /></xsl:attribute>
        <font color="white"><xsl:value-of select="@title" /></font>
        </td></tr>
        <tr class="MenuHide">
        <xsl:attribute name="id"><xsl:value-of select="@menuitem" /></xsl:attribute>
        <td>
        <table>
        <!—选取子菜单
            <xsl:for-each select="MenuItem">
                <tr><td>
                        <a>
                            <xsl:attribute name="href">
                                <xsl:value-of select="@url" />
                            </xsl:attribute>
                            <xsl:value-of select="@title" />
                        </a>
                    </td></tr>
                    </xsl:for-each>
                </table>
            </td></tr>
        </xsl:for-each>
    </table>
</xsl:template>
</xsl:stylesheet>
JS文件：
document.write('<style type="text/css">');
if(window.screen.width < 1024)
    document.write('body,table,select,input{font:13px "宋体"}');
else
    document.write('body,table,select,input{font:14px "宋体"}');
document.write('</style>');

var ActiveMenu,ActiveBtn,SelectBtn;
ActiveMenu = null;
ActiveBtn = null;
SelectBtn = null;
function ShowHide(btn,menu)
{    //check if click on button itself
    if(ActiveMenu != null && ActiveMenu != menu)
        ActiveMenu.className = "MenuHide";
    if(SelectBtn != null && SelectBtn != btn)
        SelectBtn.className = "btnNormal";
    //make show/hide
    if (menu.className == "MenuHide")
    {
        menu.className = "MenuShow";
        btn.className = "btnDown";
        ActiveMenu = menu;
        SelectBtn = btn;
        ActiveBtn = null;
    }
    else
    {
        menu.className = "MenuHide";
        btn.className = "btnNormal";
        ActiveMenu = null;
        SelectBtn = null;
    }
}
function ClearMenu()
{
    if(ActiveBtn != null)
    {
        ActiveBtn.className = "BtnNormal";
        ActiveBtn = null;
    }
}
function MakeBtn(btn)
{
    if(SelectBtn == btn) return;
    if(ActiveBtn != null)
        ActiveBtn.className = "BtnNormal";
    btn.className = "BtnUp";
    ActiveBtn = btn;
}
CSS文件：
A:link
{
    COLOR: #ff9900;
    TEXT-DECORATION:none
}
A:visited
{
    COLOR: #cc6600;
    TEXT-DECORATION: none
}
A:active
{
}
A:hover
{
    COLOR: #cc6600;
    TEXT-DECORATION: underline
}
.allbutton
{
}
.btnNormal {BACKGROUND-COLOR:#3366cc; BORDER-BOTTOM: 2px solid #000066; BORDER-LEFT: 1px solid
#33ccff; BORDER-RIGHT: 2px solid #000066; BORDER-TOP: 1px solid #33ccff; MARGIN-BOTTOM: 0px;
MARGIN-TOP: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px;cursor:hand;font: bold;}
.btnUp {BACKGROUND-COLOR: #3366cc; BORDER-BOTTOM: 1px solid #003399; BORDER-LEFT: 1px solid
#99ccff; BORDER-RIGHT: 1px solid #003399; BORDER-TOP: 1px solid #99ccff; MARGIN-BOTTOM: 1px;  
MARGIN-TOP: 1px; PADDING-BOTTOM: 1px; PADDING-LEFT: 2px;cursor:hand; color : yellow;
font-style:normal; font-variant:normal; font-weight:bold }
.btnDown  {BACKGROUND-COLOR: #3366cc; BORDER-BOTTOM: 1px solid #003399; BORDER-LEFT: 1px solid
#99ccff; BORDER-RIGHT: 1px solid #003399; BORDER-TOP: 1px solid #99ccff; MARGIN-BOTTOM: 1px;  
MARGIN-TOP: 1px; PADDING-BOTTOM: 1px; PADDING-LEFT: 2px;cursor:hand; color : yellow;
font-style:normal; font-variant:normal; font-weight:bold }
.MenuHide {  display:none}
.MenuShow {}
.SubMenuItem {  background-color: #FFFFCC}
类文件：
using System;
using System.Web;
using System.Web.UI.HtmlControls;
using System.Web.UI;
using System.Xml;
using System.Xml.XPath;
using System.Xml.Xsl;
namespace Wrox.ThePhile.Web.Controls.Server{
    public class Navigator: System.Web.UI.Control{
        string transformFilePath;
        string sourceFilePath;
        public string TransformFile{
//属性定义
            get {return transformFilePath;}
            set {transformFilePath = value;}}
        public string SourceFile{
            get {return sourceFilePath;}
            set {sourceFilePath = value;}}
        protected override void OnInit( EventArgs e ){        
            base.OnInit( e );}
        //调用Render方法（System.Web.UI.Control的基本方法）声称代表控件的HTML。
        protected override void Render( HtmlTextWriter writer ){            
            XPathDocument xdoc = new XPathDocument(Context.Server.MapPath(sourceFilePath));
        //实例化XslTransform对象
            XslTransform xslt = new XslTransform();
            xslt.Load( Context.Server.MapPath( transformFilePath ) );
        //将转换结果输出到HtmlTextWriter流
            xslt.Transform( xdoc, null, writer );    }}}
引用页面的后台编码：
//下面代码将自动生成
protected Wrox.ThePhile.Web.Controls.Server.Navigator MenuNav;
引用页面的前台编码：注意，此处需引用该程序集，Assembly为引用程序集的名称。
<%@Register TagPrefix="Wrox" Namespace="Wrox.ThePhile.Web.Controls.Server" Assembly="ThePhile" %>
<Wrox:Navigator id="MenuNav" SourceFile="Config/NavMenu.xml" TransformFile="Transforms/NavMenu.xslt" runat="server" />