簡易網頁下拉選單,可支援 MouseOver 與 Click 事件

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

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

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

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

功能特色

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

注意事項

  1. 在主選單中可以用 onClickonMouseOver 事件來觸發 switchMenu 函式以顯示子選單。如果用了 onMouserOver 必須同時用 onMouseOut 來隱藏子選單,這部份在範例裡有寫。
  2. 在 CSS 裡,.main-menupadding.sub-menumargin 屬性必須一同修改,這樣下拉選單的左側才會對齊。
  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 加在一起使用

參考網頁

    • 圓仔
    • 12/20. 2016 1:17下午
    Using Google Chrome Google Chrome 55.0.2883.87 on Windows Windows 7

    您好,謝謝您的精彩分享與教學。但小弟這裡有個問題,我若想在子選單再加一層子選單(在子選單繼續往下延伸子選單),請該怎麼做呢? 感謝,麻煩您了。

  1. No trackbacks yet.

return top

%d 位部落客按了讚: