无限下拉菜单json版

最新推荐文章于 2022-07-02 09:01:23 发布

danier_sky

最新推荐文章于 2022-07-02 09:01:23 发布

阅读量647

点赞数

分类专栏： javascript 文章标签： json function menu div url properties

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
#ss,#sss{
width:430px;
height:28px;
background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_1254192730G9x9.gif);
font-size:13px;
color:#FFFFFF;
}
.c{
width:140px;
height:auto;
border:1px solid #9C9A9C;
position:absolute;
background-color:#FFFFFF;
background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923146wVz.gif);
background-repeat:repeat-y;
padding:2px;
z-index:10;
}
.hr{
display:block;
overflow:hidden;
height:1px;
width:110px;
background-color:#666666;
margin:2px;
margin-left:26px;
}
#ss div,#sss div{
color:#FFFFFF;
height:28px;
width:80px;
float:left;
line-height:28px;
vertical-align:middle;
text-align:center;
}
#ss div.title,#sss div.title{
color:#1f3a87;
}
#ss div img,#sss div img{
vertical-align:text-bottom;
border:0px;
margin-right:5px;
padding-top:6px;
}
.l{
display:block;
height:26px;
width:99%;
color:#1f3a87;
font-size:12px;
line-height:26px;
vertical-align:middle;
margin:0 auto;
}
.disabled{
color:#999999;
}
.list{
*background-color:#FFFFFF;
border:1px solid transparent;
*border-color:white;
filter:chroma(color=white);
}
.bg{
*background-color:#FFFFFF;
border:1px solid transparent;
*border-color:white;
filter:chroma(color=white);
background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923132yyW.gif);
background-repeat:no-repeat;
background-position: 110px 4px;
}
.bg img,.list img,.disabled img{
vertical-align:text-bottom;
border:0px;
margin-right:10px;
padding-top:4px;
}
.listover{
border:1px solid #ADCFF7;
background-color:#EFF3FF;
}
.bgover{
border:1px solid #ADCFF7;
background-color:#EFF3FF;
background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923132yyW.gif);
background-repeat:no-repeat;
background-position: 110px 4px;
}
.bgover img, .listover img{
vertical-align:text-bottom;
border:0px;
margin-right:10px;
padding-top:4px;
}

</style>

</head>
<body style=" padding:30px; margin:0px;">

<br><br><br><br>
<div style="float:right">自动判断方向:
    <div id='sss'>
        <div><img src='http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282xH46.gif'>人族</div>
        <div><img src='http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282ddCJ.gif'>兽族</div>
        <div><img src='http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282DoV1.gif'>不死族</div>
        <div><img src='http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282xH46.gif'>精灵族</div>
    </div>
</div>
<br><br><br>

color:#1f3a87;
*background-color:#FFFFFF;
border:1px solid transparent;
*border-color:white;
filter:chroma(color=white);
margin:0 auto;
margin-top:2px;
margin-bottom:2px;
}
#right div img{
vertical-align:text-bottom;
border:0px;
margin-right:5px;
padding-top:6px;
}
#right div.title{
border:1px solid #ADCFF7;
background-color:#EFF3FF;
}
</style>
<div id='yy'>
</div>
<div id='right'>
  <div><img src="http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282ddCJ.gif">人族</div>
  <div><img src="http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282DoV1.gif">兽族</div>
  <div><img src="http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282xH46.gif">不死族</div>
  <div><img src="http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282ddCJ.gif">精灵族</div>
