　　Internet 上几乎每个站点都存在某种种类的下拉菜单。您可能会发现，简单的下拉菜单会在网页的上部水平排列，复杂些的会级联子菜单，有些使用带有鼠标停留效果的图形，还有一些在网页的左侧或右侧竖直排列。如果您想过在自己的网站使用下拉菜单的话，本文则会在您开始行动时有所帮助，并且会解释清楚一些看起来比较神秘的功能。

　　大多数下拉菜单都使用动态 HTML (DHTML) 来创建特殊的显示/隐藏行为。所有 DHTML 都从客户端脚本和 CSS 样式的组合中获取其特殊功能。通常，这就意味着当用户执行某个操作时，就会触发浏览器中的事件，从而导致浏览器运行一个脚本来更改一个或多个元素的显示属性。

　　本文讲述了下拉菜单的三种不同变化形式。您可以使用本文中的示例创建自己的下拉菜单。第一个示例是一个简单的下拉菜单。其他两个下拉菜单示例是第一个示例的变化形式：一个具有级联菜单，另一个使用图像。

　　注 “代码列表”部分中两个示例的代码位于本文结尾。对于第三个示例，则解释了如何修改其他两个示例中的一个。

　　本文中所有的下拉菜单示例都能在 Microsoft Internet Explorer 5.0 或更高版本中正常运行。简单下拉菜单的示例和带有图像的下拉菜单示例还能在 Opera、Mozilla 和 Netscape 浏览器中按预期运行。级联下拉菜单示例能在 Internet Explorer 和 Opera 中按预期运行，但是在 Mozilla 或 Netscape 浏览器中却不行。

　　另外，本文中的 HTML 示例使用下列 DOCTYPE。如果您指定不同的 DOCTYPE，该代码则可能无法按照预期或希望来运行。这种情况下，您可能需要对代码进行更改，以使其能够与不同的 DOCTYPE 一起正常运行。（有关详细信息，请参阅 Working with HTML DOCTYPE Declarations in FrontPage。）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

　　创建简单下拉菜单

　　这个简单下拉菜单示例会在网页的上部产生一个水平菜单。当用户将鼠标指针指向每个菜单项时，浏览器都会显示一个下拉项列表项。图 1 显示了菜单在 Internet Explorer 中显示的方式。

使用 JavaScript 创建 FrontPage 下拉菜单

图 1. 简单下拉菜单

　　下面的几节内容讲述了创建此下拉菜单所需的 HTML、JavaScript 和 CSS 代码。您在本文结尾处会发现该代码列表部分列出的完整代码。

　　注用于创建本文中菜单的 HTML、脚本对象、属性、方法、事件和 CSS 属性的完整讨论不在本文范围之内。有关这些主题的详细信息，请参阅 MSDN Library 中 Web Development 部分的 HTML and Dynamic HTML 参考。

　　简单下拉菜单的 HTML 代码

　　该下拉菜单是使用表创建的。这个菜单表比较简单，如列表 1 中所示。

<table class="navbar" width="800">
<tr>
...[missing TD elements]
</tr>
</table>

　　列表 1. 主菜单栏表

　　该菜单表具有一个值为“navbar”的 class 属性，该属性与一个命名的样式类相关，width 属性设置为一个固定的像素度量：800。（如果您指定一个不同的度量或百分比，则可能需要更改表中各列的度量，这样可能会更改菜单在浏览器中显示时的行为方式。有关详细信息，请参阅 CLASS Attribute className Property 和 WIDTH Attribute width Property。）

　　该表由一行组成（TR Element tr Object），该行包含了多个列（TD Element td Object）。本文中的示例提供了五列，每列带有一个下拉菜单。每个下拉菜单都位于该菜单表中的一个 TD 元素内。

　　TD 元素中的代码使用 onmouseover 和 onmouseout 事件提供下拉菜单的正确显示和隐藏功能。（有关详细信息，请参阅 onmouseover Event 和 onmouseout Event。）列表 2 显示了该下拉菜单 TD 元素的代码。为了确保菜单使用简便，每个下拉菜单的代码都是完全相同的。

<td class="menuNormal" width="160"

[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] 下一页

上一篇:立体视觉让您的网页“靓”起来

下一篇:FrontPage基础教程创建网页动画

使用 JavaScript 创建 FrontPage 下拉菜单相关文章：

·GHOST使用方法（图解）

·Vista系统使用技巧总结

·为什么iexplore.exe在打开网页时CPU使用会100%？

·DataTable控件的使用

·QQ空间导航代码最新版使用方法

·推荐：漂亮的手机上使用的墙纸图片分享下载

·腾讯QQ号码使用完全指南

·DENX U-Boot及Linux使用手册

·ajax+php无刷新二级联动下拉菜单(省市联动)源码

·QQ空间透明flash代码使用说明

使用 JavaScript 创建 FrontPage 下拉菜单相关软件：

·黑客视频教程 VMware虚拟机的安装和使用

·黑客视频教程-灰鸽子远控使用教程

·FLASH 8中文使用手册

·使用GPMC随心所欲管理组策略

·Adobe Photoshop CS 2 简体中文使用指南

·Auto CAD R14高级使用教程

·Microsoft Visio 2000 完全使用手册

·Linux 系统命令及其使用详解(大全)

·黑客视频教程-网吧代理服务器使用灰鸽子端口映射方法

·Office使用完全手册

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员，我们尽快予以更正。
[打印本页] [关闭窗口] 转载请注明来源：http://www.viphot.com

	\| 帮助(？) \| 版权声明 \| 友情连接 \| 关于我们 \| 信息发布
Copyright 2007 www.viphot.com All Rights Reserved.	鄂ICP备05000083号Powered by:viphot