今天小编要向大家分享个javascript+xml实现二级下拉菜单不会被任何标签或元素遮住教程，过程简单易学，相信聪明的你一定能轻松get！
一、简单说明
该菜单最大的优点是可以跨过网页上任何标签，甚至是框架，
（一般的菜单会被select,object,flash等挡住）
所以如果你有这方面的需要，
那么这个菜单是个很好的选择。
总体而言，它有如下特性：
（1）菜单的样式和数据都是通过xml配置
（2）菜单的样式可以随心所欲修改，如：
base
background-color#DDDDDD/background-color
background-imageurl(menu_bg.jpg)/background-image
font-size10pt/font-size
color#000099/color
width100%/width
height32/height
text-aligncenter/text-align
cursordefault/cursor
/base
只要节点名称符合各自标签(table,tr,td之一)的style attribute即可。
（3）主菜单项之间可以设置分割图片，
子菜单项可以设置分割线的样式。
（4）所有图片都由CSS控制，避免路径问题。
（5）可以设置虚拟目录的别名，为菜单链接使用绝对路径带来方便，如：
context
pathhdsa/path
/context
设置该值后，用户只需根据文件的目录结构写好菜单，而不必担心虚拟目录的问题。
由于菜单使用了()，
所以它被限制在IE5.5以上，
而且子菜单如果是新开窗口，会被拦截。
注：用()制作菜单受到过前人的启发
设置该值后，用户只需根据文件的目录结构写好菜单，而不必担心虚拟目录的问题。
由于菜单使用了()，
所以它被限制在IE5.5以上，
而且子菜单如果是新开窗口，会被拦截。
注：用()制作菜单受到过前人的启发
=====================================================================
二、实现的两个脚本可以写在一个文件中：
（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] = (); //创建最顶层Popup窗口
else{
if (pops[degree - 1] == null)
pops[degree - 1] = CreatePopup(degree - 1) //递归回溯从第一层开始创建
pops[degree] = pops[degree - 1].(); //从父Popup窗口创建子Popup窗口
}
pops[degree].("degree", degree);
return pops[degree];
}
CreatePopup(1); //创建一个2层的Popup家族
var oPopup = pops[0];
var timer = null;
/**
*显示一级子菜单
[email protected]objShow - 显示子菜单的对象
[email protected]strGetID - 存储显示内容的标签id
*/
function showSubMenu1(objShow,strGetID) {
clearTimer();
endHideSubMenu();
var objGet = eval((st
strXMLPath - XML数据文件所在路径及文件名
*/
function loadMenu(strXMLFile) {
m_doc = new ActiveXObject("");
= false;
();
getMainMenuStyle();
getSubMenuStyle();
//得到主菜单集合
m_objMMList = ("");
//得到虚拟目录
if( m_doc.selectSingleNode("//popmenu/context/path") ) {
m_strContextPath = m_doc.selectSingleNode("//popmenu/context/path").text;
}
//输出主菜单
printMainMenu();
//输出一级子菜单
printSubMenu();
}
/**
*鼠标移入移出主菜单样式的改变
[email protected]obj - 改变样式的对象
[email protected]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)
/**
*鼠标移入移出子菜单样式的改变
[email protected]obj - 改变样式的对象
[email protected]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)
/**
*构造节点样式
[email protected]strPath 节点路径
*/
function getNodeStyle(strPath) {
var strStyle = "";
if( m_doc.selectSingleNode(strPath) ) {
var nodeList = m_doc.selectSingleNode(strPath).childNodes;
;var node = m_doc.selectSingleNode("//popmenu/style/main-menu/menu-item/split-image");
m_strMMItemSplitImg = "background-image:" + node.text + ";";
m_strMMItemSplitImg += "background-repeat:no-repeat;background-position:center center;";
}
}//end function getMainMenuStyle()
/**
*得到主菜单样式
*/
function getSubMenuStyle() {
//得到子菜单样式
m_strSubMenuStyle = getNodeStyle("//popmenu/style/sub-menu/base");
//得到子菜单项样式
m_strSubMenuItemStyle = getNodeStyle("//popmenu/style/sub-menu/menu-item/base");
//子菜单项的property
m_strSMItemProBase = getNodeProperty("//popmenu/style/sub-menu/menu-item/base");
//得到鼠标悬停时子菜单项各property改变
m_strSMItemProMOver = getNodeProperty("//popmenu/style/sub-menu/menu-item/mouse-over");
//得到子菜单项下边框样式(作为分割线)
if( m_doc.selectSingleNode("//popmenu/style/sub-menu/menu-item/split-line") ) {
var node = m_doc.selectSingleNode("//popmenu/style/sub-menu/menu-item/split-line");
m_strSMItemBorderB = "border-bottom:" + node.text + ";";
}
}//end function getSubMenuStyle()
var m_bolFirst = true;//是否首次响应菜单
document.onclick = function(){
m_bolFirst = true;
//alert(parent.frames[0]);
}
top.document.onclick = function(){
m_bolFirst = true;
}
/**
*展开各个主菜单
[email protected]objTd - 主菜单所在td
[email protected]strSubMenuID - 对应子菜单的id
[email protected]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()
{
sp; width=" + intMenuWidth + " + m_strMainMenuItemStyle + "" id=mm" + i +
" " +
" " + menuText+"/td";
//如果用户设置了分割图片则输出
if( m_strMMItemSplitImg && m_strMMItemSplitImg != "" ){
strHtml+= "td + 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 + strSubMenuID + """ +
" table cellspacing="0" cellpadding="0" + m_strSubMenuStyle + """;
for ( var j = 0;j intSubMenuLen;j ++ ) {
var objSubMenu = objSMList[j];
var attList = objSubMenu.attributes;
&nb
bsp; strRightRow = "font4/font";
strPosition = "";
} else {
//strMouseOverEvent += "parent.endHideSubMenu();";
strMouseOverEvent += "parent.hideSubMenu2();";
}
var strOnClickEvent = "javascript:parent.onClickEvent(\" + menuHref + ",\" + menuTarget + ",\" + strPosition + ");"
strSubMenuHtml += "tr + m_strSubMenuItemStyle + "" " +
" onmouseover="" + strMouseOverEvent + "" " +
" onmouseout="" + strMouseOutEvent + "" " +
" onclick= " + strOnClickEvent + " " +
" td width="3" nowrap + m_strSMItemBorderB + "" /td"+
" td nowrap + m_strSMItemBorderB + """ + menuText + "/td"+
" td width="10" align="right" nowrap + 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.le
如果觉得《javascript+xml实现二级下拉菜单不会被任何标签或元素遮住》对你有帮助，请点赞、收藏，并留下你的观点哦！
