简易网页下拉选单,可支援 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 位部落客按了赞: