Vixual

在網頁界已經有很多的「下拉選單」程式了，不過似乎都搞得太過複雜或太華麗了。

其實下拉選單的原理很簡單，一開始只是先讓「子選單」隱藏，當滑鼠移至「主選單」時再讓子選單顯示。因此，只要能控制網頁元件的 display 樣式屬性就已經成功一半了。

因為本人喜歡重新發明輪子，所以也寫了一個簡易的網頁下拉選單的程式，可以做為初學者入門的參考。

在範例的原始碼中，我儘量讓程式碼看起來淺顯易懂，並且只用 JavaScript，不使用 jQuery 或其它 Framework。我也儘量多寫一些註解，希望 JavaScript 的初學者能看得懂。

功能特色

1. 本程式可用 onMouseOver 或 onClick 事件來觸發下拉選單，讓行動裝置的訪客也可以「觸控」來展開選單，這也是我重新發明輪子的目的。
2. 本程式相容 IE、Firefox、Chrome。
3. 唯一華麗的地方，應該是那個向下的箭頭。

注意事項

1. 在主選單中可以用 onClick 或 onMouseOver 事件來觸發 switchMenu 函式以顯示子選單。如果用了 onMouserOver 必須同時用 onMouseOut 來隱藏子選單，這部份在範例裡有寫。
2. 在 CSS 裡，.main-menu 的 padding 與 .sub-menu 的 margin 屬性必須一同修改，這樣下拉選單的左側才會對齊。
3. CSS 裡的 :hover 很好用，可自動切換滑鼠在移入前/後的樣式。

程式範例

以下的程式碼，我會將重要的地方會標記起來...

選單的 HTML 原始碼:

<!--選單1 (Hover)-->
<span class="main-menu" onmouseover="switchMenu( this, 'SubMenu1', 'MouseOver' )" onmouseout="hideMenu()">Menu1(Hover) <span style="font-size:9px;">&#9660;</span>
    <ul id="SubMenu1" class="sub-menu" style="display:none;">
        <li><a href="http://www.vixual.net/" target="_blank">Vixual</a></li>
        <li><a href="http://www.google.com.tw/" target="_blank">Google</a></li>
        <li><a href="http://tw.yahoo.com/" target="_blank">Yahoo!奇摩</a></li>
    </ul>
</span>

<!--選單2 (Click)-->
<span class="main-menu" onclick="switchMenu( this, 'SubMenu2' )">Menu2(Click) <span style="font-size:9px;">&#9660;</span>
    <ul id="SubMenu2" class="sub-menu" style="display:none;">
        <li><a href="http://www.vixual.net/" target="_blank">Vixual</a></li>
        <li><a href="http://www.google.com.tw/" target="_blank">Google</a></li>
        <li><a href="http://tw.yahoo.com/" target="_blank">Yahoo!奇摩</a></li>
    </ul>
</span>

CSS 代碼:

.main-menu { color:#FFFFFF; background-color:#666666; padding:5px; margin:0px; cursor:pointer; display:inline-block; } /* 主選單的樣式 */
.main-menu:hover { background-color:#0000FF; }
.sub-menu { color:#0000FF; background-color:#CCCCCC; margin:5px -5px; padding:0px; list-style-type:none; position:absolute; } /* 下拉清單的樣式 */
.sub-menu li { padding: 3px 5px; text-align:left; } /* 下拉清單每一列的樣式 */
.sub-menu li:hover { color:#FFFFFF; background-color:#0000FF; }
.sub-menu a { text-align:left; display:block; text-decoration:none; color:#0000FF; }
.sub-menu a:hover { color:#FFFFFF; background-color:#0000FF; text-decoration:none; }

JavaScript 程式碼:

var VisibleMenu = ''; // 記錄目前顯示的子選單的 ID

// 顯示或隱藏子選單
function switchMenu( theMainMenu, theSubMenu, theEvent ){
    var SubMenu = document.getElementById( theSubMenu );
    if( SubMenu.style.display == 'none' ){ // 顯示子選單
        SubMenu.style.minWidth = theMainMenu.clientWidth; // 讓子選單的最小寬度與主選單相同 (僅為了美觀)
        SubMenu.style.display = 'block';
        hideMenu(); // 隱藏子選單
        VisibleMenu = theSubMenu;
    }
    else{ // 隱藏子選單
        if( theEvent != 'MouseOver' || VisibleMenu != theSubMenu ){
            SubMenu.style.display = 'none';
            VisibleMenu = '';
        }
    }
}

// 隱藏子選單
function hideMenu(){
    if( VisibleMenu != '' ){
        document.getElementById( VisibleMenu ).style.display = 'none';
    }
    VisibleMenu = '';
}

完整預覽

下載: Here

PS. 「Menu3」是直接將 Hover 與 Click 加在一起使用

參考網頁

• 純CSS的下拉式選單 - Astral web歐斯瑞公司