JavaScript悬浮层树结构菜单实现与注意事项

156 浏览量更新于2024-09-03 收藏 119KB PDF 举报

本文主要讨论了JavaScript实现的几种树结构菜单形式，其中重点介绍了悬浮层树（Tree）的设计与实现方法。悬浮层树模拟面包屑导航功能，通过监听节点鼠标移动事件，在节点下方或右侧显示子节点，形成递归显示。这种实现方式要求在IE浏览器中特别注意层叠上下文（Stacking Context）的问题，特别是在处理绝对定位的悬浮层时，必须将其置于`<body>`元素之下以确保能够遮蔽其他浮动层，例如可能会出现遮挡`<select>`元素的情况。在实现中，为了进一步控制和管理多个层级的菜单，每个悬浮层后面都会附加一个`<iframe>`元素，以此来控制菜单的可见性。这种方法适用于后端动态添加菜单节点，但不适用于前端HTML元素，因为不能从已存在的元素获取菜单。对于SEO优化和用户体验，菜单通常建议不超过两层，因为过多的层级可能让用户感到不便，而面包屑导航则可以提供清晰的层次指引。作者Jonllen在2009年创建并维护了一个名为`Menu.js`的库，用于构建和管理树形菜单。该库包含一个`Menu`构造函数和`Menu.prototype`对象，后者定义了菜单的基本属性如列表、活动状态、iframe数组以及设置项，包括ID、父ID、名称、URL、层级、CSS样式等。`push`方法用于向菜单列表中添加新的菜单项，并且能够处理数组输入。下面是关键代码片段： ```javascript var Menu = function(container) { this.container = container; return this; }; Menu.prototype = { list: [], active: [], iframes: [], settings: { id: null, parentId: 0, name: null, url: null, level: 1, parent: null, children: null, css: null, element: null }, push: function(item) { // ...此处添加菜单项到列表逻辑 } }; ``` 本文提供了一种实用的JavaScript方法来创建动态树状菜单，并强调了在不同浏览器中的兼容性和前端开发的局限性。通过`Menu.js`库，开发者可以轻松地构建和管理具有多级结构的树形菜单，以满足网站导航的需求。

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){

剩余12页未读，继续阅读

weixin_38721652

粉丝: 3
资源: 935

JavaScript悬浮层树结构菜单实现与注意事项

利用javascript编写的树形菜单。

JavaScript实现树形菜单

javaScript实现树形结构

JavaScript递归算法生成树形菜单

用Javascript写一个树形菜单

使用javaScript编写一个只获取树结构的叶子节点的方法

js 树结构数据获取父节点

js将一个树结构合并入数组树结构，只保留树结构中不同的元素，返回合并后的数组树结构

jquery 树形菜单

javascript点击下拉菜单出现子菜单

最新资源