写了个简单的下拉菜单 看看

Question

可以点这里看效果
代码var Menu = new Class({
options:{ 
h_style     : "title",
    c_style     : "c",             //列表容器样式
l_style     : "l list",        //列表样式
l_style1    : "l listover",    //鼠标放上去后的列表样式
l_bg_style  : "l bg",          //有子菜单时候的背景
l_bg_style1 : "l bgover",      //有子菜单时鼠标放上去的样式
l_disabled  : "l disabled",   //设置不能选中时的样式
l_hr        : "hr",           //分行符的样式
direction : "X"
},
initialize : function(container,data,elm,options){
this.container = container;  //设置容器
this.data      = data;       //数据
this.elm       = elm;       //设置list是什么元素 可以是div 也可以是a 也可以是其他
this.stack     = [];        //元素堆栈 看哪些元素已经存在了
this.obj       = null;      //记录哪一项被选种过
this.lists     = [];        //为查找元素而记录元素 
Extend(this.options,options||{});
Extend(this,this.options);
 var elm = this.container.getElementsByTagName(this.elm);
 for(var i=0,l=elm.length;i<l;i++)
 {
 if(this.data[i].txt == i)
 {
 addListener(elm[i],'mouseover',BindAsEventListener(this,this.Title,[this.data[i],elm[i]]));
 addListener(elm[i],'mouseout',BindAsEventListener(this,this.Hide));
 }
 }
},
Title : function(e,d,obj){
this.obj = obj;
obj.className = this.h_style;
if(!d.menu)return;
var container = this.Makebody(d,obj);
if(this.direction=="X")
{
container.style.left = getobjpos(obj,1) + "px";
container.style.top  = obj.offsetHeight + getobjpos(obj,0) + "px";
}
else
{
container.style.left = getobjpos(obj,1)+obj.offsetWidth + "px"
container.style.top  = getobjpos(obj,0) + "px";
}

},
Makemenu : function(e,d,obj){
this.mouseover(obj);
if(!d.menu)return;
var container = this.Makebody(d,obj);
container.style.left = this.pos(obj,container,"X")?(getobjpos(obj,1)+ obj.offsetWidth+ "px"):(getobjpos(obj,1) - container.offsetWidth + 2 + "px");
container.style.top = this.pos(obj,container,"Y")?(getobjpos(obj,0) + "px"):(getobjpos(obj,0) - container.offsetHeight+2+20+"px");
},
Makebody : function(d,obj){
if(!obj.getAttribute('container')){
var _self = this;
var container = create('div',document.body,function(o){o.className = _self.c_style;});
container.onmouseup = function(e){fixEvent(e).stopPropagation();fixEvent(e).preventDefault();}
}
else
{
var container = this.lists[parseInt(obj.getAttribute('container'))-1];
container.style.display = "block";
this.resetstyle(container,d);
}
this.stack.push(container);
if(!obj.getAttribute('container'))
{
addListener(container,"mouseout",BindAsEventListener(this,this.Hide));
this.lists.push(container)
obj.setAttribute("container",this.lists.length);
var Item  = null, _self = this;
for(var i = 0,l = d.menu.length;i<l;i++)
{
(function(i){Item = create("div",container,function(o){
if(d.menu[i].ico){o.innerHTML = "<img src = '"+d.menu[i].ico+"'>";}
with(o){innerHTML = innerHTML+d.menu[i].txt; 
setAttribute("menu",d.menu[i].menu?"true":"false");
className = d.menu[i].menu?_self.l_bg_style:_self.l_style;
 }
})})(i);
if(d.menu[i].group)create("span",container,function(o){o.className = _self.l_hr});
if(!d.menu[i].exist){Item.className = _self.l_disabled;continue;};
addListener(Item,"mouseover",BindAsEventListener(this,this.Makemenu,[d.menu[i],Item]));
addListener(Item,"mouseout",BindAsEventListener(this,this.Hide,[Item]));
Item.oncontextmenu = function(e){fixEvent(e).stopPropagation();fixEvent(e).preventDefault();}
Item.onmouseup = function(e){fixEvent(e).stopPropagation();fixEvent(e).preventDefault();}
}
}
else
{
this.lists[parseInt(obj.getAttribute('container'))-1].style.display = "block";
}
return container;
},
Hide : function(e,o){
o&&this.contains(o.parentNode,getNext(e))&&this.mouseout(e,o);
var exist = false; 
for(var index = 0,l = this.stack.length;index<l;index++)
{
if(this.contains(this.stack[index],getNext(e))){exist = true;break;}
};
if(exist)
{
for(var i = index + 1;i<this.stack.length;i++)
{this.stack[i].style.display = "none";}
this.stack.length = index + 1;
}
else
{
for(var i = 0;i<this.stack.length;i++)
{this.stack[i].style.display = "none";}
this.stack.length = 0;
}
if(this.stack.length == 0)this.obj.className = "";
},
mouseover : function(obj){
for(var i=0,l=$$(obj.parentNode,this.elm).length;i<l;i++)
{
if($$(obj.parentNode,this.elm)[i].className ==this.l_disabled)continue;
$$(obj.parentNode,this.elm)[i].className = $$(obj.parentNode,this.elm)[i].getAttribute("menu")=="true"?this.l_bg_style:this.l_style;
}
if(obj.className == this.l_disabled)return;
obj.className = obj.getAttribute("menu")=="true"?this.l_bg_style1:this.l_style1
},
mouseout : function(e,obj){
if(obj.className == this.l_disabled)return;
obj.className = obj.getAttribute("menu")=="true"?this.l_bg_style:this.l_style;
},
    contains: function(parent,child){
if(!parent||!child)return false;
        if(parent == child) return true;
return Sys.IE?parent.contains(child):(parent.compareDocumentPosition(child)==20)?true:false;
return false;
    },
Bubble : function(e){
fixEvent(e).stopPropagation();
},
Stopdefault : function(e){
fixEvent(e).preventDefault();
},
pos : function(o,w,arg){
//判断位置的计算方式
if(arg=="X")
{
var xx = Sys.Chrome?document.body.clientWidth:document.documentElement.clientWidth;
return (xx -getobjpos(o,1)-o.offsetWidth-5)>w.offsetWidth;
}
else
{
var xx = Sys.Chrome?document.body:document.documentElement;
return (xx.clientHeight -getobjpos(o,0)+xx.scrollTop+o.offsetHeight-5)>w.offsetHeight;
}
},
resetstyle : function(c,d){
for(var i=0,l=$$(c,this.elm).length;i<l;i++)
{
$$(c,this.elm)[i].className = this.l_style; 
if(d.menu[i].menu)$$(c,this.elm)[i].className  = this.l_bg_style;
if(!d.menu[i].exist)$$(c,this.elm)[i].className = this.l_disabled;
}
}
});</script>
</body>
</html>

Answer 1

~jF  上次ie6垂直居中问题还是文字往下移动来解决?

Answer 2

to s_liangchao1s 样式有一半是在csdn上问出来的 嘿嘿to hookee
不是
*background-color:#FFFFFF;
border:1px solid transparent;
*border-color:white;
filter:chroma(color=white);

Answer 3

to BeenZ  须左之男=.= 绝对防御术 何解？？
to sohighthesky  你是没注意看 很多细节我都没注意  哈哈
to Free_Wind22   同上...................
to foolbirdflyfirst 平滑？？  何解？？？ 

Answer 4

很久没来.一来就看到不错的作品哦.
为啥BLOG里写着很纠结?

Answer 5

加个鼠标样式:
cursor:default或者hand
屏蔽一下文字编辑的鼠标吧...

Answer 6

to natineprince 恩   很久没看到你了..........
作为一个正常的80后  纠结是正常的...............to bing475879749  并不长噢
如果只是最简单的无限下拉菜单  100行js就足够了
但是加入  换肤 位置判断  生成方式   代码自然会变长
(以前的生成方式是 不断的  生成 和删除 这样可能会导致内存泄露   现在是第一次生成 剩下的时候显示 隐藏 但是还得判断位置)
如果你能写短的 我好学习学习.........