摘要：越来越多的网页中使用到了菜单，一般说来，菜单制作的方法比较多，编程的语言基本上是javascript或者vbscript这两种，这种菜单一旦制作好就不能改变，修改起来比较麻烦。本文讲解webmenu控件，同时给出实例，讲菜单和数据库结合起来，实现动态的菜单。
前言：
下拉菜单技术常常在大型网站（如微软公司网站）中被用于网站导航，这样可有效的缩短浏览者定位至特定内容的时间。用javascript或vbscript虽可实现该项效果，但需要学习脚本语言和dhtml。或者，还可以用dreamweaver和css也能制作出（多级）下拉菜单。
对菜单的显示过程进行一下分析，可以发现以下几点：
1 当鼠标移动到文字（或图像）上，菜单显示；
2 鼠标从文字（或图像）上移开（除菜单外的位置），菜单消失；
3 鼠标从文字（或图像）移动到菜单上，菜单保持显示(这是关键)；鼠标从菜单移开，菜单消失。
4 对于多级菜单还要保持上下级菜单的同步。
5当鼠标移动到菜单项目上，菜单项的外观（前景，背景或边框）变化。
这些特点实现了菜单的部分功能，某一些菜单功能无法通过或者不方便通过脚本语言来操作，例如，怎么来实现菜单的disenable和enable功能。还有怎么来实现菜单的“过程操作”（也就是没有点击“打开文件”，就无法进行“编辑”功能），这些方法均无法通过脚本来实现，同时脚本语句嵌入html语言中，结构复杂，写作麻烦，技术要求较高，不能迅速掌握，现在也有一些写作网页菜单的工具，通过软件操作，生成脚本，然后拷贝脚本到网页里，尽管这样也可以实现网页菜单，但是也无法实现上文所说的部分功能。
第一部分：web munu控件
在网上搜索到了一个很有用的控件，webmenu for asp.net（http://www.coalesys.com），这个控件除了能够实现生成脚本语言的功能之外，就是还可以支持数据库操作，通过在数据库里设置一些属性的值，可以实现菜单的相关功能。而且该控件生成的脚本可以面向国中内核的浏览器，做到了真正的兼容，使用起来没有后顾之忧。
使用之前要注册。注册后就可以把注册码嵌入asp.net的后台，以便分发部署的时候不会出错。web menu的license key是一个字符串，格式为："用户名:公司名称:序列号"具体使用如下：
webmenu.userdata = "john doe:acme corp:1234567890";
//如果没有公司名称，使用方法如下：
webmenu.userdata = "john doe::1234567890";
具体使用这个控件的方法如下：
1：拷贝dll到解决方案的bin目录。
2：在您的页面上注册。语句为：
<%@ register tagprefix="cswm" namespace="coalesys.webmenu" assembly="coalesys.webmenu" %>
3：在页面上放置web menu对象。
<cswm:webmenu
id = "quickmenu"
clearpixelimage = "/images/clearpixel.gif"
popupicon = "/images/popup.gif"
selectedpopupicon = "/images/selectedpopup.gif"
runat = "server">
</cswm:webmenu>
4：添加菜单组和菜单项。
<cswm:webmenu
id = "quickmenu"
clearpixelimage = "/images/clearpixel.gif"
popupicon = "/images/popup.gif"
selectedpopupicon = "/images/selectedpopup.gif"
runat = "server">
<cswm:group
caption = "home"
runat="server">
<cswm:item
caption = "news"
url = "news.aspx"
runat = "server" />
</cswm:group>
</cswm:webmenu>
5：添加嵌套菜单组和菜单项。
<cswm:webmenu
id = "quickmenu"
clearpixelimage = "/images/clearpixel.gif"
popupicon = "/images/popup.gif"
selectedpopupicon = "/images/selectedpopup.gif"
runat = "server">
<cswm:group
caption = "home"
runat="server">
<cswm:item
caption = "news"
url = "news.aspx"
runat = "server" />
<cswm:item
caption = "about"
url = "about.aspx"
runat = "server" />
<cswm:item
caption = "products"
runat = "server">
<cswm:group runat="server">
<cswm:item
caption = "super widget"
url = "superwidget.aspx"
runat = "server" />
<cswm:item
caption = "super widget pro"
url = "superwidgetpro.aspx"
runat = "server" />
</cswm:group>
</cswm:item>
</cswm:group>
</cswm:webmenu>
在asp.net里操作的基本过程如下
1：添加控件对象到vs.net的工具箱
找到相应的dll：
2：拖放web menu到页面上。
效果图如下：
3：编程。
第二部分：数据库操作
为了实现通过数据库来操作菜单功能，建立下表：
其中的部分数据如下：
可以看到有file，edit，options等几个菜单组，在file里又有new，open，save等。在asp.net后台
程序代码如下：
using system;
using system.collections;
using system.componentmodel;
using system.data;
using system.drawing;
using system.web;
using system.web.sessionstate;
using system.web.ui;
using system.web.ui.webcontrols;
using system.web.ui.htmlcontrols;
using system.data.oledb;
namespace webapplication6
{
/// <summary>
/// webform1 的摘要说明。
/// </summary>
public class webform1 : system.web.ui.page
{
protected coalesys.webmenu.webmenu csnetmenu;
private void page_load(object sender, system.eventargs e)
{
// 在此处放置用户代码以初始化页面
csnetmenu.menubar.absolutedockenabled = false;
csnetmenu.menubar.absolutedragenabled = false;
csnetmenu.menubar.backgroundcolor = "";
csnetmenu.menubar.outerhighlightcolor = "#666666";
csnetmenu.menubar.outershadowcolor = "#666666";
csnetmenu.menubar.innershadowcolor = "#f9f8f7";
csnetmenu.menubar.hovercolor = "#dfdfdf";
csnetmenu.menubar.selectedcolor = "#b6bdd2";
csnetmenu.menubar.selectedtextcolor = "#000000";
csnetmenu.backgroundcolor = "";
csnetmenu.selectedcolor = "#b6bdd2";
csnetmenu.outerhighlightcolor = "#c0c0c0";
csnetmenu.outershadowcolor = "#c0c0c0";
csnetmenu.innershadowcolor = "#808080";
csnetmenu.popupicon = "./images/arrow-black.gif";
csnetmenu.selectedpopupicon = "./images/arrow-white.gif";
csnetmenu.clearpixelimage = "./images/clearpixel.gif";
// populate webmenu
loadwebmenudata(csnetmenu);
}
//=============================================================================
// loadwebmenudata - load webmenu from database
//
// input:
// cswebmenu - [in] coalesys.webmenu.webmenu object
//
// output:
// none
//
public void loadwebmenudata(coalesys.webmenu.webmenu cswebmenu)
{
coalesys.webmenu.group csmenugroup;
// database info
string dbconnstring = "provider=microsoft.jet.oledb.4.0;data source=";
string dbpathstring = server.mappath("./selfreferencedtable.mdb");
string dbsqlstring = "select * from nodes order by id";
// initiate oledb interface
oledbconnection dbconn = new oledbconnection(dbconnstring + dbpathstring);
oledbcommand dbcomm = new oledbcommand(dbsqlstring, dbconn);
oledbdataadapter dbadapter = new oledbdataadapter();
dbconn.open();
// fill an ado.net dataset
dataset ds = new dataset();
dbadapter.selectcommand = dbcomm;
dbadapter.fill(ds, "menuitems");
dbconn.close();
// create the data relation between the id and parent_id columns of the menuitems table.
// (this is the key to hierarchical navigating in a self-referencing table).
datarelation dr = ds.relations.add("menuitemhierarchy",
ds.tables["menuitems"].columns["id"],
ds.tables["menuitems"].columns["parent_id"]);
// start top-down navigation of the menuitem rows.
foreach(datarow dbmenuitem in ds.tables["menuitems"].rows)
{
// if the parent_id colum is null, then this is a root menu item.
if(dbmenuitem.isnull("parent_id"))
{
// create a menu group for the root menu item
csmenugroup = cswebmenu.groups.add();
csmenugroup.caption = dbmenuitem["caption"].tostring();
// execute the recursive function to populate all it's children.
addmenuitems(dbmenuitem.getchildrows(dr), dr, csmenugroup);
}
}
}
//=============================================================================
// addmenuitems - recursive function to populate hierarchical menu items
// from data rows that have parent/child relationships.
//
// input:
// datarows - [in] child rows
// datarel - [in] data relation
// webmenugroup - [in] webmenu group
//
// output:
// none
//
public void addmenuitems(datarow[] datarows, datarelation datarel, coalesys.webmenu.group webmenugroup)
{
coalesys.webmenu.item csmenuitem;
coalesys.webmenu.group csnestedmenugroup;
datarow[] drchildren;
foreach(datarow dbmenuitem in datarows)
{
csmenuitem = webmenugroup.items.add();
csmenuitem.caption = dbmenuitem["caption"].tostring();
csmenuitem.url = dbmenuitem["url"].tostring();
if (dbmenuitem["enable"].tostring()=="true" )
{
csmenuitem.enabled=true;
}
else
{
csmenuitem.enabled=false;
}
// check if this item has children of it's own
drchildren = dbmenuitem.getchildrows(datarel);
// if so, create a group for the children and reenter this function.
if(drchildren.length > 0)
{
csnestedmenugroup = csmenuitem.addgroup();
addmenuitems(drchildren, datarel, csnestedmenugroup);
}
}
}
}
效果图如下：
其中可以看到，help菜单有两项内容：contents和about，其中，contents又有topics和objectreference，但是这里的topics已经被disenable了，不能点击，菜单的使能由数据库里的enable字段决定，这样实现了动态菜单的生成。如果菜单的项目由改变，只需要在数据库里面进行操作就可以了，从而实现了web页面实现菜单的基本功能。除了能够实现这些功能外，还可以在菜单中添加图标，可停靠等。如下图：
索要源代码和作者联系方式：[email protected]，谢谢支持。
新闻热点
疑难解答
图片精选
