如何做一個 IE 和 NS 雙用的下拉功能選單

一般的處理原則

下拉式功能選單的原理
在一般視窗中，在標題列之下，可用滑鼠按鈕操作，彈出收合附屬選項區塊的功能 選單，是最普通而基本的能力。但它之所以能運作，必須有一個能夠改變顯示或隱藏 狀態的元件，做為動態的選單表。就這點來說，傳統靜態的 HTML 網頁，除了重新由 Server 下載新的選單頁，否則是無法改變既存的頁面狀態的。到了 DHTML 動態網頁後 ，我們已經可以有些改寫元件的能力，去模擬一般視窗應用程式的這種功能。要在網頁 上達成這個功能，我們第一個要思考的問題就是，網頁上的什麼元件可以因瀏覽者的 操作而改變顯示狀態？ 回選單
什麼元件能在 DHTML 中改變顯示狀態
這個問題必須依 DHTML 瀏覽器元件的動態 能力來決定。在 Internet Explorer 4.0 以上，配合 CSS visibility 屬性的操作， 幾乎所有網頁元件都有動態顯示及隱藏的能力，因此只要是網頁的區段元件，都可以 做為功能選單的元件。但 Netscape Navigator 狀況就有些麻煩了，因為 Netscape 傳統的 HTML 標籤，除了 <IMG> 的 SRC 屬性，和 <FORM> 附屬標籤的 VALUE 屬性可以動態改變外，其他元件都是無法用 Script 敘述去操作改變的，就算 它們也支援 CSS 的 visibility 屬性，但卻不能像 Explorer 一樣可以動態改變的。 所以最後的選擇只剩下 Netscape 4.0 版以後自己獨家支援的網頁元件 LAYER ， 這是惟一一個他可以全面支援動態改變的網頁元件。 回選單
其實你不懂 Netscape 的心
只要提起 Netscape 的 LAYER 標籤，所有 IE 派的網頁設計者一個共同的表情 就是 !! OH !! My God !!，因為用了 LAYER 標籤，就表示其他瀏覽器完全無法處理， 不是要寫兩份網頁，就是要用 <NOLAYER> 和 <COMMENT> 標籤在那裡 插來插去的，最後 HTML 稿和 Script 敘述，可不只是困難雙倍而已。但這是實情嗎？ 還是我們習慣用 IE 的思考模式來看 Netscape 呢？我在這裡先告訴你，本篇範例， 完全使用 HTML 4.0 標準標籤，若有用一個 LAYER ，賞金 2000 NT 。或許你會問， 作者自己不是說 Netscape 只有 LAYER 元件才能動態改變，怎麼又自相矛盾了呢？ 不要急，聽我說下去。Netscape 的確只有 LAYER 元件才能動態改變，但如果你為 你的網頁標籤加上 STYLE="position:relative" 或者是 STYLE="position:absolute" 的 CSS 屬性設定之後，Netscape 會把原來你這個原本非 LAYER 標籤做 [擬 Layer] 的處理。不信，跟著我做下面的實驗。 回選單
Netscape 中包覆標籤的擬 LAYER 化
你先在 HTML 中這樣敘述： 
<DIV ID="div1"></DIV>
然後你在網頁其他地方插入 Script 加以執行下面的敘述： 
var str="",obj;

for (obj in document.layers)
{str+=obj+" : "+document.layers[obj]+"\n";}
alert(str);
結果是 - length:0 -，表示該網頁沒有 layer 元件的存在，這時你再把剛才那個 DIV 標籤改一下： 
<DIV ID="div1" STYLE="position:absolute"></DIV>
然後再執行一下剛才的 Script ，你會發覺結果是： 
length:1
div1:[object layer]
這表示原本 HTML 的 DIV 標籤，這會成了 layers 集合的一部份，升格到可以像 LAYER 一樣改變顯示屬性及有重新改寫能力了。其實不只 DIV ，其他 HTML 中可做 包覆文字內容的標籤，如 <SPAN>,<P>......等，通通可以用這方式升格 成準 LAYER 元件來使用。這才是 Netscape 安排真正的用意，就是 LAYER 的提出， 不只有 LAYER 一個標籤能用，而是其他包覆標籤也能使用，在別的瀏覽器中把它們 當做 DIV,SPAN,P 處理，而 Netscape 則一概當做 LAYER 來解決。那麼 Cross Browser 在 Netscape 裏真的這麼難嗎？還是你一向誤解了 Netscape？ 回選單
如何選擇事件觸發器元件
闖過了跨瀏覽器的第一個難題後，我們要來處理事件觸發器的第二個難題。 所謂事件觸發，就是你如何在 Script 敘述中接收到瀏覽者的操做動作，從而決定什麼 時候功能選單該顯示或隱藏？也就是要由什麼樣的網頁標籤來通知你瀏覽者做了 什麼動作。這在 Explorer 4.0 以後的版本問題比較小，因為所有的網頁標籤都被 設計成可操作物件，幾乎可以接收所有瀏覽者在瀏覽網頁時的各種鍵盤和滑鼠動作， 所以大部份的網頁標籤，都能拿來做事件觸發器。但 Navigator 就不同了 ，首先並不是所有網頁標籤都可以被 Script 操作，除了 anchor,link,image, embed,form...等可被操作外，其他 Hn 標籤，P 標籤，及大部份的格式標籤都是 無法操作物件，不能改變，也接收不到任何因瀏覽者動作而產生的事件。第二是 就算可操作物件，也不是所有瀏覽者動作事件它都收的到，像 image 物件，它可以 偵測到使用者用滑鼠在它上面 Down,Up,Click 動作，但沒辦法偵測到 Over 和 Out 動作，但 link 對這方面的支援就比 image 全面。所以當你設計一份雙用的網頁時， 必須先想清楚，你的網頁要怎樣和瀏覽者互動，從而去選擇 Explorer 和 Navigator 共同有該功能的網頁標籤當你的事件觸發器。在本範例中我使用了 <A> 當做 選單觸發器，因為不管是 MouseOver,MouseOut,MouseDown,MouseUp,MouseClick ， 這些滑鼠動作它都會有反應，並且為 Explorer 和 Netscape 共同支援。 回選單
物件操作分歧的解決
到目前為止，在 HTML 標籤的使用部份，我們的問題基本上問題已解決，剩下來 就是那個在 Explorer 中被當做 DIV，而在 Netscape 中被當做 Layer 的元件要 如何在 Script 中操作的問題了。基本上不管在 Explorer 和 Netscape 中要改變 顯示狀態的方法是一樣的，那就是設定 visibilility 的屬性，但 兩邊瀏覽器要怎樣呼叫這個區塊物件，可就大大不同了。譬如本範例的彈出選單設定 是 <DIV ID="item0" ...>，那麼在 Explorer 中要改變顯示狀態就是： 
item0.style.visibility="visible"
/* or */
item0.style.visibility="hidden"

/* 因為 visibility 是 style 物件的附屬屬性 */
但如果是 Netscape ，雖然它的 Layer 一樣支援 ID 屬性，但可不表示它可像 Explorer 一樣，直接呼叫 item0 就可以了，你還是要按照 Netscape 一向的階層 物件呼叫的方式，如： 
document.item0.visibility="visible or hidden";
/* or */
document.layers.item0.visibility="visible or hidden";

/* 1.建議使用後一種呼叫，因為是一般的基本法則。
   2.visibility 是 Layer 的直接屬性，不需加 style ，也沒有 style 這東西。 */
但像本範例是採用兩層包裹的 DIV 標籤，如： 
<DIV ID="MenuLine" ...>
    <DIV ID="item0" ...>
        /* ............. */
    </DIV>
</DIV>
雖然 Explorer 的呼叫方式不變，但 Netscape 卻要改成： 
document.layers.MenuLine.layers.item0.visibility="visible or hidden";

/* 以上是兩層 layer 呼叫，如果三層那就是： */
document.layers.MenuLine.layers.subgroup.layers.item0.visibility="visible or hidden";

/* 如果四層，天吶別說了，瀏覽器要塞爆了。 */
至於分別依瀏覽器執行不同程式碼，我們捨棄最常用偵測瀏覽器物件 navigator 屬性值的方法，而改用特殊物件偵測法。譬如 Explorer document 底下有個 all 集合物件，那我們就可用： 
if (document.all)
{
/* ...... IE 物件操作敘述 */
}

/* 因為 Explorer 裏有 all 這個集合物件，所以會傳回真值，執行 if 區段裏的 Script。
   但 Navigator 因為沒有 all 集合物件，所以傳回偽值，不執行 if 區段裏的 Script。 */
同樣的，只有 Navigator 4.0 以後的版本才有 layer 標籤，所以同理我們可以： 
if (document.layers)
{
/* ...... NS 物件操作敘述 */
}

/* 之所以用 layers 複數，而不是 layer 單數，是因為 layer 是以集合狀態隸屬於 document */
好了，本範例 IE 和 NS 通用下拉選單基本原理大概就是這樣，往下我將為大家 解說本範例實做方式。 回選單

本範例網頁實作大要