</div>
<script language="javascript">
document.all&&document.execCommand("BackgroundImageCache", false, true);
var Sys = {
IE : navigator.userAgent.toLowerCase().match(/msie ([/d.]+)/),
Firefox : navigator.userAgent.toLowerCase().match(/firefox//([/d.]+)/),
Chrome : navigator.userAgent.toLowerCase().match(/chrome//([/d.]+)/),
IE6 : navigator.userAgent.toLowerCase().match(/msie ([/d.]+)/) && ([/MSIE (/d)/.0/i.exec(navigator.userAgent)][0][1] == 6)
}
function $(Id){return document.getElementById(Id)};
function $$(p,e){return p.getElementsByTagName(e)};
function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};
function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)};
function create(elm,parent,fn){var element = document.createElement(elm);parent.appendChild(element);if(fn)fn(element);return element};
function getTarget(e){return e.srcElement||e.target;};
function getNext(e){ return e.relatedTarget||e.toElement;};
function getobjpos(el,left){
        var val = 0;
        while (el !=null) {
            val += el["offset" + (left? "Left": "Top")];
            el = el.offsetParent;
        }
        return val;
};
function fixEvent(event) {
if (event) return event;    //从cloudgamer中的代码中看到的觉得停好就拿来用了
//event = ((this.ownerDocument || this.document || this).parentWindow || window).event;
//var scrolldoc = isChrome || isSafari ? document.body : document.documentElement;
event = window.event;
event.pageX = event.clientX + document.documentElement.scrollLeft;
event.pageY = event.clientY + document.documentElement.scrollTop;
event.target = event.srcElement;
event.stopPropagation = fixEvent.stopPropagation;
event.preventDefault = fixEvent.preventDefault;
if(event.type == "mouseout") {
  event.relatedTarget = event.toElement;
}else if(event.type == "mouseover") {
  event.relatedTarget = event.fromElement;
}
return event;
};
fixEvent.preventDefault = function() {
this.returnValue = false;
};
fixEvent.stopPropagation = function() {
this.cancelBubble = true;
};
var CurrentStyle = function(element){return element.currentStyle || document.defaultView.getComputedStyle(element, null);};
var Bind = function(object, fun,args) {
return function() {
    return fun.apply(object,args||[]);
}
}
var BindAsEventListener = function(object, fun,arg) {
return function(event) {
   return fun.apply(object, [(event || window.event)].concat(arg||[]));
}
};
var Extend = function()
{
      var args = arguments;
      if(!args[1])args = [this,args[0]];
      for(var property in args[1])args[0][property] = args[1][property];
      return args[0];
};

