下拉菜单实用工具 - 使用 Javascript、CSS 和 DOM

• 下载演示项目 - 12 Kb

引言

最近我们的团队需要在我们的内网网站上实现下拉菜单。团队中的大多数人是网页设计师，而我是团队中唯一的开发人员，所以我需要找到一种让他们轻松实现下拉菜单的方法。当然，我可以使用 Dreamweaver 来完成，但它生成的代码不易修改（而且代码很长！）。因此，我决定为团队创建一个下拉菜单实用工具。

详细说明

这个实用工具是用 Javascript 编写的。它适用于 3 种不同的鼠标事件 - onMouseOver、onMouseClick 和页面依赖。以下是实现菜单的示例。你可以看到它有多么容易。

示例 1 - 在 onMouseOver 时显示子菜单

<a href="link_0" class="rightArrowGreen marginLeft10 block" 
    id="Layer_a_button"
    onMouseOver="javascript:MM_showHideLayers('Layer_a','show','rightArrowGreen',
    'rightArrowDownGreen',true)"
>Menu</a>
...
<div id="Layer_a" class="dropdownMenu">
...
</div>
 

在示例 #1 中，只需使用 onMouseOver 调用 MM_showHideLayers 函数即可。

示例 2 - 在 onMouseClick 时显示子菜单

<a href="#" class="rightArrowGreen marginLeft10 block"
    id="Layer_a_button"
    onClick="javascript:(isLayerDisplay('Layer_a'))?MM_showHideLayers('Layer_a','hide',
    'rightArrowDownGreen','rightArrowGreen',true):MM_showHideLayers('Layer_a','show',
    'rightArrowGreen','rightArrowDownGreen',true);"
>Menu</a>
...
<div id="Layer_a" class="dropdownMenu">
...
</div>

该实用工具有一个名为 isLayerDisplay(layername) 的函数，用于返回一个布尔值，指示该层是否正在显示。

示例 3 子页面 1 - 基于特定页面显示子菜单

<a href="sample3_subpage1.asp" class="rightArrowGreen marginLeft10 block"
    id="Layer_a_button">Menu</a>
...
<div id="Layer_a" class="dropdownMenu">
...
</div>
<script type="text/javascript">
 MM_showHideLayers('Layer_a','','rightArrowGreen','rightArrowDownGreen','',
 'sample3_subpage1.asp','<%=request.ServerVariables("SCRIPT_NAME")%>');
</script>

示例 #3 依赖于页面，因此你只需要在 javascript 中指定要显示的页面即可（ MM_showHideLayers('Layer_a','','rightArrowGreen','rightArrowDownGreen','','sample3_subpage1.asp','<%=request.ServerVariables("SCRIPT_NAME")%>'); </script>）。
正如你所看到的，实现下拉菜单并不困难。我欢迎大家改进我的脚本，使其更加灵活。感谢阅读我的文章。