javascript+xml实现二级下拉菜单，不会被任何标签或元素遮住

核心提示：一、简单说明该菜单最大的优点是可以跨过网页上任何标签，甚至是框架，javascript+xml实现二级下拉菜单，不会被任何标签或元素遮住，（一般的菜单会被select,object,Flash等挡住）所以如果你有这方面的需要，那么这个菜单是个很好的选择，target为可选属性，默认值为"_self"

一、简单说明

该菜单最大的优点是可以跨过网页上任何标签，甚至是框架，
（一般的菜单会被select,object,Flash等挡住）
所以如果你有这方面的需要，
那么这个菜单是个很好的选择。

总体而言，它有如下特性：
（1）菜单的样式和数据都是通过xml配置
（2）菜单的样式可以随心所欲修改，如：

<base>
　  <background-color>#DDDDDD</background-color>
　  <background-image>url(menu_bg.jpg)</background-image>
　  <font-size>10pt</font-size>
　  <color>#000099</color>
　  <width>100%</width>
　  <height>32</height>
　  <text-align>center</text-align>
　  <cursor>default</cursor>
</base>

只要节点名称符合各自标签(table,tr,td之一)的style attribute即可。

（3）主菜单项之间可以设置分割图片，
子菜单项可以设置分割线的样式。

（4）所有图片都由CSS控制，避免路径问题。

（5）可以设置虚拟目录的别名，为菜单链接使用绝对路径带来方便，如：

<context>
　  <path>hdsa</path>
</context>

设置该值后，用户只需根据文件的目录结构写好菜单，而不必担心虚拟目录的问题。

由于菜单使用了window.createPopup()，
所以它被限制在IE5.5以上，
而且子菜单如果是新开窗口，会被拦截。
注：用window.createPopup()制作菜单受到过前人的启发

设置该值后，用户只需根据文件的目录结构写好菜单，而不必担心虚拟目录的问题。

由于菜单使用了window.createPopup()，
所以它被限制在IE5.5以上，
而且子菜单如果是新开窗口，会被拦截。
注：用window.createPopup()制作菜单受到过前人的启发
=====================================================================

二、实现的两个脚本可以写在一个文件中：

（1）处理Popup窗口的脚本

//------------------ 下面一些函数用来处理弹出窗口  ------------------ //
var pops = new Array(); // 用来存储Popup窗口家族的数组
function CreatePopup(degree)
{
　  if (degree < 0)　  // 层数不能小于0
　　　  return null;
　  if (pops[degree] != null) //如果已经存在则不需创建
　　　  return pops[degree];

　  if (degree == 0)
　　　  pops[0] = window.createPopup(); //创建最顶层Popup窗口
　  else{
　　　  if (pops[degree - 1] == null)
　　　　　  pops[degree - 1] = CreatePopup(degree - 1)　  //递归回溯从第一层开始创建
　　　  pops[degree] = pops[degree - 1].document.parentWindow.createPopup(); //从父Popup窗口创建子Popup窗口
　  }
　  pops[degree].document.body.setAttribute("degree", degree);
　  return pops[degree];
}

CreatePopup(1); //创建一个2层的Popup家族

var oPopup = pops[0];
var timer = null;

/**
*显示一级子菜单
*@param objShow - 显示子菜单的对象
*@param strGetID - 存储显示内容的标签id
*/
function showSubMenu1(objShow,strGetID) {
　  clearTimer();
　  endHideSubMenu();
　  var objGet = eval(document.getElementById(strGetID));
　　
　  pops[1].hide();
　  pops[0].document.body.innerHTML = objGet.innerHTML;
　  pops[0].show(0,0,1,1,objShow);
　  var intWidth = pops[0].document.body.scrollWidth;
　  var intHeight = pops[0].document.body.scrollHeight;
　  pops[0].hide();
　  pops[0].show(10,objShow.offsetHeight-2,intWidth,intHeight,objShow);
}

/**
*显示二级菜单
*@param strGetID - 存储显示内容的标签id
*@param objTr - 显示子菜单的tr对象
*/
function showSubMenu2(strGetID,objTr) {
　  clearTimer();
　  endHideSubMenu();
　  var objGet = eval(document.getElementById(strGetID));
　  pops[1].document.body.innerHTML = objGet.innerHTML;
　  pops[1].show(0,0,1,1,pops[0].document.body);
　  var intWidth = pops[1].document.body.scrollWidth;
　  var intHeight = pops[1].document.body.scrollHeight;
　  pops[1].hide();
　  pops[1].show(objTr.offsetWidth - 2,-2, intWidth, intHeight, objTr);

}

//隐藏一级子菜单
function hideSubMenu1(){
　  //pops[0].hide();
　  window.setTimeout("pops[0].hide()", 1000);
}

//隐藏二级子菜单
function hideSubMenu2()
{
　  //clearTimer();
　  //timer = window.setTimeout("pops[1].hide()", 1000);
　  pops[1].hide();
}

//隐藏所有下拉菜单
function hideSubMenu()
{
　  if(pops[0] != null)pops[0].hide();
　  if(pops[1] != null)pops[1].hide();
}

function clearTimer()
{
　  if (timer != null)
　　　  window.clearTimeout(timer)
　  timer = null;
　  //alert("OK");
}

（2）读取分析xml数据文件，打印菜单的脚本

//位置信息
var m_strTitle = "您的位置->";

// -------- 主菜单样式相关定义 ---------//

//定义主菜单样式
var m_strMainMenuStyle = "";
//主菜单项的样式attribute
var m_strMainMenuItemStyle = "";
//主菜单项样式PRoperty
var m_strMMItemProBase = {};
//主菜单项鼠标悬停样式Property
var m_strMMItemProMOver = {};
//菜单项与项之间的分割图片
var m_strMMItemSplitImg;

// -------- 子菜单样式相关定义 ---------//

//定义子菜单样式
var m_strSubMenuStyle = "";
//子菜单项的样式attribute
var m_strSubMenuItemStyle = "";
//子菜单项样式Property
var m_strSMItemProBase = {};
//子菜单项鼠标悬停样式Property
var m_strSMItemProMOver = {};
//子菜单项下边框样式(作为分割线)
var m_strSMItemBorderB = "";

//定义虚拟目录路径
var m_strContextPath = "";

//菜单xml数据文件对象
var m_doc;

//主菜单集合
var m_objMMList;

var STR_POS_FRONT = "您的位置：";

//loadMenu("main_menu.xml");
/**
*加载菜单
*@param strXMLPath - XML数据文件所在路径及文件名
*/
function loadMenu(strXMLFile) {
　  m_doc = new ActiveXObject("MSXML2.DOMDocument.3.0");
　  m_doc.async = false;
　  m_doc.load(strXMLFile);

　  getMainMenuStyle();
　  getSubMenuStyle();

　  //得到主菜单集合
　  m_objMMList = m_doc.selectSingleNode("//popmenu/menus").childNodes;

　  //得到虚拟目录
　  if( m_doc.selectSingleNode("//popmenu/context/path") ) {
　　　  m_strContextPath = m_doc.selectSingleNode("//popmenu/context/path").text;
　  }

　  //输出主菜单
　  printMainMenu();
　  //输出一级子菜单
　  printSubMenu();
　　
}

/**
*鼠标移入移出主菜单样式的改变
*@param obj - 改变样式的对象
*@param bolChg - 是否改变样式
*/
function chgMainMenuStyle(obj,bolChg)
{
　  if ( bolChg ) {//鼠标悬停改变颜色
　　　  for( var pro in m_strMMItemProMOver ) {
　　　　　  obj.style[pro] = m_strMMItemProMOver[pro];
　　　  }
　  } else {//鼠标移出
　　　  obj.style.border = "0";
　　　  for( var pro in m_strMMItemProBase ) {
　　　　　  obj.style[pro] = m_strMMItemProBase[pro];
　　　  }
　  }
}//end function chgMainMenuStyle(obj,i)

/**
*鼠标移入移出子菜单样式的改变
*@param obj - 改变样式的对象
*@param bolChg - 是否改变样式
*/
function chgSubMenuStyle(obj,bolChg) {
　  if ( bolChg ) {//鼠标悬停改变颜色
　　　  for( var pro in m_strSMItemProMOver ) {
　　　　　  obj.style[pro] = m_strSMItemProMOver[pro];
　　　  }
　  } else {//鼠标移出
　　　  for( var pro in m_strSMItemProBase ) {
　　　　　  obj.style[pro] = m_strSMItemProBase[pro];
　　　  }
　  }
}//end function chgSubMenuStyle(obj,i)

/**
*构造节点样式
*@param strPath 节点路径
*/
function getNodeStyle(strPath) {
　  var strStyle = "";
　  if( m_doc.selectSingleNode(strPath) ) {
　　　  var nodeList = m_doc.selectSingleNode(strPath).childNodes;
　　　  for( var i = 0;i < nodeList.length;i ++ ) {
　　　　　  var nodeName = nodeList[i].nodeName;
　　　　　  var nodeText = nodeList[i].text;
　　　　　  strStyle += nodeName.toLowerCase() + ":" + nodeText + ";";
　　　  }
　  }
　  return strStyle;
}
/**
*构造节点Style Property
*/
function getNodeProperty(strPath) {
　  var arrProperty = {};
　  if( m_doc.selectSingleNode(strPath) ) {
　　　  var nodeList = m_doc.selectSingleNode(strPath).childNodes;
　　　  for( var i = 0;i < nodeList.length;i ++ ) {
　　　　　  var nodeName = nodeList[i].nodeName;
　　　　　  nodeName = nodeName.toLowerCase();
　　　　　  var nodeText = nodeList[i].text;
　　　　　  //由attribute到property的转变。如background-color -> backgroundColor
　　　　　  var aName = nodeName.split("-");
　　　　　  var strProperty = aName[0];
　　　　　  for( var j = 1;j < aName.length;j ++ ) {
　　　　　　　  strProperty += aName[j].substring(0,1).toUpperCase() + aName[j].substr(1);
　　　　　  }
　　　　　  arrProperty[strProperty] = nodeText;
　　　  }
　  }
　  return arrProperty;
}

/**
*得到主菜单样式
*/
function getMainMenuStyle() {

　  //得到主菜单样式
　  m_strMainMenuStyle = getNodeStyle("//popmenu/style/main-menu/base");
　  //得到主菜单项样式
　  m_strMainMenuItemStyle = getNodeStyle("//popmenu/style/main-menu/menu-item/base");

　  //主菜单项的property
　  m_strMMItemProBase = getNodeProperty("//popmenu/style/main-menu/menu-item/base");

　  //得到鼠标悬停时主菜单项各property改变
　  m_strMMItemProMOver = getNodeProperty("//popmenu/style/main-menu/menu-item/mouse-over");

　  //得到菜单项与项之间的分割图片
　  if( m_doc.selectSingleNode("//popmenu/style/main-menu/menu-item/split-image") ) {
　　　  var node = m_doc.selectSingleNode("//popmenu/style/main-menu/menu-item/split-image");
　　　  m_strMMItemSplitImg = "background-image:" + node.text + ";";
　　　  m_strMMItemSplitImg += "background-repeat:no-repeat;background-position:center center;";
　  }
　　

}//end function getMainMenuStyle()

/**
*得到主菜单样式
*/
function getSubMenuStyle() {

　  //得到子菜单样式
　  m_strSubMenuStyle = getNodeStyle("//popmenu/style/sub-menu/base");
　  //得到子菜单项样式
　  m_strSubMenuItemStyle = getNodeStyle("//popmenu/style/sub-menu/menu-item/base");

　  //子菜单项的property
　  m_strSMItemProBase = getNodeProperty("//popmenu/style/sub-menu/menu-item/base");

　  //得到鼠标悬停时子菜单项各property改变
　  m_strSMItemProMOver = getNodeProperty("//popmenu/style/sub-menu/menu-item/mouse-over");

　  //得到子菜单项下边框样式(作为分割线)
　  if( m_doc.selectSingleNode("//popmenu/style/sub-menu/menu-item/split-line") ) {
　　　  var node = m_doc.selectSingleNode("//popmenu/style/sub-menu/menu-item/split-line");
　　　  m_strSMItemBorderB = "border-bottom:" + node.text + ";";
　  }

}//end function getSubMenuStyle()

var m_bolFirst = true;//是否首次响应菜单
document.onclick = function(){
　  m_bolFirst = true;
　  //alert(parent.frames[0]);
}
top.document.onclick = function(){
　  m_bolFirst = true;
}

/**
*展开各个主菜单
*@param objTd - 主菜单所在td
*@param strSubMenuID - 对应子菜单的id
*@param bolExistSubMenu - 是否存在子菜单
*/
function spreadMainMenu(objTd,strSubMenuID,bolExistSubMenu){

　  var strEvent = event.type.toLowerCase();

　  if( !pops[0].isOpen && strEvent == "mouSEOver" && m_bolFirst){
　　　  return;
　  }
　  if( pops[0].isOpen && strEvent == "click"){
　　　  return;
　  }
　  chgMainMenuStyle(objTd,true);
　  endHideSubMenu();
　  if( bolExistSubMenu ){
　　　  //如果有子菜单
　　　  showSubMenu1(objTd,strSubMenuID);
　  } else  {
　　　  //hideSubMenu();
　　　  //m_bolFirst = false;//已不是第一次响应菜单
　  }
}

//打印主菜单
function printMainMenu()
{
　  var divStyle = "width:100%;";
　  var strHtml = "";
　  strHtml = "<div style='" + divStyle + "'>";
　  strHtml += "<table style='"+m_strMainMenuStyle+"'  id='mm' cellpadding='3'><tr>";
　  //如果用户设置了分割图片则输出
　  if( m_strMMItemSplitImg && m_strMMItemSplitImg != "" ){
　　　  strHtml += "<td style='" + m_strMMItemSplitImg + "' width=2></td>";
　  }
　  var intMenuWidth = 0;
　　

　  for ( var i = 0 ; i< m_objMMList.length ; i ++ )
　  {
　　　  var menuNode = m_objMMList[i];
　　　  var attList = menuNode.attributes;
　　　  var menuText = attList.getNamedItem("text").text;
　　　  var menuHref = attList.getNamedItem("href").text;
　　　  var menuTarget = "";
　　　  if( attList.getNamedItem("target") )
　　　　　  menuTarget = attList.getNamedItem("target").text;
　　　  else
　　　　　  menuTarget = "_self";

　  var intMenuWidth;
　　　  if( attList.getNamedItem("width") )
　　　　　  intMenuWidth = attList.getNamedItem("width").text;
　　　　
　　　  var strSubMenuID = "sm" + i;
　　　  var strMouseOverEvent = "";
　　　  var strClickEvent = "";
　　　  //如果有子拉菜单，则显示
　　　  if ( menuNode.hasChildNodes() ){
　　　　　  strMouseOverEvent = "chgMainMenuStyle(this,true);spreadMainMenu(this,\"" + strSubMenuID + "\",true);";
　　　　　  strClickEvent = strMouseOverEvent;
　　　  }else{
　　　　　  strMouseOverEvent = "chgMainMenuStyle(this,true);";
　　　　　  strClickEvent = "onClickEvent('" + menuHref + "','" + menuTarget + "','" + menuText + "');";
　　　  }

　  strHtml += "<td  width=" + intMenuWidth + " style='" + m_strMainMenuItemStyle + "'  id=mm" + i +
　　　　　　　　　  " " +
　　　　　　　　　  " >" + menuText+"</td>";
　　　　
　　　  //如果用户设置了分割图片则输出
　　　  if( m_strMMItemSplitImg && m_strMMItemSplitImg != "" ){
　　　　　  strHtml += "<td style='" + m_strMMItemSplitImg + "' width='2'></td>";
　　　  }
　  }
　  strHtml += "<td></td>";
　  strHtml += "</tr>";
　  strHtml += "</table>";
　  strHtml += "</div>";

　  document.write(strHtml);
}//end printMainMenu()

//打印一级子菜单
function printSubMenu() {
　  for ( var i = 0 ; i< m_objMMList.length ; i ++ ) {
　　　  menuNode = m_objMMList[i];
　　　  //如果没有子菜单，执行下一个循环
　　　  if ( !menuNode.hasChildNodes() ){
　　　　　  continue;
　　　  }
　　　　
　　　  //得到主菜单下的子菜单集合
　　　  var objSMList = menuNode.childNodes;
　　　  var intSubMenuLen = objSMList.length;

　  //每个主菜单对应的子菜单id
　　　  var strSubMenuID = "sm" + i;
　　　　
　　　　
　　　  //arrMenuID.push(strSubMenuID);
　　　　
　　　  var strSubMenuHtml = "<div style='display:none;border:0;' id='" + strSubMenuID + "'>" +
　　　　　　　　　  " <table  cellspacing='0' cellpadding='4' style='" + m_strSubMenuStyle + "'>";

　  for ( var j = 0;j < intSubMenuLen;j ++ ) {
　　　　　  var objSubMenu = objSMList[j];
　　　　　  var attList = objSubMenu.attributes;
　　　　　  var menuText = attList.getNamedItem("text").text;
　　　　　  var menuHref = attList.getNamedItem("href").text;
　　　　　  var menuTarget = "";
　　　　　  if( attList.getNamedItem("target") )
　　　　　　　  menuTarget = attList.getNamedItem("target").text;
　　　　　  else
　　　　　　　  menuTarget = "_self";

　　　  //如果有三级子菜单，则需要箭头标识
　　　　　  var strRightRow = " ";
　　　　　  //二级子菜单id
　　　　　  var strSubMenu2ID = strSubMenuID + "_sm" + j;
　　　　　  //鼠标悬停和移出时一级子菜单的响应
　　　　　  var strMouseOverEvent = "parent.chgSubMenuStyle(this,true);parent.endHideSubMenu();";
　　　　　  var strMouseOutEvent = " parent.chgSubMenuStyle(this,false);parent.beginHideSubMenu();";
　　　　　　
　　　　　  //位置信息显示
　　　　　  var strPosition = STR_POS_FRONT +  m_objMMList[i].attributes.getNamedItem("text").text +  "->"
　　　　　　　　　　　　　  + menuText;
　　　　　  //alert(strPosition);
　　　　　  if ( objSubMenu.hasChildNodes() ) {
　　　　　　　  //打印其二级子菜单
　　　　　　　  printSubMenu2(objSubMenu,strSubMenu2ID,strPosition);
　　　　　　　　
　　　　　　　  strMouseOverEvent += "parent.showSubMenu2(\"" + strSubMenu2ID + "\",this);";
　　　　　　　  //strMouseOutEvent += "parent.beginHideSubMenu();";
　　　　　　　  strRightRow = "<font style='font-family:Webdings;font-size:7pt;height:10'>4</font>";
　　　　　　　  strPosition = "";
　　　　　  } else {
　　　　　　　  //strMouseOverEvent += "parent.endHideSubMenu();";
　　　　　　　  strMouseOverEvent += "parent.hideSubMenu2();";
　　　　　  }
　　　　　  var strOnClickEvent = "javascript:parent.onClickEvent('" + menuHref + "','" + menuTarget + "','" + strPosition + "');"
　　　　　  strSubMenuHtml += "<tr style='" + m_strSubMenuItemStyle + "' " +
　　　　　　　  " onmouseover='" + strMouseOverEvent + "' " +
　　　　　　　  " onmouseout='" + strMouseOutEvent + "' " +
　　　　　　　  " onclick= " + strOnClickEvent + " " +
　　　　　　　  " > <td width='3' nowrap style='" + m_strSMItemBorderB + "'> </td>"+
　　　　　　　  "　  <td nowrap style='" + m_strSMItemBorderB + "'>" + menuText + "</td>"+
　　　　　　　  "　  <td width='10' align='right' nowrap style='" + m_strSMItemBorderB + "'>" + strRightRow + "</td>" +
　　　　　　　  "</tr>";
　　　　　  //alert(objSubMenu.text.length);

　  }//end for 子菜单个数循环

　  strSubMenuHtml += "</table></div>";

　  document.write(strSubMenuHtml);

　　
　  }//end for 主菜单个数循环
}//end function printSubMenu()

/**打印二级子菜单
*objSubMenu : 一级子菜单对象
*strSubMenu2ID ：将要打印的二级菜单的id
*strPosition：主菜单和一级子菜单文本描述
*/
function printSubMenu2(objSubMenu,strSubMenu2ID,strPosition)
{
　  //arrMenuID.push(strSubMenu2ID);
　  var objSMList = objSubMenu.childNodes;
　  var intSubMenu2Len = objSMList.length;

　  var strSubMenu2Html = "<div style='display:none;border:0;'  id='" + strSubMenu2ID + "'>" +
　　　　　　　　　　　  " <table  cellspacing='0' cellpadding='4' style='" + m_strSubMenuStyle + "'>";
　　

　  for ( var i = 0; i< intSubMenu2Len;i ++ )
　  {
　　　  var objSubMenu2 = objSMList[i];
　　　  var attList = objSubMenu2.attributes;
　　　  var menuText = attList.getNamedItem("text").text;
　　　  var menuHref = attList.getNamedItem("href").text;

　  var menuTarget = "";
　　　  if( attList.getNamedItem("target") )
　　　　　  menuTarget = attList.getNamedItem("target").text;
　　　  else
　　　　　  menuTarget = "_self";

　  var strPostion2 = strPosition + "->" + menuText;
　　　　
　　　  strSubMenu2Html += "<tr style='" + m_strSubMenuItemStyle + "' " +
　　　　　　　　　  " onmouseover='parent.parent.chgSubMenuStyle(this,true);" +
　　　　　　　　　  " parent.parent.endHideSubMenu(); ' " +
　　　　　　　　　  " " +
　　　　　　　　　  " onclick=Javascript:parent.parent.onClickEvent('" + menuHref + "','" + menuTarget + "','" + strPostion2 + "'); " +
　　　　　　　　　  " > <td width='3' nowrap style='" + m_strSMItemBorderB + "'> </td>"+
　　　　　　　　　  "　  <td nowrap style='" + m_strSMItemBorderB + "'>" + menuText + "</td>"+
　　　　　　　　　  "　  <td width='3' nowrap style='" + m_strSMItemBorderB + "'> </td>" +
　　　　　　　　　  "</tr>";
　  }
　  strSubMenu2Html += "</table></div>";

　  document.write(strSubMenu2Html);
　　
}//end function printSubMenu2

/**
*打开链接，所有菜单的链接都是通过这个函数来打开。并显示位置信息
*@param strUrl - 打开链接的地址
*@param strTarget - 打开链接的target。如_self,_blank等　　　　
*@param strViewText - 位置信息
*/
function onClickEvent(strUrl,strTarget,strViewText)
{
　  m_bolFirst = true;//以后响应菜单时变为为第一次响应
　  //document.all.selected_menu.innerText = strViewText;
　　
　  m_strTitle = "";
　  var arrText = strViewText.split("->");
　  if ( arrText.length >0 )
　　　  m_strTitle = arrText[0];
　  for (var i = 1; i < arrText.length ; i ++ )
　  {
　　　  m_strTitle += "－" + arrText[i];
　  }
　  m_strTitle = m_strTitle.substring(STR_POS_FRONT.length);
　  //隐藏下拉菜单
　  hideSubMenu();
　  //显示title
　  if (m_strTitle != "")
　  {
　　　  //parent.document.title = m_strTitle;
　  }
　　
　  if ( strUrl == "#" )
　　　  return;

　  //如果url是一个javascript字符串则直接执行之
　  if(strUrl.toLowerCase().indexOf("javascript") != -1) {
　　　  executeScript(strUrl);
　　　  return;
　  }

　  strUrl = m_strContextPath + strUrl;//地址应加上虚拟目录

　  window.open(strUrl,strTarget);
}
//执行一个javascript字符串
function executeScript(strScript)
{
　  //第一个eval得到该字符串表示的变量，第二个eval则执行变量里的脚本
　  eval(strScript);
}

三、典型的xml配置
<?xml version="1.0" encoding="GB2312"?>

<popmenu>
　  <!--样式定义-->
　  <style>
　　　  <!--主菜单样式定义-->
　　　  <main-menu>
　　　　　  <!--基本样式，只要节点符合table style attribute即可-->
　　　　　  <base>
　　　　　　　  <background-color>#DDDDDD</background-color>
　　　　　　　  <background-image>url(menu_bg.jpg)</background-image>
　　　　　　　  <font-size>10pt</font-size>
　　　　　　　  <color>#000099</color>
　　　　　　　  <width>100%</width>
　　　　　　　  <height>32</height>
　　　　　　　  <text-align>center</text-align>
　　　　　　　  <cursor>default</cursor>
　　　　　  </base>
　　　　　  <!--菜单项的样式-->
　　　　　  <menu-item>
　　　　　　　  <!--基本样式，节点符合td style attribute即可，可选。鼠标移出时使用该样式-->
　　　　　　　  <base>
　　　　　　　　　  <background-color></background-color>
　　　　　　　　　  <color>#000099</color>
　　　　　　　  </base>
　　　　　　　  <!--鼠标悬停时的样式,节点符合td style attribute即可,可选-->
　　　　　　　  <mouse-over>
　　　　　　　　　  <background-color>white</background-color>
　　　　　　　　　  <border>1 solid #6699CC</border>
　　　　　　　　　  <color>green</color>
　　　　　　　  </mouse-over>
　　　　　　　  <!--菜单项与项之间的分割图片，可选-->
　　　　　　　  <split-image>url(menu_split.gif)</split-image>
　　　　　  </menu-item>
　　　  </main-menu>

　  <!--子菜单样式定义-->
　　　  <sub-menu>
　　　　　  <!--基本样式，只要节点符合table style attribute即可-->
　　　　　  <base>
　　　　　　　  <font-size>9pt</font-size>
　　　　　　　  <border>1 solid black</border>
　　　　　　　  <cursor>default</cursor>
　　　　　  </base>
　　　　　  <!--菜单项的样式-->
　　　　　  <menu-item>
　　　　　　　  <!--基本样式，节点符合tr style attribute即可，可选。鼠标移出时使用该样式-->
　　　　　　　  <base>
　　　　　　　　　  <background-color>white</background-color>
　　　　　　　　　  <color>#006699</color>
　　　　　　　  </base>
　　　　　　　  <!--鼠标悬停时的样式，节点符合tr style attribute即可，可选。-->
　　　　　　　  <mouse-over>
　　　　　　　　　  <background-color>#DDDDDD</background-color>
　　　　　　　　　  <color>#000066</color>
　　　　　　　  </mouse-over>
　　　　　　　  <!--菜单项与项之间的分割线，参数符合border样式即可。可选-->
　　　　　　　  <split-line>1 solid #999999</split-line>
　　　　　  </menu-item>
　　　  </sub-menu>
　  </style>

　  <!--
　　　  context path相当于虚拟目录的别名。如果菜单的链接使用绝对路径访问，则建议设置该节点。
　　　  如果设置该节点则菜单的链接地址由该值加上菜单项设置的href构成。
　　　  该节点是可选的
　  -->
　  <context>
　　　  <path></path>
　  </context>

　  <!--
　　　  菜单数据。
　　　  menus下的节点视为主菜单，只有主菜单设置的宽度值才有效
　　　  菜单必须有text,href两个属性，target为可选属性，默认值为"_self"
　　　　　  text - 菜单文本
　　　　　  href - 菜单链接地址。如果不需链接请用"#"；如果是执行某段javascript，请加上前缀javascript:
　　　　　  target - 菜单打开的窗口
　  -->
　  <menus>
　　　  <menu text="CSDN" href="#" target="_blank" width="60">
　　　　　  <menu text="网站首页" href="http://www.csdn.net" target="_blank">
　　　　　  </menu>
　　　　　  <menu text="服务" href="#">
　　　　　　　  <menu text="blog" href="http://blog.csdn.net/"></menu>
　　　　　　　  <menu text="技术社区" href="http://community.csdn.net/"></menu>
　　　　　　　  <menu text="帮助" href="javascript:help();"></menu>
　　　　　  </menu>
　　　  </menu>
　　　  <menu text="SOHU" href="http://www.sohu.com" target="_blank" width="60">
　　　  </menu>
　　　  <menu text="NCUCEC" href="http://www.infocespace.cn" target="_blank" width="60">
　　　　　  <menu text="公司网站" href="http://www.infospace.cn" target="_blank"></menu>
　　　　　  <menu text="内部论坛" href="http://www.infospace.cn/forums" target="_self"></menu>
　　　  </menu>
　  </menus>
</popmenu>

