【声明】本文已在《程序员》杂志发表。本站转载纯属个人学习和珍藏之举，绝无侵犯版权之嫌。如作者或相关出版商认为转载有何不妥，请来信告知，必立即删除！另，在此对原文的排版格式作了一些修改，但原文未改动一字。
【演示】观看本文最终结果演示页面请 单击这里
【正文】
一、 概述一个好的导航 (navigation) 系统能增加网页的可读性和美观性，尤其是当网站内容比较丰富时，其逻辑结构更加需要用好导航系统来组织，使得网页读者知道其所在的位置以及还有那些内容可以浏览。导航系统中很重要的一个组成部分就是网页菜单。
普通 Windows 应用程序一般都有一个菜单系统，但是在网页中实现菜单要复杂一些。因为 Windows 操作系统中菜单是标准的用户界面接口，编制Windows 应用程序时，只需要描述菜单，菜单的显示和调用则由 Windows负责。在网页中则情况不同，HTML 没有菜单规范，网页开发者必须自己利用 DHTML 和 JavaScript 来实现菜单的显示和调用等功能。编制这样的程序还是比较复杂的。加上各种浏览器实现的DHTML 和 JavaScript 有差异，又使得原本已经复杂的网页菜单程序更加复杂。
本文将介绍用 XML 和 XSLT 来生成网页菜单的方法，它将使得网页开发者只需要描述菜单，而不用担心那些复杂的JavaScript程序，使得制作网页菜单比做 Windows 程序的菜单还要简单。
二、 菜单的定义先从菜单的逻辑概念讲起。所谓菜单，包含了一组菜单项，每个菜单项，具有属性标题和连接，菜单项又可以包含一组子菜单项，从而形成一个嵌套的树状结构
![](<a target="_blank" href=http://it365cn.com/articleimg/661-1.jpg)
http://it365cn.com/articleimg/661-1.jpg' border=0 align=absmiddle>
树状结构的菜单
如图所示的结构很容易用 XML 来描述 (menu.XML)。
![](<a target="_blank" href=http://it365cn.com/articleimg/661-2.jpg)
http://it365cn.com/articleimg/661-2.jpg' border=0 align=absmiddle>
XML (eXtensible Markup Language,扩展标记语言) 是一种数据格式[1]，它的特点是人们能非常容易读懂其中的含义，例如上面所示的菜单结构就一目了然。不仅仅是人能容易看懂 XML，计算机也能非常容易读懂其中的含义，这句话的含义是处理XML的程序已经非常普及，Windows下有MSXML[5]，Java下有JAXP，即几乎所有平台上都有了XML处理程序[7][8]。并且处理XML有标准的办法，比如本文将用到的 XSLT (eXtensible Stylesheet Language Transformation, 扩展样式语言转换)就是将XML格式的数据转化到另外一种格式的标准方法[2][3][4]。
如果我们能用 XSLT 转化上述菜单的XML到网页上的菜单，那么制作网页菜单就比较简单了。因为编辑菜单的XML非常容易，普通的文本编辑器就可以了。
实现网页菜单的DHTML和JavaScript程序常常被制作成程序库的形式，称为网页菜单引擎。这些引擎都提供调用的接口，使得我们能够定制(customize)我们自己的菜单，但问题是定制菜单需要修改这些程序，比较麻烦也容易出错。
我们要解决的就是用XSLT根据菜单的XML，自动生成调用接口。
先让我们看看有哪些现成可用的网页菜单引擎。
三、 网页菜单引擎 因特网上有很多JavaScript资源网站，dynamicdrive.com 就是其中很优秀的一个。那里有许多很好的JavaScript程序可供下载使用，尤其是它的"Menus and Navigation Systems"分类中收集了不少网页菜单引擎。经过比较，我们选择使用"HV menu" (
http://www.dynamicdrive.com/dynamicindex1/hvmenu/index.htm)。 HV menu 的优点是既可以做水平排列的菜单，又可以做垂直排列的菜单；可以包含多层子菜单结构；可以自定义菜单的字体、颜色、对齐方式；以及支持IE4+, NS4, NS6+等多种浏览器。
"HV menu"的程序库为 menu_com.js 文件。它的接口规范是：
MenuX=new Array(Text to show, Link, background image (optional), number of sub elements, height, width);
因此在网页中使用这个菜单引擎的 JavaScript 函数调用为：
<script>
Menu1=new Array('论坛首页','http://www.delphibbs.com', '', 4, 20, 120);
Menu2=new Array('论坛分类','', '', 8, 20, 120);
Menu3=new Array('我的论坛','', '', 5, 20, 120);
Menu4=new Array('富翁用户','', '', 3, 20, 120);
Menu5=new Array('大富翁系列','', '', 3, 20, 120);
Menu6=new Array('帮助','', '', 4, 20, 120);
Menu6_1=new Array('使用说明','tutorial.htm', '', 0, 20, 120);
Menu6_2=new Array('常见问题','faq.htm', '', 0, 20, 120);
Menu6_3=new Array('关于我们','aboutus.htm', '', 0, 20, 120);
Menu6_4=new Array('联系我们','contactus.htm', '', 0, 20, 120);
</script> 下面我们将用XSLT把菜单的XML转换为上述函数调用。
.text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://my.poco.cn/fav/storeIt.php?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t)+'&img=http://www.h-strong.com/blog/logo.gif','keyit','scrollbars=no,width=475,height=575,status=no,resizable=yes'));keyit.focus();){kind=link}