一个简单易用的下拉菜单

• 下载源代码 - 26.3 KB

引言

你在网上找到的大多数下拉菜单都不是免费的，而免费的那些则有很多缺点。它们可能消失得太快，有硬编码的布局，实现起来很费时间等等。我有一些不好的经历，因此决定写我自己的，我希望你会觉得有用。然而，这仍然是一个免费的菜单，可能不像那些你可以在网上购买的昂贵的菜单那样完美。

兼容性

我已经在 IE6+、Firefox 和 Opera 中测试过它。您遇到的大多数问题都与浏览器之间的 CSS 不兼容有关；代码本身非常简单，不应该导致任何问题。

背景

我的目标是创建一个灵活、易用且同时简单的下拉菜单，它可以水平、垂直工作，并且菜单项可以有不同的布局。我想要一些通用的东西，而不是带有肮脏黑客的代码。

现在，我们致力于不同的项目，不同的项目有不同的需求，因此布局通过 CSS 进行管理，而且还有一些可以被覆盖的函数。这提供了很大的灵活性，因为你可以改变菜单的显示方式；即，用户可以应用不同的效果（我在 zip 文件中包含了一个滚动效果）。

Accessibility

你的 JavaScript 组件易于访问非常重要，因此菜单本身是一个无序列表，这意味着即使你的样式表被禁用，你也可以毫无问题地查看它。此外，你可以使用 Tab 键和 Enter 键来浏览菜单。

使用代码

在你的 HTML 页面中包含 ddmenu.js 和 common.js 文件。common.js 包含通用函数，最重要的是，一个垃圾回收器，它在一定程度上解决了 JavaScript 的内存泄漏问题。

<script language="JavaScript" type="text/javascript" src="common.js"></script>
<script language="JavaScript" type="text/javascript" src="ddmenu.js"></script>

你还需要包含一个样式表来管理你的下拉菜单的布局。首先，包含来自 zip 文件中的样式表，称为 common.css 和 default_view.css。样式表可以在 styles 目录中找到。

<link rel="stylesheet" type="text/css" href="styles/common.css" media="screen" />
<link rel="stylesheet" type="text/css" href="styles/default_view.css" media="screen" />

创建一个无序列表，就像 zip 文件中的一个示例页面一样。对于每个子菜单，将类名设置为 default。default 表示菜单应该以样式表中定义的默认模式显示。在你的样式表中，你也可以创建不同的视图，并将菜单类名设置为任何新的视图名称。例如，示例中的视图 information。请注意，无序列表必须用一个 div 元素包裹，并且该 div 元素应该有一个 ID！

创建无序列表后，你需要在 HTML 页面顶部添加一些 JavaScript 代码

<script language="JavaScript" type="text/javascript">
<!-- 
// this all you have to do get your menu working! 
DHTML_Popup.DELAY = 300; 
DHTML_Popup.ID = "navigation"

//-->
</script>

DHTML_Popup.DELAY 告诉菜单显示或隐藏菜单的延迟时间，以毫秒为单位。DHTML_Popup.ID 是包裹所有菜单的 div 元素的 ID。代码会遍历 div 中的所有元素并执行它的操作。这就是你所要做的全部！

高级功能

正如我之前提到的，你可以覆盖函数来获得额外的功能。该菜单提供标记和一种自定义的显示和隐藏菜单的方式。

标记

要使用标记，必须覆盖两个函数 DHTML_Popup.mark 和 DHTML_Popup.unmark。参见下面的例子。

<script language="JavaScript" type="text/javascript">
<!-- 
// this all you have to do get your menu working! 
DHTML_Popup.DELAY = 300; 
DHTML_Popup.ID = "navigation"

// you can override some functions to implement marking of the path 
// item is a LI element in the menu 
DHTML_Popup.mark = function(item) {
    item.className = 'marked'; 
}

// have to use unmark otherwise marked elements are not going to be 
// reset
DHTML_Popup.unmark = function(item) {
    item.className = 'unmarked'; 
}
    
//-->
</script>

效果

你可以应用不同的效果来改变菜单呈现给用户的方式，与标记一样，必须覆盖打开和关闭函数。请注意，该过程更加复杂，因此我建议你查看源代码，如果你真的感兴趣的话。

<script language="JavaScript" type="text/javascript">
<!-- 
// this all you have to do get your menu working! 
DHTML_Popup.DELAY = 300; 
DHTML_Popup.ID = "navigation"

// you can write your own effects how menus are going to appear
// I have created a scrolling effect as a sample 
// 
// What you have to do is override two more functions 

// Do a scrolling in effect when menu has to be shown 
DHTML_Popup.custom_show = Scrolling.scroll_in; 

// Do a scrolling out effect when menu has to be hidden 
DHTML_Popup.custom_hide = Scrolling.scroll_out; 
    
//-->
</script>