javascript+xml實現二級下拉菜單，不會被任何標簽或元素遮住

2024-04-27 13:55:01

字體：大中小

來源：轉載

供稿：網友

一、簡單說明

該菜單最大的優點是可以跨過網頁上任何標簽，甚至是框架，
（一般的菜單會被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）可以設置虛擬目錄的別名，為菜單鏈接使用絕對路徑帶來方便，如：

設置該值后，用戶只需根據文件的目錄結構寫好菜單，而不必擔心虛擬目錄的問題。

由于菜單使用了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("http://popmenu/menus").childNodes;

    //得到虛擬目錄
    if( m_doc.selectSingleNode("http://popmenu/context/path") ) {
        m_strContextPath = m_doc.selectSingleNode("http://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("http://popmenu/style/main-menu/base");
    //得到主菜單項樣式
    m_strMainMenuItemStyle = getNodeStyle("http://popmenu/style/main-menu/menu-item/base");

//主菜單項的property
m_strMMItemProBase = getNodeProperty("http://popmenu/style/main-menu/menu-item/base");

//得到鼠標懸停時主菜單項各property改變
m_strMMItemProMOver = getNodeProperty("http://popmenu/style/main-menu/menu-item/mouse-over");

    //得到菜單項與項之間的分割圖片
    if( m_doc.selectSingleNode("http://popmenu/style/main-menu/menu-item/split-image") ) {
        var node = m_doc.selectSingleNode("http://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("http://popmenu/style/sub-menu/base");
    //得到子菜單項樣式
    m_strSubMenuItemStyle = getNodeStyle("http://popmenu/style/sub-menu/menu-item/base");

//子菜單項的property
m_strSMItemProBase = getNodeProperty("http://popmenu/style/sub-menu/menu-item/base");

//得到鼠標懸停時子菜單項各property改變
m_strSMItemProMOver = getNodeProperty("http://popmenu/style/sub-menu/menu-item/mouse-over");

    //得到子菜單項下邊框樣式(作為分割線)
    if( m_doc.selectSingleNode("http://popmenu/style/sub-menu/menu-item/split-line") ) {
        var node = m_doc.selectSingleNode("http://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 +
                    " onmouseover=" + strMouseOverEvent +
                    " onmouseout='chgMainMenuStyle(this,false);beginHideSubMenu();' " +
                    " onclick=" + strClickEvent +
                    " >" + 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 = "&nbsp";
            //二級子菜單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 = "javascr            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(); ' " +
                    " onmouseout='parent.parent.chgSubMenuStyle(this,false);parent.parent.beginHideSubMenu();' " +
                    " 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>
            
            <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>
                
                <base>
                    <background-color></background-color>
                    <color>#000099</color>
                </base>
                
                <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>
            
            <base>
                <font-size>9pt</font-size>
                <border>1 solid black</border>
                <cursor>default</cursor>
            </base>
            
            <menu-item>
                
                <base>
                    <background-color>white</background-color>
                    <color>#006699</color>
                </base>
                
                <mouse-over>
                    <background-color>#DDDDDD</background-color>
                    <color>#000066</color>
                </mouse-over>
                
                <split-line>1 solid #999999</split-line>
            </menu-item>
        </sub-menu>
    </style>

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

<menus>
        <menu text="CSDN" href="#" target="_blank" width="60">
            <menu text="網站首頁" href="            </menu>
            <menu text="服務" href="#">
                <menu text="blog" href=">
                <menu text="技術社區" href=">
                <menu text="幫助" href="javascript:help();"></menu>
            </menu>
        </menu>
        <menu text="SOHU" href="        </menu>
        <menu text="NCUCEC" href="            <menu text="公司網站" href="            <menu text="內部論壇" href="        </menu>
    </menus>
</popmenu>

四、使用例子

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

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

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

</body>
</html>

只要節點名稱符合各自標簽(table,tr,td之一)的style attribute即可。

（3）主菜單項之間可以設置分割圖片，
子菜單項可以設置分割線的樣式。

（4）所有圖片都由css控制，避免路徑問題。

（5）可以設置虛擬目錄的別名，為菜單鏈接使用絕對路徑帶來方便，如：

設置該值后，用戶只需根據文件的目錄結構寫好菜單，而不必擔心虛擬目錄的問題。

二、實現的兩個腳本可以寫在一個文件中：

（1）處理Popup窗口的腳本

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);
}

}

//隱藏一級子菜單
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_strContextPath = "";

//菜單xml數據文件對象
var m_doc;

//主菜單集合
var m_objMMList;

var STR_POS_FRONT = "您的位置：";

getMainMenuStyle();
getSubMenuStyle();

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

    //得到虛擬目錄
    if( m_doc.selectSingleNode("http://popmenu/context/path") ) {
        m_strContextPath = m_doc.selectSingleNode("http://popmenu/context/path").text;
    }

    //輸出主菜單
    printMainMenu();
    //輸出一級子菜單
    printSubMenu();

}

/**
*得到主菜單樣式
*/
function getMainMenuStyle() {

//主菜單項的property
m_strMMItemProBase = getNodeProperty("http://popmenu/style/main-menu/menu-item/base");

//得到鼠標懸停時主菜單項各property改變
m_strMMItemProMOver = getNodeProperty("http://popmenu/style/main-menu/menu-item/mouse-over");

}//end function getMainMenuStyle()

/**
*得到主菜單樣式
*/
function getSubMenuStyle() {

//子菜單項的property
m_strSMItemProBase = getNodeProperty("http://popmenu/style/sub-menu/menu-item/base");

//得到鼠標懸停時子菜單項各property改變
m_strSMItemProMOver = getNodeProperty("http://popmenu/style/sub-menu/menu-item/mouse-over");

}//end function getSubMenuStyle()

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

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;//已不是第一次響應菜單
    }
}

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

            //如果有三級子菜單，則需要箭頭標識
            var strRightRow = "&nbsp";
            //二級子菜單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()

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

        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(); ' " +
                    " onmouseout='parent.parent.chgSubMenuStyle(this,false);parent.parent.beginHideSubMenu();' " +
                    " 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

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

strUrl = m_strContextPath + strUrl;//地址應加上虛擬目錄

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

<sub-menu>
            
            <base>
                <font-size>9pt</font-size>
                <border>1 solid black</border>
                <cursor>default</cursor>
            </base>
            
            <menu-item>
                
                <base>
                    <background-color>white</background-color>
                    <color>#006699</color>
                </base>
                
                <mouse-over>
                    <background-color>#DDDDDD</background-color>
                    <color>#000066</color>
                </mouse-over>
                
                <split-line>1 solid #999999</split-line>
            </menu-item>
        </sub-menu>
    </style>