HTML 區段安排
現在我們就來示範本範例如何讓 Explorer 當做 DIV ，而 Netscape 把它當做 LAYER 處理的 HTML 手稿應如何安排其各區段： 
<!-- 選單群組區段開始，本區段的重點是 STYLE="position:absolute;" 的設定，意思是要在 Netscape 中當做 LAYER 來處理。  -->
<DIV ID="MenuLine" STYLE="position:absolute;...">

    <!-- 一般原則彈出區段開始，本區段重點是 visibility="hidden" ，意思是一開始是隱藏的，其他幾個選單彈出區也是如此。  -->
    <DIV ID="item0" STYLE="position:absolute;...visibility:hidden;">

    </DIV>
    <!-- 一般原則彈出區段結束 -->

    <!-- ...其他彈出區段... -->

</DIV>
<!-- 選單群組區段結束 -->

<!-- 本文說明區段開始，沒有 position 的設定，意思是不需要做 Layer 處理。 -->
<DIV ID="Content">

</DIV>
<!-- 本文說明區段結束 -->
回選單
彈出事件接收器的安排
所有的彈出選單區塊都設置好之後，接著就要安排一個像視窗應用程式一樣的橫條 ，以感應瀏覽者在橫條上的滑鼠動作，來決定彈出區段的顯示和隱藏。在本例中我們是 把它插在和彈出區段同一個區組，做為第一個子 Layer 區段，如： 
<!-- 選單群組區段開始 -->
<DIV ID="MenuLine" STYLE="position:absolute;...">

    <!-- 選單觸發器區段開始 -->
    <DIV ID="MenuBar" STYLE="position:absolute;...">
        <!-- ...... -->
    </DIV>
    <!-- 選單觸發器區段結束 -->

    <!-- 一般原則彈出區段開始 -->
    <DIV ID="item0" STYLE="position:absolute;...">

    <!-- ...其他彈出區段... -->

</DIV>
<!-- 選單群組區段結束 -->
安排做為第一個區段的用意是做為後面彈出區段定位的用意。至於在此觸發事件接收 區段該用什麼網頁標籤做事件接收器呢？考慮一般視窗程式功能選單的動作是 MouseClick 時彈出選單，MouseMove 時切換選單，因此這個標籤應該要對 onmouseover,onmouseout,onclick 等事件都要有反應，在此考量下，Netscape 的網頁 標籤中，只有做為 Link 元件的 <A> 標籤最合適，因此在事件觸發區段，我們 對事件接收器的設定是： 
    <!-- 選單觸發器區段開始 -->
    <DIV ID="MenuBar" STYLE="position:absolute;...">
        <A HREF="#"
            /* 當滑鼠進入就切換到本項附屬表單的彈出，參數 index 表彈出表單邊號。 */
            onmouseover="ShowItem(index);return false;"

            /* 當滑鼠離開就解除附屬彈出表單的鎖定狀態 */
            onmouseout="UnLock();return false;"

            /* 當滑鼠按下就彈出附屬表單，並加以鎖定，避免被關閉。 */
            onclick="PopupItem(index);return false;">一般原則</A>  
        <A HREF="#"

            /* ...其他事件接收器設定... */
    </DIV>
    <!-- 選單觸發器區段結束 -->
回選單
彈出功能表區段如何定位
當所有事件接收器布置完畢後，功能群組的顯示位置即可確定， 我們接著就要做各附屬彈出表單的定位工作。 當然啦，你會舉一堆 FrontPage 2000 ,Dreamwaver 3.0 或 microsoft 網站的外部 Script 模組的方式，指出用 Script 來算最準。但饒了我吧，那一堆繞來繞去的 程式敘述，你一半都還沒搞懂，頭早已昏的要倒下來了。還是直覺一點，用 left 和 top 屬性，把一個個選單區塊移到你認為適當的位置，要注意的是度量單位不要用 pixel ，而要用 em ，因為 pixel 是以螢幕圖點為參考單位，萬一瀏覽者使用字型大小和你 不一樣，整個區塊會偏移，但 em 是以字型大小為參考，能依字型大小自動調整。所以 本頁的定位是： 
    <!-- 一般原則彈出區段開始 -->
    <DIV ID="item0" STYLE="...top:1em;left:0em;...">

    <!-- 範例實作彈出區段開始 -->
    <DIV ID="item1" STYLE="...top:1em;left:4.7em;...">

    <!-- 注意事項彈出區段開始 -->
    <DIV ID="item2" STYLE="...top:1em;left:9.5em;...">

    <!-- 網站聯結彈出區段開始 -->
    <DIV ID="item3" STYLE="...top:1em;left:14.2em;...">