四、使用例子

<html>
<head>
<title>javascript+xml二级下拉菜单(使用window.createPopup())</title>

</head>
<body bgcolor="#cccccc">

<script language="javascript" src="menu_script1.js"></script>
<script language="javascript" src="menu_script2.js"></script>

<div>
　  <script language="javascript">loadMenu("menu_data.xml");</script>
</div>

</body>
</html>

只要节点名称符合各自标签(table,tr,td之一)的style attribute即可。

（3）主菜单项之间可以设置分割图片，
子菜单项可以设置分割线的样式。

（4）所有图片都由css控制，避免路径问题。

（5）可以设置虚拟目录的别名，为菜单链接使用绝对路径带来方便，如：

<context>
　  <path>hdsa</path>
</context>

设置该值后，用户只需根据文件的目录结构写好菜单，而不必担心虚拟目录的问题。

由于菜单使用了window.createPopup()，
所以它被限制在IE5.5以上，
而且子菜单如果是新开窗口，会被拦截。
注：用window.createPopup()制作菜单受到过前人的启发

设置该值后，用户只需根据文件的目录结构写好菜单，而不必担心虚拟目录的问题。

由于菜单使用了window.createPopup()，
所以它被限制在IE5.5以上，
而且子菜单如果是新开窗口，会被拦截。
注：用window.createPopup()制作菜单受到过前人的启发
=====================================================================

二、实现的两个脚本可以写在一个文件中：

（1）处理Popup窗口的脚本

//------------------ 下面一些函数用来处理弹出窗口  ------------------ //
var pops = new Array(); // 用来存储Popup窗口家族的数组
function CreatePopup(degree)
{
　  if (degree < 0)　  // 层数不能小于0
　　　  return null;
　  if (pops[degree] != null) //如果已经存在则不需创建
　　　  return pops[degree];

　  if (degree == 0)
　　　  pops[0] = window.createPopup(); //创建最顶层Popup窗口
　  else{
　　　  if (pops[degree - 1] == null)
　　　　　  pops[degree - 1] = CreatePopup(degree - 1)　  //递归回溯从第一层开始创建
　　　  pops[degree] = pops[degree - 1].document.parentWindow.createPopup(); //从父Popup窗口创建子Popup窗口
　  }
　  pops[degree].document.body.setAttribute("degree", degree);
　  return pops[degree];
}

CreatePopup(1); //创建一个2层的Popup家族

var oPopup = pops[0];
var timer = null;

/**
*显示一级子菜单
*@param objShow - 显示子菜单的对象
*@param strGetID - 存储显示内容的标签id
*/
function showSubMenu1(objShow,strGetID) {
　  clearTimer();
　  endHideSubMenu();
　  var objGet = eval(document.getElementById(strGetID));
　　
　  pops[1].hide();
　  pops[0].document.body.innerHTML = objGet.innerHTML;
　  pops[0].show(0,0,1,1,objShow);
　  var intWidth = pops[0].document.body.scrollWidth;
　  var intHeight = pops[0].document.body.scrollHeight;
　  pops[0].hide();
　  pops[0].show(10,objShow.offsetHeight-2,intWidth,intHeight,objShow);
}

/**
*显示二级菜单
*@param strGetID - 存储显示内容的标签id
*@param objTr - 显示子菜单的tr对象
*/
function showSubMenu2(strGetID,objTr) {
　  clearTimer();
　  endHideSubMenu();
　  var objGet = eval(document.getElementById(strGetID));
　  pops[1].document.body.innerHTML = objGet.innerHTML;
　  pops[1].show(0,0,1,1,pops[0].document.body);
　  var intWidth = pops[1].document.body.scrollWidth;
　  var intHeight = pops[1].document.body.scrollHeight;
　  pops[1].hide();
　  pops[1].show(objTr.offsetWidth - 2,-2, intWidth, intHeight, objTr);

}

//隐藏一级子菜单
function hideSubMenu1(){
　  //pops[0].hide();
　  window.setTimeout("pops[0].hide()", 1000);
}

//隐藏二级子菜单
function hideSubMenu2()
{
　  //clearTimer();
　  //timer = window.setTimeout("pops[1].hide()", 1000);
　  pops[1].hide();
}

//隐藏所有下拉菜单
function hideSubMenu()
{
　  if(pops[0] != null)pops[0].hide();
　  if(pops[1] != null)pops[1].hide();
}

function clearTimer()
{
　  if (timer != null)
　　　  window.clearTimeout(timer)
　  timer = null;
　  //alert("OK");
}

（2）读取分析xml数据文件，打印菜单的脚本

//位置信息
var m_strTitle = "您的位置->";

// -------- 主菜单样式相关定义 ---------//

//定义主菜单样式
var m_strMainMenuStyle = "";
//主菜单项的样式attribute
var m_strMainMenuItemStyle = "";
//主菜单项样式Property
var m_strMMItemProBase = {};
//主菜单项鼠标悬停样式Property
var m_strMMItemProMOver = {};
//菜单项与项之间的分割图片
var m_strMMItemSplitImg;

// -------- 子菜单样式相关定义 ---------//

//定义子菜单样式
var m_strSubMenuStyle = "";
//子菜单项的样式attribute
var m_strSubMenuItemStyle = "";
//子菜单项样式Property
var m_strSMItemProBase = {};
//子菜单项鼠标悬停样式Property
var m_strSMItemProMOver = {};
//子菜单项下边框样式(作为分割线)
var m_strSMItemBorderB = "";

//定义虚拟目录路径
var m_strContextPath = "";

//菜单xml数据文件对象
var m_doc;

//主菜单集合
var m_objMMList;

var STR_POS_FRONT = "您的位置：";

//loadMenu("main_menu.xml");
/**
*加载菜单
*@param strXMLPath - XML数据文件所在路径及文件名
*/
function loadMenu(strXMLFile) {
　  m_doc = new ActiveXObject("MSXML2.DOMDocument.3.0");
　  m_doc.async = false;
　  m_doc.load(strXMLFile);

　  getMainMenuStyle();
　  getSubMenuStyle();

　  //得到主菜单集合
　  m_objMMList = m_doc.selectSingleNode("//popmenu/menus").childNodes;

　  //得到虚拟目录
　  if( m_doc.selectSingleNode("//popmenu/context/path") ) {
　　　  m_strContextPath = m_doc.selectSingleNode("//popmenu/context/path").text;
　  }

　  //输出主菜单
　  printMainMenu();
　  //输出一级子菜单
　  printSubMenu();
　　
}

/**
*鼠标移入移出主菜单样式的改变
*@param obj - 改变样式的对象
*@param bolChg - 是否改变样式
*/
function chgMainMenuStyle(obj,bolChg)
{
　  if ( bolChg ) {//鼠标悬停改变颜色
　　　  for( var pro in m_strMMItemProMOver ) {
　　　　　  obj.style[pro] = m_strMMItemProMOver[pro];
　　　  }
　  } else {//鼠标移出
　　　  obj.style.border = "0";
　　　  for( var pro in m_strMMItemProBase ) {
　　　　　  obj.style[pro] = m_strMMItemProBase[pro];
　　　  }
　  }
}//end function chgMainMenuStyle(obj,i)

