IDC资讯中心
以前曾看到过有人写出这样的菜单，可是自己却没有源代码，放假的时候，闲着没事，就自己写了一个，并把它制成了服务器控件。这里我用到了六个文件，当然你可以把某些文件合并，以减少耦合，我的用意是将各种不同的代码分离。在写的过程中，遇到了很多问题，不知道大家又没有碰到过，希望各位注意。好了，下面切入正题！
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" />
