以前曾看到过有人写出这样的菜单，可是自己却没有源代码，放假的时候，闲着没事，就自己写了一个，并把它制成了服务器控件。这里我用到了六个文件，当然你可以把某些文件合并，以减少耦合，我的用意是将各种不同的代码分离。在写的过程中，遇到了很多问题，不知道大家又没有碰到过，希望各位注意。好了，下面切入正题！
1、服务器控件制作：基于Xml的下拉菜单
xml文件为：
xslt文件为：其中引用一个脚本文件和一个样式表文件
//注意：由.NET自动产生的xsl命名空间在运行的时候会产生错误，应将命名空间改为上面所示。
|
| |
|
JS文件：
document.write('');
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" %>