/**
*鼠标移入移出子菜单样式的改变
*@param obj - 改变样式的对象
*@param bolChg - 是否改变样式
*/
function chgSubMenuStyle(obj,bolChg) {
　  if ( bolChg ) {//鼠标悬停改变颜色
　　　  for( var pro in m_strSMItemProMOver ) {
　　　　　  obj.style[pro] = m_strSMItemProMOver[pro];
　　　  }
　  } else {//鼠标移出
　　　  for( var pro in m_strSMItemProBase ) {
　　　　　  obj.style[pro] = m_strSMItemProBase[pro];
　　　  }
　  }
}//end function chgSubMenuStyle(obj,i)

/**
*构造节点样式
*@param strPath 节点路径
*/
function getNodeStyle(strPath) {
　  var strStyle = "";
　  if( m_doc.selectSingleNode(strPath) ) {
　　　  var nodeList = m_doc.selectSingleNode(strPath).childNodes;
　　　  for( var i = 0;i < nodeList.length;i ++ ) {
　　　　　  var nodeName = nodeList[i].nodeName;
　　　　　  var nodeText = nodeList[i].text;
　　　　　  strStyle += nodeName.toLowerCase() + ":" + nodeText + ";";
　　　  }
　  }
　  return strStyle;
}
/**
*构造节点Style Property
*/
function getNodeProperty(strPath) {
　  var arrProperty = {};
　  if( m_doc.selectSingleNode(strPath) ) {
　　　  var nodeList = m_doc.selectSingleNode(strPath).childNodes;
　　　  for( var i = 0;i < nodeList.length;i ++ ) {
　　　　　  var nodeName = nodeList[i].nodeName;
　　　　　  nodeName = nodeName.toLowerCase();
　　　　　  var nodeText = nodeList[i].text;
　　　　　  //由attribute到property的转变。如background-color -> backgroundColor
　　　　　  var aName = nodeName.split("-");
　　　　　  var strProperty = aName[0];
　　　　　  for( var j = 1;j < aName.length;j ++ ) {
　　　　　　　  strProperty += aName[j].substring(0,1).toUpperCase() + aName[j].substr(1);
　　　　　  }
　　　　　  arrProperty[strProperty] = nodeText;
　　　  }
　  }
　  return arrProperty;
}

/**
*得到主菜单样式
*/
function getMainMenuStyle() {

　  //得到主菜单样式
　  m_strMainMenuStyle = getNodeStyle("//popmenu/style/main-menu/base");
　  //得到主菜单项样式
　  m_strMainMenuItemStyle = getNodeStyle("//popmenu/style/main-menu/menu-item/base");

　  //主菜单项的property
　  m_strMMItemProBase = getNodeProperty("//popmenu/style/main-menu/menu-item/base");

　  //得到鼠标悬停时主菜单项各property改变
　  m_strMMItemProMOver = getNodeProperty("//popmenu/style/main-menu/menu-item/mouse-over");

　  //得到菜单项与项之间的分割图片
　  if( m_doc.selectSingleNode("//popmenu/style/main-menu/menu-item/split-image") ) {
　　　  var node = m_doc.selectSingleNode("//popmenu/style/main-menu/menu-item/split-image");
　　　  m_strMMItemSplitImg = "background-image:" + node.text + ";";
　　　  m_strMMItemSplitImg += "background-repeat:no-repeat;background-position:center center;";
　  }
　　

}//end function getMainMenuStyle()

/**
*得到主菜单样式
*/
function getSubMenuStyle() {

　  //得到子菜单样式
　  m_strSubMenuStyle = getNodeStyle("//popmenu/style/sub-menu/base");
　  //得到子菜单项样式
　  m_strSubMenuItemStyle = getNodeStyle("//popmenu/style/sub-menu/menu-item/base");

　  //子菜单项的property
　  m_strSMItemProBase = getNodeProperty("//popmenu/style/sub-menu/menu-item/base");

　  //得到鼠标悬停时子菜单项各property改变
　  m_strSMItemProMOver = getNodeProperty("//popmenu/style/sub-menu/menu-item/mouse-over");

　  //得到子菜单项下边框样式(作为分割线)
　  if( m_doc.selectSingleNode("//popmenu/style/sub-menu/menu-item/split-line") ) {
　　　  var node = m_doc.selectSingleNode("//popmenu/style/sub-menu/menu-item/split-line");
　　　  m_strSMItemBorderB = "border-bottom:" + node.text + ";";
　  }

}//end function getSubMenuStyle()

var m_bolFirst = true;//是否首次响应菜单
document.onclick = function(){
　  m_bolFirst = true;
　  //alert(parent.frames[0]);
}
top.document.onclick = function(){
　  m_bolFirst = true;
}

/**
*展开各个主菜单
*@param objTd - 主菜单所在td
*@param strSubMenuID - 对应子菜单的id
*@param bolExistSubMenu - 是否存在子菜单
*/
function spreadMainMenu(objTd,strSubMenuID,bolExistSubMenu){

　  var strEvent = event.type.toLowerCase();

　  if( !pops[0].isOpen && strEvent == "mouseover" && m_bolFirst){
　　　  return;
　  }
　  if( pops[0].isOpen && strEvent == "click"){
　　　  return;
　  }
　  chgMainMenuStyle(objTd,true);
　  endHideSubMenu();
　  if( bolExistSubMenu ){
　　　  //如果有子菜单
　　　  showSubMenu1(objTd,strSubMenuID);
　  } else  {
　　　  //hideSubMenu();
　　　  //m_bolFirst = false;//已不是第一次响应菜单
　  }
}

//打印主菜单
function printMainMenu()
{
　  var divStyle = "width:100%;";
　  var strHtml = "";
　  strHtml = "<div style='" + divStyle + "'>";
　  strHtml += "<table style='"+m_strMainMenuStyle+"'  id='mm' cellpadding='3'><tr>";
　  //如果用户设置了分割图片则输出
　  if( m_strMMItemSplitImg && m_strMMItemSplitImg != "" ){
　　　  strHtml += "<td style='" + m_strMMItemSplitImg + "' width=2></td>";
　  }
　  var intMenuWidth = 0;
　　

　  for ( var i = 0 ; i< m_objMMList.length ; i ++ )
　  {
　　　  var menuNode = m_objMMList[i];
　　　  var attList = menuNode.attributes;
　　　  var menuText = attList.getNamedItem("text").text;
　　　  var menuHref = attList.getNamedItem("href").text;
　　　  var menuTarget = "";
　　　  if( attList.getNamedItem("target") )
　　　　　  menuTarget = attList.getNamedItem("target").text;
　　　  else
　　　　　  menuTarget = "_self";

　  var intMenuWidth;
　　　  if( attList.getNamedItem("width") )
　　　　　  intMenuWidth = attList.getNamedItem("width").text;
　　　　
　　　  var strSubMenuID = "sm" + i;
　　　  var strMouseOverEvent = "";
　　　  var strClickEvent = "";
　　　  //如果有子拉菜单，则显示
　　　  if ( menuNode.hasChildNodes() ){
　　　　　  strMouseOverEvent = "chgMainMenuStyle(this,true);spreadMainMenu(this,\"" + strSubMenuID + "\",true);";
　　　　　  strClickEvent = strMouseOverEvent;
　　　  }else{
　　　　　  strMouseOverEvent = "chgMainMenuStyle(this,true);";
　　　　　  strClickEvent = "onClickEvent('" + menuHref + "','" + menuTarget + "','" + menuText + "');";
　　　  }

　  strHtml += "<td  width=" + intMenuWidth + " style='" + m_strMainMenuItemStyle + "'  id=mm" + i +
　　　　　　　　　  " " +
　　　　　　　　　  " >" + menuText+"</td>";
　　　　
　　　  //如果用户设置了分割图片则输出
　　　  if( m_strMMItemSplitImg && m_strMMItemSplitImg != "" ){
　　　　　  strHtml += "<td style='" + m_strMMItemSplitImg + "' width='2'></td>";
　　　  }
　  }
　  strHtml += "<td></td>";
　  strHtml += "</tr>";
　  strHtml += "</table>";
　  strHtml += "</div>";

　  document.write(strHtml);
}//end printMainMenu()

//打印一级子菜单
function printSubMenu() {
　  for ( var i = 0 ; i< m_objMMList.length ; i ++ ) {
　　　  menuNode = m_objMMList[i];
　　　  //如果没有子菜单，执行下一个循环
　　　  if ( !menuNode.hasChildNodes() ){
　　　　　  continue;
　　　  }
　　　　
　　　  //得到主菜单下的子菜单集合
　　　  var objSMList = menuNode.childNodes;
　　　  var intSubMenuLen = objSMList.length;

　  //每个主菜单对应的子菜单id
　　　  var strSubMenuID = "sm" + i;
　　　　
　　　　
　　　  //arrMenuID.push(strSubMenuID);
　　　　
　　　  var strSubMenuHtml = "<div style='display:none;border:0;' id='" + strSubMenuID + "'>" +
　　　　　　　　　  " <table  cellspacing='0' cellpadding='4' style='" + m_strSubMenuStyle + "'>";

　  for ( var j = 0;j < intSubMenuLen;j ++ ) {
　　　　　  var objSubMenu = objSMList[j];
　　　　　  var attList = objSubMenu.attributes;
　　　　　  var menuText = attList.getNamedItem("text").text;
　　　　　  var menuHref = attList.getNamedItem("href").text;
　　　　　  var menuTarget = "";
　　　　　  if( attList.getNamedItem("target") )
　　　　　　　  menuTarget = attList.getNamedItem("target").text;
　　　　　  else
　　　　　　　  menuTarget = "_self";

　　　  //如果有三级子菜单，则需要箭头标识
　　　　　  var strRightRow = " ";
　　　　　  //二级子菜单id
　　　　　  var strSubMenu2ID = strSubMenuID + "_sm" + j;
　　　　　  //鼠标悬停和移出时一级子菜单的响应
　　　　　  var strMouseOverEvent = "parent.chgSubMenuStyle(this,true);parent.endHideSubMenu();";
　　　　　  var strMouseOutEvent = " parent.chgSubMenuStyle(this,false);parent.beginHideSubMenu();";
　　　　　　
　　　　　  //位置信息显示
　　　　　  var strPosition = STR_POS_FRONT +  m_objMMList[i].attributes.getNamedItem("text").text +  "->"
　　　　　　　　　　　　　  + menuText;
　　　　　  //alert(strPosition);
　　　　　  if ( objSubMenu.hasChildNodes() ) {
　　　　　　　  //打印其二级子菜单
　　　　　　　  printSubMenu2(objSubMenu,strSubMenu2ID,strPosition);
　　　　　　　　
　　　　　　　  strMouseOverEvent += "parent.showSubMenu2(\"" + strSubMenu2ID + "\",this);";
　　　　　　　  //strMouseOutEvent += "parent.beginHideSubMenu();";
　　　　　　　  strRightRow = "<font style='font-family:Webdings;font-size:7pt;height:10'>4</font>";
　　　　　　　  strPosition = "";
　　　　　  } else {
　　　　　　　  //strMouseOverEvent += "parent.endHideSubMenu();";
　　　　　　　  strMouseOverEvent += "parent.hideSubMenu2();";
　　　　　  }
　　　　　  var strOnClickEvent = "javascript:parent.onClickEvent('" + menuHref + "','" + menuTarget + "','" + strPosition + "');"
　　　　　  strSubMenuHtml += "<tr style='" + m_strSubMenuItemStyle + "' " +
　　　　　　　  " onmouseover='" + strMouseOverEvent + "' " +
　　　　　　　  " onmouseout='" + strMouseOutEvent + "' " +
　　　　　　　  " onclick= " + strOnClickEvent + " " +
　　　　　　　  " > <td width='3' nowrap style='" + m_strSMItemBorderB + "'> </td>"+
　　　　　　　  "　  <td nowrap style='" + m_strSMItemBorderB + "'>" + menuText + "</td>"+
　　　　　　　  "　  <td width='10' align='right' nowrap style='" + m_strSMItemBorderB + "'>" + strRightRow + "</td>" +
　　　　　　　  "</tr>";
　　　　　  //alert(objSubMenu.text.length);

　  }//end for 子菜单个数循环

　  strSubMenuHtml += "</table></div>";

　  document.write(strSubMenuHtml);

　　
　  }//end for 主菜单个数循环
}//end function printSubMenu()

/**打印二级子菜单
*objSubMenu : 一级子菜单对象
*strSubMenu2ID ：将要打印的二级菜单的id
*strPosition：主菜单和一级子菜单文本描述
*/
function printSubMenu2(objSubMenu,strSubMenu2ID,strPosition)
{
　  //arrMenuID.push(strSubMenu2ID);
　  var objSMList = objSubMenu.childNodes;
　  var intSubMenu2Len = objSMList.length;

　  var strSubMenu2Html = "<div style='display:none;border:0;'  id='" + strSubMenu2ID + "'>" +
　　　　　　　　　　　  " <table  cellspacing='0' cellpadding='4' style='" + m_strSubMenuStyle + "'>";
　　

　  for ( var i = 0; i< intSubMenu2Len;i ++ )
　  {
　　　  var objSubMenu2 = objSMList[i];
　　　  var attList = objSubMenu2.attributes;
　　　  var menuText = attList.getNamedItem("text").text;
　　　  var menuHref = attList.getNamedItem("href").text;

　  var menuTarget = "";
　　　  if( attList.getNamedItem("target") )
　　　　　  menuTarget = attList.getNamedItem("target").text;
　　　  else
　　　　　  menuTarget = "_self";

　  var strPostion2 = strPosition + "->" + menuText;
　　　　
　　　  strSubMenu2Html += "<tr style='" + m_strSubMenuItemStyle + "' " +
　　　　　　　　　  " onmouseover='parent.parent.chgSubMenuStyle(this,true);" +
　　　　　　　　　  " parent.parent.endHideSubMenu(); ' " +
　　　　　　　　　  " " +
　　　　　　　　　  " onclick=javascript:parent.parent.onClickEvent('" + menuHref + "','" + menuTarget + "','" + strPostion2 + "'); " +
　　　　　　　　　  " > <td width='3' nowrap style='" + m_strSMItemBorderB + "'> </td>"+
　　　　　　　　　  "　  <td nowrap style='" + m_strSMItemBorderB + "'>" + menuText + "</td>"+
　　　　　　　　　  "　  <td width='3' nowrap style='" + m_strSMItemBorderB + "'> </td>" +
　　　　　　　　　  "</tr>";
　  }
　  strSubMenu2Html += "</table></div>";

　  document.write(strSubMenu2Html);
　　
}//end function printSubMenu2

