JavaScript 多级联动浮动(下拉)菜单 (第二版)【转】
效果预览
.container1 { height: 30px; }.container1 div { float: left; }.container1 div, .container1_2 div { width: 100px; background: none repeat scroll 0% 0% rgb(250, 252, 253); border: 1px solid rgb(92, 156, 192); padding: 10px; }div.on1 { font-weight: bold; background: none repeat scroll 0% 0% rgb(238, 243, 247); }div.on1_2 { font-weight: bold; background: none repeat scroll 0% 0% rgb(255, 255, 247); border: 1px solid rgb(255, 204, 0); }菜单使用演示：]
首先如果containers不是数组的话，程序会自动转成单元素数组。
如果菜单插入的元素就是容器元素本身，可以直接用容器元素(id)作为数组元素。
否则应该使用一个对象结构，它包括一个id属性表示是容器元素(id)和一个menu属性表示菜单插入的元素(id)。
containers会在程序初始化时这样处理：
]
其中id是菜单的唯一标识，parent是父级菜单的id。
除了这两个关键属性外，还可以包括以下属性：
rank:排序属性
elem:自定义元素
tag:生成标签
css:默认样式
hover:触发菜单样式
active:?显示下级菜单时显示样式
html:菜单内容
relContainer:是否相对容器定位（否则相对菜单）
relative:定位对象
attribute:自定义Attribute属性
property:自定义Property属性
其中relContainer和relative是用于下级容器定位的。
自定义菜单集合会保存在_custommenu属性中。
在程序初始化时会执行_buildMenu程序，根据这个_custommenu生成程序需要的_menus菜单对象集合。
_buildMenu是比较关键的程序，菜单的层级结构就是在这里确定，它由以下几步组成：
第一步，清除旧菜单对象集合的dom元素。
这一步后面“内存泄漏”会详细说明。
第二步，生成菜单对象集合。
为了能更有效率地获取指定id的菜单对象，_menus是以id作为字典关键字的对象。
首先创建带根菜单（id为“0”）对象的_menus：?
<!DOCTYPE?html>
<html>
<body?style="padding:1000px?0;">
<div?id="t1"?style="border:1px?solid;?width:100px;?height:100px;"></div>
<div?id="t2"></div>
<script>
var?$$?=?function?(id)?{
????return?"string"?==?typeof?id???document.getElementById(id)?:?id;
};
var?b?=?0;
window.onscroll=function(){
?var?t?=?$$("t1").getBoundingClientRect().top?+?document.documentElement.scrollTop;
?if(?t?!=?b?){?b?=?t;?$$("t2").innerHTML?+=?t?+?"<br>";?}
}
</script>
</body>
</html>
在除ie8外的浏览器，t会保持在一个固定值，但在ie8却会在1008和1009之间变换（用鼠标一格一格滚会比较明显）。
虽然多数时候还是标准的1008，但原来的效果可能就会被这1px的差距破坏（例如仿京东和仿淘宝的菜单）。
ps：chrome和safari要把documentElement换成body。
为了解决这个问题，只好在ie8的时候用回传统的offset来取值了（详细参考代码）。
至于造成这个问题的原因还没弄清楚，各位有什么相关资料的记得告诉我哦。
使用技巧
在仿京东商城商品分类菜单中，实现了一个阴影效果。
原理是这样的：
底部是一个灰色背景层（阴影），里面放内容层，然后设置内容层相对定位（position:relative），并做适当的偏移（left:-3px;top:-3px;）。
由于相对定位会保留占位空间，这样就能巧妙地做出了一个可自适应大小的背景层（阴影）。
ps：博客园首页也做了类似的效果，但貌似错位有些严重哦。
仿右键菜单效果并不支持opera，因为opera并没有类似oncontextmenu这样的事件，要实现的话会很麻烦。
ps：如果想兼容opera的话，可以看看这篇文章“Opera下自定义右键菜单的研究”。
注意，在oncontextmenu事件中要用阻止默认事件（preventDefault）来取消默认菜单的显示。
这个效果还做了一个不能选择的处理，就是拖动它的内容时不会被选择。
在ff中把样式-moz-user-select设为none就可以了，而ie、chrome和safari通过在onselectstart返回false来实现相同的效果。
ps：css3有user-select样式，但貌似还没有浏览器支持。
当然，还有很多不完善的地方，这里只是做个参考例子，就不深究了。
仿淘宝拼音索引菜单主要体现了a