它与超时效果一层菜单。
如果你正在寻找先进的脚本，请参阅多级下拉菜单的基础上简单的树型无序列表。
网上有很多的名称为“下拉菜单”的脚本。 有一天，我需要做我的网站这样的菜单。 我已经翻遍网站和档案馆与脚本的堆。 并没有发现什么我寻找。 在网络上的脚本上的两个变种共享。 第一 - 一钱不值脚本。 第二个 - 太复杂堆起来和收费。
我只是写了这个简单的脚本：
样品
这个菜单可以位于页面上的任何位置：
HTML代码
HTML代码是非常简单的，没有桌子。 它使用无序列表的菜单项和隐藏层靠近自己的父项。
父项和隐藏层具有唯一标识符。 此外，这些有事件处理onmouseover和onmouseout：
<ul id="sddm"> <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Home</a> <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">HTML/CSS</a> <a href="#">DHTML Menu</a> <a href="#">JavaScript</a> </div> </li> <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Download</a> <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">ASP Server-side</a> <a href="#">Pulldown navigation</a> <a href="#">AJAX Drop Submenu</a> <a href="#">DIV Cascading </a> </div> </li> <li><a href="#">Order</a></li> <li><a href="#">Help</a></li> <li><a href="#">Contact</a></li> </ul> <div style="clear:both"></div>
CSS代码
<li>标签有高高飞翔：左;声明。 sumbmenu层有能见度：隐藏;和位置：绝对的;锚标记设置为display：block;
其他的都是平常的装饰：
#sddm { margin: 0; padding: 0; z-index: 30} #sddm li { margin: 0; padding: 0; list-style: none; float: left; font: bold 11px arial} #sddm li a { display: block; margin: 0 1px 0 0; padding: 4px 10px; width: 60px; background: #5970B2; color: #FFF; text-align: center; text-decoration: none} #sddm li a:hover { background: #49A3FF} #sddm div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #EAEBD8; border: 1px solid #5970B2} #sddm div a { position: relative; display: block; margin: 0; padding: 5px 10px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; background: #EAEBD8; color: #2875DE; font: 11px arial} #sddm div a:hover { background: #49A3FF; color: #FFF}
JavaScript代码
此代码插入您的<head> </ head>标记之间。 期待您的意见的代码：
// Copyright 2006-2007 javascript-array.com var timeout = 500; var closetimer = 0; var ddmenuitem = 0; // open hidden layer function mopen(id) { // cancel close timer mcancelclosetime(); // close old layer if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; // get new layer and show it ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible'; } // close showed layer function mclose() { if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; } // go close timer function mclosetime() { closetimer = window.setTimeout(mclose, timeout); } // cancel close timer function mcancelclosetime() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null; } } // close layer when click-out document.onclick = mclose;
就是这样！ 所有你现在要做的就是添加一些hover样式，使你自己的。 享受！ 
如果你想在网页上使用此脚本，请将链接http://jav
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
