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欧斯瑞公司