下拉菜单制作（Chrome CSS Drop Down Menu (v2.5)）

HTML下拉菜单实现

最新推荐文章于 2025-11-30 11:13:07 发布

原创最新推荐文章于 2025-11-30 11:13:07 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#menu #chrome #css #alignment #animation #div

前台技术（技巧）专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的下拉菜单效果。通过简单的代码示例展示了如何创建带有下拉功能的导航栏，并提供了定制选项如对齐方式、延迟时间等。

原文：http://dynamicdrive.com/dynamicindex1/chrome/index.htm

htmld代码如下：

<div class="chromestyle" id="chromemenu"> <ul> <li><a href="http://www.dynamicdrive.com" mce_href="http://www.dynamicdrive.com">Home</a></li> <li><a href="#" mce_href="#" rel="dropmenu1">Resources</a></li> <li><a href="#" mce_href="#" rel="dropmenu2">News</a></li> </ul> </div>  <div id="dropmenu1" class="dropmenudiv"> <a href="http://www.dynamicdrive.com/" mce_href="http://www.dynamicdrive.com/">Dynamic Drive</a> <a href="http://www.cssdrive.com" mce_href="http://www.cssdrive.com">CSS Drive</a> <a href="http://www.javascriptkit.com" mce_href="http://www.javascriptkit.com">JavaScript Kit</a> </div>  <div id="dropmenu2" class="dropmenudiv" style="width: 150px;"> <a href="http://www.cnn.com/" mce_href="http://www.cnn.com/">CNN</a> <a href="http://www.msnbc.com" mce_href="http://www.msnbc.com">MSNBC</a> <a href="http://news.bbc.co.uk" mce_href="http://news.bbc.co.uk">BBC News</a> </div> <mce:script type="text/javascript"></mce:script>

代码讲解：

第一个div,"chromemenu"为memu bar,下面的几个div为下拉菜单。注意ID不能重复。

代码的下方有一段js代码，把chromemenu传给该js函数来启动该下拉菜单，若该页面中有

多个下拉菜单的话，直接把ID用逗号分开传给该js函数即可。

<mce:script type="text/javascript"><!--
cssdropdown.startchrome("chromemenu", "chromemenu2")
// --></mce:script>

For Your Information

You can easily set the alignment of the menu items. Inside chromestyle.css, find and edit the line:

text-align: center; /*set value to "left", "center", or "right"*/

At the top of "chrome.js", there are a few variables you may want to customize:

disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout
dropdownindicator: '<img src="down.gif" border="0" />', //specify full HTML to add to end of each menu item with a drop down menu
enablereveal: [true, 8], //enable swipe effect? [true/false, steps (Number of animation steps. Integer between 1-20. Smaller=faster)]
enableiframeshim: 1, //enable "iframe shim" in IE5.5 to IE7? (1=yes, 0=no)