DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript+xml實現二級下拉菜單,不會被任何標簽或元素遮住
javascript+xml實現二級下拉菜單,不會被任何標簽或元素遮住
編輯:關於JavaScript     

一、簡單說明

該菜單最大的優點是可以跨過網頁上任何標簽,甚至是框架,
(一般的菜單會被select,object,flash等擋住)
所以如果你有這方面的需要,
那麼這個菜單是個很好的選擇。

總體而言,它有如下特性:
(1)菜單的樣式和數據都是通過xml配置
(2)菜單的樣式可以隨心所欲修改,如:

<base>
    <background-color>#DDDDDD</background-color>
    <background-image>url(menu_bg.jpg)</background-image>
    <font-size>10pt</font-size>
    <color>#000099</color>
    <width>100%</width>
    <height>32</height>
    <text-align>center</text-align>
    <cursor>default</cursor>
</base>


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

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

(4)所有圖片都由CSS控制,避免路徑問題。

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

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


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

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

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

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


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

(1)處理Popup窗口的腳本

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

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

CreatePopup(1); //創建一個2層的Popup家族

var oPopup = pops[0];
var timer = null;


/**
*顯示一級子菜單
*@param objShow - 顯示子菜單的對象
*@param strGetID - 存儲顯示內容的標簽id
*/
function showSubMenu1(objShow,strGetID) {
    clearTimer();
    endHideSubMenu();
    var objGet = eval(document.getElementById(st

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved