1.悬浮层树(Tree)
这种树结构实现类似面包屑导航功能，监听的是节点鼠标移动的事件，然后在节点下方或右方显示子节点，依此递归显示子节点的子节点。
用户首页博客设置文章相册留言评论系统
这里要注意几个小问题，其一这种树结构是悬浮层绝对定位的，在创建层的时候一定要直接放在body的下面，这样做的是确保在IE里面能遮掩住任何层，因为在IE里面是有stacking context这种东西的潜规则在里面的，另外当然还有一个select你能遮住我吗？老掉牙的问题，这里是采用在每个悬浮层后面加个iframe元素，当然同一级的菜单只产生一个iframe元素，菜单有几级将产生几个iframe遮掩，然后菜单显示和隐藏的时候同时显示和隐藏iframe。
不过这种菜单并不合适前台，因为目前只支持在脚本里动态添加菜单节点，而不能从现有的html元素获取菜单节点，我们为了SEO等前台导航一般是在后台动态输出的，假如菜单有多级的话也建议不超过2层，对客户来说太多层也懒得去看，不过有个面包屑导航显示还是很不错的。
menu.js
复制代码 代码如下:
/*
** Author : Jonllen
** Create : 2009-12-13
** Update : 2010-05-08
** SVN : 152
** WebSite:
*/
var Menu = function (container) {
this.container = container;
return this;
}
Menu.prototype = {
list : new Array(),
active : new Array(),
iframes : new Array(),
settings : {
id : null,
parentId : 0,
name : null,
url : null,
level : 1,
parent : null,
children : null,
css : null,
element : null
},
push : function (item) {
var list = Object.prototype.toString.apply(item) === '[object Array]' ? item : [item];
for( var i=0; i< list.length; i++) {
var settings = list[i];
for( p in this.settings) {
if( !settings.hasOwnProperty(p) ) settings[p] = this.settings[p];
}
this.list.push(settings);
}
return this;
},
getChlid : function (id) {
var list = new Array();
for( var i=0;i < this.list.length; i++)
{
var item = this.list[i];
if( item.parentId == id)
{
list.push(item);
}
}
return list;
},
render : function (container) {
var _this = this;
var menuElem = container || this.container;
for( var i=0;i < this.list.length; i++)
{
var item = this.list[i];
if ( item.parentId != 0 ) continue;
var itemElem = document.createElement('div');
itemElem.innerHTML = '<a href="'https://www.jb51.net/+item.url+'">'+item.name+'</a>';
itemElem.className = 'item';
if ( item.css ) itemElem.className += ' '+item.css;
var disabled = (' '+item.css+' ').indexOf(' disabled ')!=-1;
if ( disabled ) {
itemElem.childNodes[0].disabled = true;
itemElem.childNodes[0].className = 'disabled';
itemElem.childNodes[0].removeAttribute('href');
}
if ( (' '+item.css+' ').indexOf(' hidden ')!=-1 ) {
itemElem.style.display = 'none';
}
itemElem.menu = item;
itemElem.menu.children = this.getChlid(item.id);
itemElem.onmouseover = function (e){
_this.renderChlid(this);
};
menuElem.appendChild(itemElem);
}
document.onclick = function (e){
e = window.event || e;
var target = e.target || e.srcElement;
if (!target.menu) {
var self = _this;
for( var i=1;i<_this.active.length;i++) {
var item = _this.active[i];
var menuElem = document.getElementById('menu'+item.id);
if ( menuElem !=null)
menuElem.style.display = 'none';
}
for(var j=1;j<_this.iframes.length;j++){
_this.iframes[j].style.display = 'none';
}
}
};
},
renderChlid : function (target){
var self = this;
var item = target.menu;
var activeItem = self.active[item.level];
while(activeItem) {
var activeItemElem = activeItem.element;
if ( activeItemElem!= null ) activeItemElem.style.display = 'none';
activeItem = self.active[activeItem.level + 1];
}
self.active[item.level] = item;
var level = item.level;
while(this.iframes[level]) {
this.iframes[level].style.display = 'none';
level++;
}
var childElem = document.getElementById('menu'+item.id);
if (childElem==null) {
var hasChild = false;
for( var j=0;j<item.children.length;j++) {
if( (' '+item.children[j].css+' ').indexOf(' hidden ') == -1) {
hasChild = true;
break;
}
}
if( hasChild) {
var xy = self.elemOffset(target);
var x = xy.x;
var y = target.offsetHeight + xy.y;
if ( item.level >= 2 )
{
x += target.offsetWidth - 1;
y -= target.offsetHeight;
}
childElem = document.createElement('div');
childElem.id = 'menu'+item.id;
childElem.className = 'child';
childElem.style.position = 'absolute';
childElem.style.left = x + 'px';
childElem.style.top = y + 'px';
childElem.style.zIndex = 1000 + item.level;
for( var i=0;i < item.children.length; i++)
{
var childItem = item.children[i];
var childItemElem = document.createElement('a');
var disabled = (' '+childItem.css+' ').indexOf('disabled')!=-1;
if ( disabled ) {
childItemElem.disabled = true;
childItemElem.className += ' '+childItem.css;
}else {
childItemElem.href = childItem.url;
}
if ( (' '+childItem.css+' ').indexOf(' hidden ')!=-1 ) {
childItemElem.style.display = 'none';
}
childItemElem.innerHTML = childItem.name;
childItemElem.menu = childItem;
childItemElem.menu.children = self.getChlid(childItem.id);
var hasChild = false;
for( var j=0;j<childItemElem.menu.children.length;j++) {
if( (' '+childItemElem.menu.children[j].css+' ').indexOf(' hidden ') == -1) {
hasChild = true;
break;
}
}
if( hasChild ) {
childItemElem.className += ' hasChild';
}
childItemElem.onmouseover = function (e) {
self.renderChlid(this)
};
childElem.appendChild(childItemElem);
}
document.body.insertBefore(childElem,document.body.childNodes[0]);
item.element = childElem;
}
}
if( childElem!=null) {
var iframeElem = this.iframes[item.level];
if ( iframeElem == null) {
iframeElem = document.createElement('iframe');
iframeElem.scrolling = 'no';
iframeElem.frameBorder = 0;
iframeElem.style.cssText = 'position:absolute; overflow:hidden;';
document.body.insertBefore(iframeElem,document.body.childNodes[0]);
this.iframes[item.level]=iframeElem;
}
childElem.style.display = 'block';
iframeElem.width = childElem.offsetWidth;
iframeElem.height = childElem.offsetHeight;
iframeElem.style.left = parseInt(childElem.style.left) + 'px';
iframeElem.style.top = parseInt(childElem.style.top) + 'px';
iframeElem.style.display = 'block';
}
},
elemOffset : function(elem){
if( elem==null) return {x:0,y:0};
var t = elem.offsetTop;
var l = elem.offsetLeft;
while( elem = elem.offsetParent) {
t += elem.offsetTop;
l += elem.offsetLeft;
}
return {x : l,y : t};
}
};
演示地址
打包下载地址
2.右键菜单树(ContextMenu)
自定义右键菜单(ContextMenu)和悬浮层树(Tree)其实现上都大同小异，都是在脚本里动态添加节点，然后在生成一个绝对定位层，只不过右键菜单树(ContextMenu)触发的事件不一样。另外右键菜单还需要提供一个动态添加菜单项功能，以实现右击不同的元素可以显示不同的右键菜单，我这里提供一种"回调函数"，使用见如下代码：
ContextMenu回调函数
复制代码 代码如下: