期待您的意见的代码：

最新推荐文章于 2024-11-14 11:00:00 发布

原创最新推荐文章于 2024-11-14 11:00:00 发布 · 480 阅读

0 ·

CC 4.0 BY-SA版权

它与超时效果一层菜单。

如果你正在寻找先进的脚本，请参阅多级下拉菜单的基础上简单的树型无序列表。

网上有很多的名称为“下拉菜单”的脚本。有一天，我需要做我的网站这样的菜单。我已经翻遍网站和档案馆与脚本的堆。并没有发现什么我寻找。在网络上的脚本上的两个变种共享。第一 - 一钱不值脚本。第二个 - 太复杂堆起来和收费。

我只是写了这个简单的脚本：

样品

这个菜单可以位于页面上的任何位置：

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样式，使你自己的。享受！