欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

打開(kāi)APP
userphoto
未登錄

開(kāi)通VIP,暢享免費電子書(shū)等14項超值服

開(kāi)通VIP
javascript+xml實(shí)現二級下拉菜單,不會(huì )被任何標簽或元素遮住
 一、簡(jiǎn)單說(shuō)明

該菜單最大的優(yōu)點(diǎn)是可以跨過(guò)網(wǎng)頁(yè)上任何標簽,甚至是框架,
(一般的菜單會(huì )被select,object,flash等擋?。?br>所以如果你有這方面的需要,
那么這個(gè)菜單是個(gè)很好的選擇。

總體而言,它有如下特性:
(1)菜單的樣式和數據都是通過(guò)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
>

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

(3)主菜單項之間可以設置分割圖片,
子菜單項可以設置分割線(xiàn)的樣式。

(4)所有圖片都由css控制,避免路徑問(wèn)題。

(5)可以設置虛擬目錄的別名,為菜單鏈接使用絕對路徑帶來(lái)方便,如:

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


設置該值后,用戶(hù)只需根據文件的目錄結構寫(xiě)好菜單,而不必擔心虛擬目錄的問(wèn)題。

由于菜單使用了window.createPopup(),
所以它被限制在IE5.5以上,
而且子菜單如果是新開(kāi)窗口,會(huì )被攔截。
注:用window.createPopup()制作菜單受到過(guò)前人的啟發(fā)

設置該值后,用戶(hù)只需根據文件的目錄結構寫(xiě)好菜單,而不必擔心虛擬目錄的問(wèn)題。

由于菜單使用了window.createPopup(),
所以它被限制在IE5.5以上,
而且子菜單如果是新開(kāi)窗口,會(huì )被攔截。
注:用window.createPopup()制作菜單受到過(guò)前人的啟發(fā)

=====================================================================

二、實(shí)現的兩個(gè)腳本可以寫(xiě)在一個(gè)文件中:

(1)處理Popup窗口的腳本

//------------------ 下面一些函數用來(lái)處理彈出窗口  ------------------ //
var pops = new Array();
// 用來(lái)存儲Popup窗口家族的數組
function CreatePopup(degree
)
{
    if (
degree < 0)    
// 層數不能小于0
        
return null
;
    if (
pops[degree] != null)
//如果已經(jīng)存在則不需創(chuàng )建
        
return pops[degree
];

    if (
degree == 0
)
        
pops[0] = window.createPopup();
//創(chuàng )建最頂層Popup窗口
    
else{
        if (
pops[degree - 1] == null
)
            
pops[degree - 1] = CreatePopup(degree - 1)    
//遞歸回溯從第一層開(kāi)始創(chuàng )建
        
pops[degree] = pops[degree - 1].document.parentWindow.createPopup();
//從父Popup窗口創(chuàng )建子Popup窗口
    
}
    
pops[degree].document.body.setAttribute("degree", degree
);
    return
pops[degree
];
}

CreatePopup(1);
//創(chuàng )建一個(gè)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 = "您的位置->"
;

// -------- 主菜單樣式相關(guān)定義 ---------//

//定義主菜單樣式
var m_strMainMenuStyle = ""
;
//主菜單項的樣式attribute
var m_strMainMenuItemStyle = ""
;
//主菜單項樣式Property
var m_strMMItemProBase
= {};
//主菜單項鼠標懸停樣式Property
var m_strMMItemProMOver
= {};
//菜單項與項之間的分割圖片
var m_strMMItemSplitImg
;

// -------- 子菜單樣式相關(guān)定義 ---------//

//定義子菜單樣式
var m_strSubMenuStyle = ""
;
//子菜單項的樣式attribute
var m_strSubMenuItemStyle = ""
;
//子菜單項樣式Property
var m_strSMItemProBase
= {};
//子菜單項鼠標懸停樣式Property
var m_strSMItemProMOver
= {};
//子菜單項下邊框樣式(作為分割線(xiàn))
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)


