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

一、简单说明

该菜单最大的优点是可以跨过网页上任何标签，甚至是框架，
（一般的菜单会被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();
    
}