JavaScript几种形式的树结构菜单
2024-05-06 14:10:07
供稿：网友
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: http://www.jonllen.com/
*/
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="'+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 ) {
