該菜單最大的優(yōu)點(diǎn)是可以跨過(guò)網(wǎng)頁(yè)上任何標簽,甚至是框架,
(一般的菜單會(huì )被select,object,flash等擋?。?br>所以如果你有這方面的需要,
那么這個(gè)菜單是個(gè)很好的選擇。
總體而言,它有如下特性:
(1)菜單的樣式和數據都是通過(guò)xml配置
(2)菜單的樣式可以隨心所欲修改,如:
<base> 只要節點(diǎn)名稱(chēng)符合各自標簽(table,tr,td之一)的style attribute即可。 <context> =====================================================================
二、實(shí)現的兩個(gè)腳本可以寫(xiě)在一個(gè)文件中: (1)處理Popup窗口的腳本 //------------------ 下面一些函數用來(lái)處理彈出窗口 ------------------ // //位置信息 三、典型的xml配置 四、使用例子 <html>
<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>
(3)主菜單項之間可以設置分割圖片,
子菜單項可以設置分割線(xiàn)的樣式。
(4)所有圖片都由css控制,避免路徑問(wèn)題。
(5)可以設置虛擬目錄的別名,為菜單鏈接使用絕對路徑帶來(lái)方便,如:
<path>hdsa</path>
</context>
設置該值后,用戶(hù)只需根據文件的目錄結構寫(xiě)好菜單,而不必擔心虛擬目錄的問(wèn)題。
由于菜單使用了window.createPopup(),
所以它被限制在IE5.5以上,
而且子菜單如果是新開(kāi)窗口,會(huì )被攔截。
注:用window.createPopup()制作菜單受到過(guò)前人的啟發(fā)
由于菜單使用了window.createPopup(),
所以它被限制在IE5.5以上,
而且子菜單如果是新開(kāi)窗口,會(huì )被攔截。
注:用window.createPopup()制作菜單受到過(guò)前人的啟發(fā)
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 = " ";
//二級子菜單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 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>
<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ā)
=====================================================================
二、實(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 = " ";
//二級子菜單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>
聯(lián)系客服