/**
*打开链接，所有菜单的链接都是通过这个函数来打开。并显示位置信息
*@param strUrl - 打开链接的地址
*@param strTarget - 打开链接的target。如_self,_blank等　　　　
*@param strViewText - 位置信息
*/
function onClickEvent(strUrl,strTarget,strViewText)
{
　  m_bolFirst = true;//以后响应菜单时变为为第一次响应
　  //document.all.selected_menu.innerText = strViewText;
　　
　  m_strTitle = "";
　  var arrText = strViewText.split("->");
　  if ( arrText.length >0 )
　　　  m_strTitle = arrText[0];
　  for (var i = 1; i < arrText.length ; i ++ )
　  {
　　　  m_strTitle += "－" + arrText[i];
　  }
　  m_strTitle = m_strTitle.substring(STR_POS_FRONT.length);
　  //隐藏下拉菜单
　  hideSubMenu();
　  //显示title
　  if (m_strTitle != "")
　  {
　　　  //parent.document.title = m_strTitle;
　  }
　　
　  if ( strUrl == "#" )
　　　  return;

　  //如果url是一个javascript字符串则直接执行之
　  if(strUrl.toLowerCase().indexOf("javascript") != -1) {
　　　  executeScript(strUrl);
　　　  return;
　  }

　  strUrl = m_strContextPath + strUrl;//地址应加上虚拟目录

　  window.open(strUrl,strTarget);
}
//执行一个javascript字符串
function executeScript(strScript)
{
　  //第一个eval得到该字符串表示的变量，第二个eval则执行变量里的脚本
　  eval(strScript);
}

三、典型的xml配置
<?xml version="1.0" encoding="GB2312"?>

<popmenu>
　  <!--样式定义-->
　  <style>
　　　  <!--主菜单样式定义-->
　　　  <main-menu>
　　　　　  <!--基本样式，只要节点符合table style attribute即可-->
　　　　　  <base>
　　　　　　　  <background-color>#DDDDDD</background-color>
　　　　　　　  <background-image>url(menu_bg.jpg)</background-image>
　　　　　　　  <font-size>10pt</font-size>
　　　　　　　  <color>#000099</color>
　　　　　　　  <width>100%</width>
　　　　　　　  <height>32</height>
　　　　　　　  <text-align>center</text-align>
　　　　　　　  <cursor>default</cursor>
　　　　　  </base>
　　　　　  <!--菜单项的样式-->
　　　　　  <menu-item>
　　　　　　　  <!--基本样式，节点符合td style attribute即可，可选。鼠标移出时使用该样式-->
　　　　　　　  <base>
　　　　　　　　　  <background-color></background-color>
　　　　　　　　　  <color>#000099</color>
　　　　　　　  </base>
　　　　　　　  <!--鼠标悬停时的样式,节点符合td style attribute即可,可选-->
　　　　　　　  <mouse-over>
　　　　　　　　　  <background-color>white</background-color>
　　　　　　　　　  <border>1 solid #6699CC</border>
　　　　　　　　　  <color>green</color>
　　　　　　　  </mouse-over>
　　　　　　　  <!--菜单项与项之间的分割图片，可选-->
　　　　　　　  <split-image>url(menu_split.gif)</split-image>
　　　　　  </menu-item>
　　　  </main-menu>

　  <!--子菜单样式定义-->
　　　  <sub-menu>
　　　　　  <!--基本样式，只要节点符合table style attribute即可-->
　　　　　  <base>
　　　　　　　  <font-size>9pt</font-size>
　　　　　　　  <border>1 solid black</border>
　　　　　　　  <cursor>default</cursor>
　　　　　  </base>
　　　　　  <!--菜单项的样式-->
　　　　　  <menu-item>
　　　　　　　  <!--基本样式，节点符合tr style attribute即可，可选。鼠标移出时使用该样式-->
　　　　　　　  <base>
　　　　　　　　　  <background-color>white</background-color>
　　　　　　　　　  <color>#006699</color>
　　　　　　　  </base>
　　　　　　　  <!--鼠标悬停时的样式，节点符合tr style attribute即可，可选。-->
　　　　　　　  <mouse-over>
　　　　　　　　　  <background-color>#DDDDDD</background-color>
　　　　　　　　　  <color>#000066</color>
　　　　　　　  </mouse-over>
　　　　　　　  <!--菜单项与项之间的分割线，参数符合border样式即可。可选-->
　　　　　　　  <split-line>1 solid #999999</split-line>
　　　　　  </menu-item>
　　　  </sub-menu>
　  </style>

　  <!--
　　　  context path相当于虚拟目录的别名。如果菜单的链接使用绝对路径访问，则建议设置该节点。
　　　  如果设置该节点则菜单的链接地址由该值加上菜单项设置的href构成。
　　　  该节点是可选的
　  -->
　  <context>
　　　  <path></path>
　  </context>

　  <!--
　　　  菜单数据。
　　　  menus下的节点视为主菜单，只有主菜单设置的宽度值才有效
　　　  菜单必须有text,href两个属性，target为可选属性，默认值为"_self"
　　　　　  text - 菜单文本
　　　　　  href - 菜单链接地址。如果不需链接请用"#"；如果是执行某段javascript，请加上前缀javascript:
　　　　　  target - 菜单打开的窗口
　  -->
　  <menus>
　　　  <menu text="CSDN" href="#" target="_blank" width="60">
　　　　　  <menu text="网站首页" href="http://www.csdn.net" target="_blank">
　　　　　  </menu>
　　　　　  <menu text="服务" href="#">
　　　　　　　  <menu text="blog" href="http://blog.csdn.net/"></menu>
　　　　　　　  <menu text="技术社区" href="http://community.csdn.net/"></menu>
　　　　　　　  <menu text="帮助" href="javascript:help();"></menu>
　　　　　  </menu>
　　　  </menu>
　　　  <menu text="SOHU" href="http://www.sohu.com" target="_blank" width="60">
　　　  </menu>
　　　  <menu text="NCUCEC" href="http://www.infocespace.cn" target="_blank" width="60">
　　　　　  <menu text="公司网站" href="http://www.infospace.cn" target="_blank"></menu>
　　　　　  <menu text="内部论坛" href="http://www.infospace.cn/forums" target="_self"></menu>
　　　  </menu>
　  </menus>
</popmenu>

四、使用例子

<html>
<head>
<title>javascript+xml二级下拉菜单(使用window.createPopup())</title>

</head>
<body bgcolor="#cccccc">

<script language="javascript" src="menu_script1.js"></script>
<script language="javascript" src="menu_script2.js"></script>

<div>
　  <script language="javascript">loadMenu("menu_data.xml");</script>
</div>

</body>
</html>