/**
*構造節點(diǎn)樣式
*@param strPath 節點(diǎn)路徑
*/
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
;
}
/**
*構造節點(diǎn)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"
);

    
//得到鼠標懸停時(shí)主菜單項各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"
);

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

    
//得到子菜單項下邊框樣式(作為分割線(xiàn))
    
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
;
}

/**
*展開(kāi)各個(gè)主菜單
*@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>"
;
    
//如果用戶(hù)設置了分割圖片則輸出
    
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>"
;
        
        
//如果用戶(hù)設置了分割圖片則輸出
        
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
];
        
//如果沒(méi)有子菜單,執行下一個(gè)循環(huán)
        
if ( !menuNode.hasChildNodes
() ){
            continue;
        }
        
        
//得到主菜單下的子菜單集合
        
var objSMList = menuNode.childNodes
;
        var
intSubMenuLen = objSMList.length
;

        
//每個(gè)主菜單對應的子菜單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
;
            
//鼠標懸停和移出時(shí)一級子菜單的響應
            
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 子菜單個(gè)數循環(huán)

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

        
document.write(strSubMenuHtml
);

        
    }
//end for 主菜單個(gè)數循環(huán)
}
//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



/**
*打開(kāi)鏈接,所有菜單的鏈接都是通過(guò)這個(gè)函數來(lái)打開(kāi)。并顯示位置信息
*@param strUrl - 打開(kāi)鏈接的地址
*@param strTarget - 打開(kāi)鏈接的target。如_self,_blank等        
*@param strViewText - 位置信息
*/
function onClickEvent(strUrl,strTarget,strViewText
)
{
    
m_bolFirst = true;
//以后響應菜單時(shí)變?yōu)闉榈谝淮雾憫?
    //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是一個(gè)javascript字符串則直接執行之
    
if(strUrl.toLowerCase().indexOf("javascript") != -1
) {
        
executeScript(strUrl
);
        return;
    }

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

    
window.open(strUrl,strTarget
);
}
//執行一個(gè)javascript字符串
function executeScript(strScript
)
{
    
//第一個(gè)eval得到該字符串表示的變量,第二個(gè)eval則執行變量里的腳本
    
eval(strScript
);
}

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

<popmenu>
    <!--樣式定義-->
    <style>
        <!--主菜單樣式定義-->
        <main-menu>
            <!--基本樣式,只要節點(diǎn)符合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>
                <!--基本樣式,節點(diǎn)符合td style attribute即可,可選。鼠標移出時(shí)使用該樣式-->
                <base>
                    <background-color></background-color>
                    <color>#000099</color>
                </base>
                <!--鼠標懸停時(shí)的樣式,節點(diǎn)符合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>
            <!--基本樣式,只要節點(diǎn)符合table style attribute即可-->
            <base>
                <font-size>9pt</font-size>
                <border>1 solid black</border>
                <cursor>default</cursor>
            </base>
            <!--菜單項的樣式-->
            <menu-item>
                <!--基本樣式,節點(diǎn)符合tr style attribute即可,可選。鼠標移出時(shí)使用該樣式-->
                <base>
                    <background-color>white</background-color>
                    <color>#006699</color>
                </base>
                <!--鼠標懸停時(shí)的樣式,節點(diǎn)符合tr style attribute即可,可選。-->
                <mouse-over>
                    <background-color>#DDDDDD</background-color>
                    <color>#000066</color>
                </mouse-over>
                <!--菜單項與項之間的分割線(xiàn),參數符合border樣式即可??蛇x-->
                <split-line>1 solid #999999</split-line>
            </menu-item>
        </sub-menu>
    </style>

    <!--
        context path相當于虛擬目錄的別名。如果菜單的鏈接使用絕對路徑訪(fǎng)問(wèn),則建議設置該節點(diǎn)。
        如果設置該節點(diǎn)則菜單的鏈接地址由該值加上菜單項設置的href構成。
        該節點(diǎn)是可選的
    -->
    <context>
        <path></path>
    </context>

    <!--
        菜單數據。
        menus下的節點(diǎn)視為主菜單,只有主菜單設置的寬度值才有效
        菜單必須有text,href兩個(gè)屬性,target為可選屬性,默認值為"_self"
            text - 菜單文本
            href - 菜單鏈接地址。如果不需鏈接請用"#";如果是執行某段javascript,請加上前綴javascript:
            target - 菜單打開(kāi)的窗口
    -->
    <menus>
        <menu text="CSDN" href="#" target="_blank" width="60">
            <menu text="網(wǎng)站首頁(yè)" target="_blank">
            </menu>
            <menu text="服務(wù)" href="#">
                <menu text="blog" ></menu>
                <menu text="技術(shù)社區" ></menu>
                <menu text="幫助" href="javascript:help();"></menu>
            </menu>
        </menu>
        <menu text="SOHU" target="_blank" width="60">
        </menu>
        <menu text="NCUCEC" target="_blank" width="60">
            <menu text="公司網(wǎng)站" target="_blank"></menu>
            <menu text="內部論壇" 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>

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

(3)主菜單項之間可以設置分割圖片,
子菜單項可以設置分割線(xiàn)的樣式。

(4)所有圖片都由css控制,避免路徑問(wèn)題。

(5)可以設置虛擬目錄的別名,為菜單鏈接使用絕對路徑帶來(lái)方便,如:

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


設置該值后,用戶(hù)只需根據文件的目錄結構寫(xiě)好菜單,而不必擔心虛擬目錄的問(wèn)題。

由于菜單使用了window.createPopup(),
所以它被限制在IE5.5以上,
而且子菜單如果是新開(kāi)窗口,會(huì )被攔截。
注:用window.createPopup()制作菜單受到過(guò)前人的啟發(fā)

設置該值后,用戶(hù)只需根據文件的目錄結構寫(xiě)好菜單,而不必擔心虛擬目錄的問(wèn)題。

由于菜單使用了window.createPopup(),
所以它被限制在IE5.5以上,
而且子菜單如果是新開(kāi)窗口,會(huì )被攔截。
注:用window.createPopup()制作菜單受到過(guò)前人的啟發(fā)

=====================================================================

二、實(shí)現的兩個(gè)腳本可以寫(xiě)在一個(gè)文件中:

(1)處理Popup窗口的腳本

//------------------ 下面一些函數用來(lái)處理彈出窗口  ------------------ //
var pops = new Array();
// 用來(lái)存儲Popup窗口家族的數組
function CreatePopup(degree
)
{
    if (
degree < 0)    
// 層數不能小于0
        
return null
;
    if (
pops[degree] != null)
//如果已經(jīng)存在則不需創(chuàng )建
        
return pops[degree
];

    if (
degree == 0
)
        
pops[0] = window.createPopup();
//創(chuàng )建最頂層Popup窗口
    
else{
        if (
pops[degree - 1] == null
)
            
pops[degree - 1] = CreatePopup(degree - 1)    
//遞歸回溯從第一層開(kāi)始創(chuàng )建
        
pops[degree] = pops[degree - 1].document.parentWindow.createPopup();
//從父Popup窗口創(chuàng )建子Popup窗口
    
}
    
pops[degree].document.body.setAttribute("degree", degree
);
    return
pops[degree
];
}

CreatePopup(1);
//創(chuàng )建一個(gè)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 = "您的位置->"
;

// -------- 主菜單樣式相關(guān)定義 ---------//

//定義主菜單樣式
var m_strMainMenuStyle = ""
;
//主菜單項的樣式attribute
var m_strMainMenuItemStyle = ""
;
//主菜單項樣式Property
var m_strMMItemProBase
= {};
//主菜單項鼠標懸停樣式Property
var m_strMMItemProMOver
= {};
//菜單項與項之間的分割圖片
var m_strMMItemSplitImg
;

// -------- 子菜單樣式相關(guān)定義 ---------//

//定義子菜單樣式
var m_strSubMenuStyle = ""
;
//子菜單項的樣式attribute
var m_strSubMenuItemStyle = ""
;
//子菜單項樣式Property
var m_strSMItemProBase
= {};
//子菜單項鼠標懸停樣式Property
var m_strSMItemProMOver
= {};
//子菜單項下邊框樣式(作為分割線(xiàn))
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)


/**
*構造節點(diǎn)樣式
*@param strPath 節點(diǎn)路徑
*/
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
;
}
/**
*構造節點(diǎn)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"
);

    
//得到鼠標懸停時(shí)主菜單項各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"
);

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

    
//得到子菜單項下邊框樣式(作為分割線(xiàn))
    
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
;
}

/**
*展開(kāi)各個(gè)主菜單
*@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>"
;
    
//如果用戶(hù)設置了分割圖片則輸出
    
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>"
;
        
        
//如果用戶(hù)設置了分割圖片則輸出
        
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
];
        
//如果沒(méi)有子菜單,執行下一個(gè)循環(huán)
        
if ( !menuNode.hasChildNodes
() ){
            continue;
        }
        
        
//得到主菜單下的子菜單集合
        
var objSMList = menuNode.childNodes
;
        var
intSubMenuLen = objSMList.length
;

        
//每個(gè)主菜單對應的子菜單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
;
            
//鼠標懸停和移出時(shí)一級子菜單的響應
            
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 子菜單個(gè)數循環(huán)

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

        
document.write(strSubMenuHtml
);

        
    }
//end for 主菜單個(gè)數循環(huán)
}
//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



/**
*打開(kāi)鏈接,所有菜單的鏈接都是通過(guò)這個(gè)函數來(lái)打開(kāi)。并顯示位置信息
*@param strUrl - 打開(kāi)鏈接的地址
*@param strTarget - 打開(kāi)鏈接的target。如_self,_blank等        
*@param strViewText - 位置信息
*/
function onClickEvent(strUrl,strTarget,strViewText
)
{
    
m_bolFirst = true;
//以后響應菜單時(shí)變?yōu)闉榈谝淮雾憫?
    //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是一個(gè)javascript字符串則直接執行之
    
if(strUrl.toLowerCase().indexOf("javascript") != -1
) {
        
executeScript(strUrl
);
        return;
    }

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

    
window.open(strUrl,strTarget
);
}
//執行一個(gè)javascript字符串
function executeScript(strScript
)
{
    
//第一個(gè)eval得到該字符串表示的變量,第二個(gè)eval則執行變量里的腳本
    
eval(strScript
);
}

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