至於這些位移值怎麼來的？當然是邊看邊改的目測法囉。至於你一定要追問那要功能表 置中、置右怎麼辦？我只能答覆你，當然整個會亂掉，但那已經是另一個主題，網頁 元件定位問題，超出了本範例討論範圍。 回選單
本範例的 Script 區段安排
就如同本文在物件操作分歧的解決一節所言，就整篇 DHTML 稿而說，其他都是可共通的 ，只有一個當做 DIV 處理，一個當做 LAYER 處理，這部份是不同的，所以其他 Script 部份都可以共用，只有這部份要依瀏覽器做不同的動作。所以我建議大家和我寫此範例 時的做法一樣，先把顯示和隱藏彈出區塊的 Script 寫成可被呼叫函數，如此再寫其他 共通部份，就不會感覺要寫兩套 Script 了。本範例為區塊顯示和隱藏各做一個 function 如下： 
/* 顯示子選單，item 參數表示顯示那一個子選單。 */
function ItemVisible(item)
{
    var ShowArea,OK=false;

    /* document 有 all 物件，表示瀏覽器是 IE 4.0 以上，
       則 ShowArea 變數要參照網頁元件的 style 附屬物件。 */
    if (document.all) {OK=true;ShowArea=eval(item+".style");}

    /* document 有 layers 物件，表示瀏覽器是 NS 4.0 以上，
       則 ShowArea 變數要參照網頁的 layer 物件。 */
    if (document.layers) {OK=true;
        ShowArea=eval("document.layers.MenuLine.layers."+item);}

    /* 使元件可見 */
    if (OK) {ShowArea.visibility="visible";}
}

/* 關閉子選單，item 參數表示顯示那一個子選單。 */
function ItemHidden(item)
{
    var ShowArea,OK=false;
    if (document.all) {OK=true;ShowArea=eval(item+".style");}
    if (document.layers) {OK=true;
        ShowArea=eval("document.layers.MenuLine.layers."+item);}

    /* 使元件不可見 */
    if (OK) {ShowArea.visibility="hidden";}
}
當你做好這部份後，配合事件接收器的 Script： 
onmouseover="ShowItem(index);return false;"
下面這段敘述兩家瀏覽器用起來就毫無障礙了： 
/* 彈出子選單 */
function PopupItem(idx)
{
    /* 關掉所有選單 */
    for (var i=0;i<layernumber;i++) {ItemHidden(childlayer+i);}
    /* 彈出所選擇的選單 */
    ItemVisible(childlayer+idx);
    /* 標明選單已彈出 */
    pop=true;
    /* 鎖住彈出選單 */
    lock=true;
}
以上就是本範例 Script 敘述的重點，其他就不一再重覆了，看看本頁的 Script ， 你應該很容易就領會了。 回選單

其他注意事項

彈出選單為何要有 Background-Image 的設定
如果你仔細觀看本範例手稿，你會發覺各功能彈出區塊在 STYLE 裏都有個 "background-image:url(menuback.gif)" 的 CSS 設定，menuback.gif 是什麼玄機？ 其實它的長相就是 → 彈出區塊背景圖型。 和 "background-color:darkblue;" 完全一樣，那為何要多此一舉？用 Explorer 的人 或許始終不能明瞭，因為二者毫無差別，但如果你想知道二者在 Netscape 中的差別， 那請按這裡。 看到結果了嗎？明白我的意思了嗎？所以我在前面始終說 Netscape 把設了 position 屬性的 HTML 標籤當做準 Layer 物件，或 擬 Layer 物件，那就是這些標籤雖然取得 Layer 的部份動態改變能力，但畢竟 Netscape 還是沒拿把他就當成真正的 Layer 物件 ，取得 Layer 的所有能力。 回選單
為何功能表彈出區塊關不掉？
在 Explorer 裏不會有這種情況，只要滑鼠離開功能選單區，隨便在網頁其他地方 按一下，彈出區塊就關掉了，因為在程式中我有敘述到當 document.onclick 事件發生時 ，就關彈出區塊。但 Netscape 就不同了，你會發覺彈出區塊顯示後，除非你按其中一 個選項，否則在網頁文件中按鍵是消不掉彈出區塊的。或許你會以為 document.onclick 事件在 Netscape 中不管用，其實不然。 因為要在 Netscape 中使 document.onclick 有用 ，你必須在網頁空白區按鍵才行，不過你可不要以為沒字沒圖的地方就是空白， Netscape 所謂的空白是指完全無任何段落標籤存在的網頁空白區(最保險的就是網頁 結尾)，因為本說明是全文一整段，所以就算無字區，也不能算做 Netscape 空白。 (挑剔呵，好像有一點。) 回選單
致謝詞
你還真有毅力和耐心把整篇說明都看完啦？佩服佩服，為了獎勵你，把相關網頁 打包下載回家做紀念如何？ 希望 何處塵埃讓你不虛此行。 回選單
製作單位：意成工作室
執行監製：老怪