非常好的一个Javascript下拉菜单

  作者:bea

最近做个项目需要使用一个菜单,下拉菜单那种,无奈发现菜单项太多,但项目时间很紧,从网上找了些菜单的实现,都不是很理想,主要是菜单项目太多了,而且总是那么多不自由,所以决定自己写个能够自由灵活使用的菜单,并且能容纳下尽可能多的菜单项。要容纳很多的菜单项(比如上百个,不能用做成树),不能做成纯粹下拉的,只能做成矩阵排列那种了。但同时为了灵活,所以采用DIV才装菜单项,可以自由做成自己想要的样子。 HTML代码如下: http://www.w3.org/TR/xhtml1/DT

最近做个项目需要使用一个菜单,下拉菜单那种,无奈发现菜单项太多,但项目时间很紧,从网上找了些菜单的实现,都不是很理想,主要是菜单项目太多了,而且总是那么多不自由,所以决定自己写个能够自由灵活使用的菜单,并且能容纳下尽可能多的菜单项。要容纳很多的菜单项(比如上百个,不能用做成树),不能做成纯粹下拉的,只能做成矩阵排列那种了。但同时为了灵活,所以采用DIV才装菜单项,可以自由做成自己想要的样子。

HTML代码如下:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">


无标题文档




菜单一
菜单内容菜单内容菜单内容一菜单内容菜单内容菜单内容一菜单内容菜单内容菜单内容一菜单内容菜单内容菜单内容一


菜单二


二级菜单
二级菜单
二级菜单
二级菜单

二级菜单


三级菜单
三级菜单
三级菜单
三级菜单
三级菜单







菜单三
菜单内容菜单内容菜单内容三



new Menu('nav');




Javascript代码如下:

function Menu(menu){
this.isIE = !!(window.attachEvent &&navigator.userAgent.indexOf('Opera') === -1);//判断是否是IE
this.y = function(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=this.y(e.offsetParent);
return offset;
}
this.x = function(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=this.x(e.offsetParent);
return offset;
}
this.$ = function(id){
return document.getElementById(id);
}
this.$$ = function(obj,name){
var rs = new Array();
var childNodes = obj.childNodes;
for(var i = 0 ;i

有用  |  无用

猜你喜欢