JavaScript实现漂亮的水平(布局)滑动下拉菜单

时间:2009-12-21 11:47来源:未知作者:admin 点击: 次

分享到：

导航菜单栏是每个网站必不可少的部分，它充分的提现了网站的特色和资源索引。本教程将向大家介绍一个轻量级JavaScript代码编写的漂亮水平滑动下拉菜单（JS代码由国外作者

导航菜单栏是每个网站必不可少的部分，它充分的提现了网站的特色和资源索引。本教程将向大家介绍一个轻量级JavaScript代码编写的漂亮水平滑动下拉菜单（JS代码由国外作者leigeber编写），并告诉大家详细的使用方法。

一图抵千言，让我们先看看本例中菜单的最后效果截图：

查看水平下拉菜单的演示页面

实例演示和相关代码下载：

查看演示DropDown Menu

下载实例Demo zip

概述

功能描述：这是一款国外作者编写的优秀轻量级JavaScript水平布局下拉菜单代码（仅1.5kb大小）；当点击主菜单上的项目时，它允许你非常简单和平滑的过渡到下拉的一级菜单项目中。

用途：此下拉菜单能够被方便的运用于导航栏、菜单栏、下拉菜单列表、信息汇聚等等你能想到的地方。

浏览器兼容性：IE6, IE7, IE8, Firefox, Opera以及Safari。

使用方法介绍：

1、将菜单javascript文件以外部链接的形式引入到HTML文档的<head>标签区域中：

<script type="text/javascript" src="dropdown.js"></script>

2、在HTML文档的需要用到菜单栏的地方添加下拉菜单布局代码（包括鼠标触发事件）：

<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">水平滑动下拉菜单一</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul>
<li><a href="#" class="underline">导航栏项目一</a></li>
<li><a href="#" class="underline">导航栏项目二</a></li>
<li><a href="#" class="underline">导航栏项目三</a></li>
<li><a href="#" class="underline">导航栏项目四</a></li>
<li><a href="#">导航栏项目五</a></li>
</ul>
</dl>