<popmenu>
    <!--樣式定義-->
    <style>
        <!--主菜單樣式定義-->
        <main-menu>
            <!--基本樣式,只要節點(diǎn)符合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>
                <!--基本樣式,節點(diǎn)符合td style attribute即可,可選。鼠標移出時(shí)使用該樣式-->
                <base>
                    <background-color></background-color>
                    <color>#000099</color>
                </base>
                <!--鼠標懸停時(shí)的樣式,節點(diǎn)符合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>
            <!--基本樣式,只要節點(diǎn)符合table style attribute即可-->
            <base>
                <font-size>9pt</font-size>
                <border>1 solid black</border>
                <cursor>default</cursor>
            </base>
            <!--菜單項的樣式-->
            <menu-item>
                <!--基本樣式,節點(diǎn)符合tr style attribute即可,可選。鼠標移出時(shí)使用該樣式-->
                <base>
                    <background-color>white</background-color>
                    <color>#006699</color>
                </base>
                <!--鼠標懸停時(shí)的樣式,節點(diǎn)符合tr style attribute即可,可選。-->
                <mouse-over>
                    <background-color>#DDDDDD</background-color>
                    <color>#000066</color>
                </mouse-over>
                <!--菜單項與項之間的分割線(xiàn),參數符合border樣式即可??蛇x-->
                <split-line>1 solid #999999</split-line>
            </menu-item>
        </sub-menu>
    </style>

    <!--
        context path相當于虛擬目錄的別名。如果菜單的鏈接使用絕對路徑訪(fǎng)問(wèn),則建議設置該節點(diǎn)。
        如果設置該節點(diǎn)則菜單的鏈接地址由該值加上菜單項設置的href構成。
        該節點(diǎn)是可選的
    -->
    <context>
        <path></path>
    </context>

    <!--
        菜單數據。
        menus下的節點(diǎn)視為主菜單,只有主菜單設置的寬度值才有效
        菜單必須有text,href兩個(gè)屬性,target為可選屬性,默認值為"_self"
            text - 菜單文本
            href - 菜單鏈接地址。如果不需鏈接請用"#";如果是執行某段javascript,請加上前綴javascript:
            target - 菜單打開(kāi)的窗口
    -->
    <menus>
        <menu text="CSDN" href="#" target="_blank" width="60">
            <menu text="網(wǎng)站首頁(yè)" target="_blank">
            </menu>
            <menu text="服務(wù)" href="#">
                <menu text="blog" ></menu>
                <menu text="技術(shù)社區" ></menu>
                <menu text="幫助" href="javascript:help();"></menu>
            </menu>
        </menu>
        <menu text="SOHU" target="_blank" width="60">
        </menu>
        <menu text="NCUCEC" target="_blank" width="60">
            <menu text="公司網(wǎng)站" target="_blank"></menu>
            <menu text="內部論壇" 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>

本站僅提供存儲服務(wù),所有內容均由用戶(hù)發(fā)布,如發(fā)現有害或侵權內容,請點(diǎn)擊舉報。
打開(kāi)APP,閱讀全文并永久保存 查看更多類(lèi)似文章
猜你喜歡
類(lèi)似文章
用 JavaScript 實(shí)現鼠標懸停時(shí)展開(kāi)的菜單 at catch the digita...
基于 Ajax 的無(wú)限級菜單
一個(gè)簡(jiǎn)單的javascript菜單
門(mén)戶(hù)菜單和窗口控件
17.JavaScript實(shí)現鼠標右鍵自定義菜單
用js實(shí)現網(wǎng)頁(yè)上模仿桌面右鍵菜單
更多類(lèi)似文章 >>
生活服務(wù)
分享 收藏 導長(cháng)圖 關(guān)注 下載文章
綁定賬號成功
后續可登錄賬號暢享VIP特權!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服

欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久