var Class = function(properties){
   var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
   _class.prototype = properties;
   return _class;
};

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;
  }
}
});
var bg = null;
var img = ["http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282xH46.gif","http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282ddCJ.gif","http://beta.hi.csdn.net/attachment/200909/29/79043_1254192282DoV1.gif"]
window.onload = function(){
    var data = [
{txt:0,menu:[
  {ico:img[0],group:true,exist:true,txt:"大法师",menu:[
   {ico:img[1],group:false,exist:true,txt:"召唤水元素",menu:[
    {ico:img[2],group:false,exist:true,txt:"穿刺攻击"},{ico:img[0],group:false,exist:true,txt:"很强肉盾"},{ico:img[1],group:false,exist:true,txt:"对空对第"}
   ]},{ico:img[2],group:false,exist:true,txt:"强大暴风雪"},{ico:img[0],group:false,exist:true,txt:"辉煌光环"},{ico:img[1],group:false,exist:true,txt:"群体瞬间移动"}
  ]},
  {ico:img[2],group:false,exist:true,txt:"山丘之王",menu:[
   {ico:img[0],group:false,exist:true,txt:"风暴之锤"},{ico:img[1],group:false,exist:true,txt:"大铁锤敲地"},{ico:img[2],group:false,exist:true,txt:"35%几率锥晕"},{ico:img[0],group:false,exist:true,txt:"超级天神下凡"}
  ]},
  {ico:img[1],group:false,exist:true,txt:"圣骑士",menu:[
   {ico:img[2],group:false,exist:true,txt:"一束大光线"},{ico:img[0],group:false,exist:true,txt:"无敌就是无敌"},{ico:img[1],group:false,exist:true,txt:"专注光环啊"},{ico:img[2],group:false,exist:true,txt:"复活6个单位"}
  ]},
  {ico:img[0],group:false,exist:true,txt:"血法师",menu:[
   {ico:img[1],group:false,exist:true,txt:"一个燃烧蛋"},{ico:img[2],group:false,exist:true,txt:"吸蓝啊"},{ico:img[0],group:false,exist:true,txt:"虚无魔法加成"},{ico:img[1],group:false,exist:true,txt:"神鸟凤凰"}
  ]}
]},
{txt:1,menu:[
  {ico:img[2],group:false,exist:false,txt:"剑圣"},
  {ico:img[0],group:false,exist:false,txt:"先知"},
  {ico:img[1],group:false,exist:true,txt:"牛头人酋长"},
  {ico:img[2],group:false,exist:true,txt:"小YY"}
]},
{txt:2,menu:[
  {ico:img[1],group:false,exist:true,txt:"死亡骑士"},
  {ico:img[0],group:false,exist:true,txt:"巫妖"},
  {ico:img[2],group:false,exist:false,txt:"恐惧魔王"},
  {ico:img[1],group:false,exist:false,txt:"小强王子"}
]},
{txt:3,menu:[
  {ico:img[1],group:false,exist:true,txt:"丛林守护者"},
  {ico:img[0],group:false,exist:true,txt:"女祭祀(虎MM)"},
  {ico:img[2],group:false,exist:true,txt:"守望者(SM女王)"},
  {ico:img[1],group:false,exist:true,txt:"恶魔猎手",menu:[{ico:img[0],group:false,exist:true,txt:"燃烧法力"},
  {ico:img[2],group:false,exist:true,txt:"禁祭火焰羽衣"},
  {ico:img[1],group:false,exist:true,txt:"一定的几率躲避"},
  {ico:img[0],group:false,exist:true,txt:"变身强大恶魔",menu:[{ico:img[0],group:false,exist:true,txt:"远程攻击"},{ico:img[0],group:false,exist:true,txt:"多500点血"},{ico:img[0],group:false,exist:true,txt:"变的高大帅气"},{ico:img[0],group:false,exist:true,txt:"混乱攻击模式",menu:[{ico:img[0],group:false,exist:true,txt:"无视对方防御"},{ico:img[0],group:false,exist:true,txt:"无视各种护甲"}]}]}]}
]},
];
    var data1 = [
{exist:true,txt:0,menu:[
  {exist:true,txt:"大法师",menu:[
   {exist:true,txt:"召唤水元素",menu:[
    {exist:true,txt:"穿刺攻击"},{exist:true,txt:"很强肉盾"},{exist:true,txt:"对空对第"}
   ]},{exist:true,txt:"强大暴风雪"},{exist:true,txt:"辉煌光环"},{exist:true,txt:"群体瞬间移动"}
  ]},
  {exist:true,txt:"山丘之王",menu:[
   {exist:true,txt:"风暴之锤"},{exist:true,txt:"大铁锤敲地"},{exist:true,txt:"35%几率锥晕"},{exist:true,txt:"超级天神下凡"}
  ]},
  {exist:true,txt:"圣骑士",menu:[
   {exist:true,txt:"水元素"},{exist:true,txt:"暴风雪"},{exist:true,txt:"辉煌光环"},{exist:true,txt:"瞬间移动"}
  ]},
  {exist:true,txt:"血法师",menu:[
   {exist:true,txt:"水元素"},{exist:true,txt:"暴风雪"},{exist:true,txt:"辉煌光环"},{exist:true,txt:"瞬间移动"}
  ]}
]},
{exist:true,txt:1,menu:[
  {exist:true,txt:"剑圣"},
  {exist:true,txt:"先知"},
  {exist:true,txt:"牛头人酋长"},
  {exist:true,txt:"小YY"}
]},
{exist:true,txt:2,menu:[
  {exist:true,txt:"死亡骑士"},
  {exist:true,txt:"巫妖"},
  {exist:true,txt:"恐惧魔王"},
  {exist:true,txt:"小强王子"}
]},
{exist:true,txt:3,menu:[
  {exist:true,txt:"恶魔猎手"},
  {exist:true,txt:"丛林守护者"},
  {exist:true,txt:"女祭祀(虎MM)"},
  {exist:true,txt:"守望者(SM女王)"}
]},
];
new Menu($('right'),data,"div",{direction:"Y"});
new Menu($('ss'),data,"div",{direction:"X"});
new Menu($('sss'),data,"div");
new Menu($('tt'),data1,"div",{direction:"Y",c_style:"tc",l_style:"tl tlist",l_style1:"tl tlistover",l_bg_style:"tl tbg",l_bg_style1 : "tl tbgover"});
/*=======================================================================================================================*/
$('yy').oncontextmenu = $('right').oncontextmenu = function(e){fixEvent(e).preventDefault();};
$('yy').onselectstart = $('right').onselectstart = function(){return false;};
$('yy').onmouseup = function(e){$('right').style.display = "none";var e = fixEvent(e);e.stopPropagation();show(e)};
document.onmouseup = function(){$('right').style.display = "none"};

function show(e){
  if(e.button==1){$('right').style.display = "none";return;}
  if(e.button==2)
  {
   $('right').style.display = "block";
   $('right').style.top = e.pageY + "px";
   $('right').style.left = e.pageX + "px";
  }
}
}
</script>
</body>
</html>

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/wtcsy/archive/2009/04/26/4126916.aspx

danier_sky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
无限下拉菜单json版

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">#ss,#sss{width:430px;height:28px;background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541927
复制链接

扫一扫