几款实用的下拉菜单

最新推荐文章于 2020-05-28 11:33:06 发布
江林子
最新推荐文章于 2020-05-28 11:33:06 发布
阅读量735
点赞数
分类专栏： JavaScript 文章标签： javascript 动态菜单 js动态效果
本文链接：https://blog.csdn.net/xiaogechengxuyuan/article/details/9348847
版权
JavaScript 专栏收录该内容
12 篇文章 0 订阅
订阅专栏
<html>
<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;">
<div id='ss'>
        <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>
<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>
<style type="text/css">
#tt{
height:auto;
width:144px;
border:1px solid #9C9A9C;
}
#tt div{
height:25px;
width:135px;
margin:2px;
font-size:12px;
line-height:25px;
vertical-align:middle;
padding-left:5px;
background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923132KUt.png);
}
#tt div.title{
 background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923138NPD.png);
 color:#FFFFFF;
}
.tc{
width:144px;
height:auto;
border:1px solid #9C9A9C;
position:absolute;
background-color:#FFFFFF;
z-index:10;
}
.tl{
display:block;
height:25px;
width:135px;
font-size:12px;
line-height:25px;
vertical-align:middle;
margin:0 auto;
margin-top:2px;
margin-bottom:2px;
padding-left:5px;
}
.tlist{
 color:#000000;
 background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_1254192313Jzrd.png);
}
.tlistover{
 background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_1254192314VvN6.png);
 color:#FFFFFF;
}
.tbg{
 color:#000000;
 background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923132KUt.png);
}
.tbgover{
 background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923138NPD.png);
 color:#FFFFFF;
}
</style>
<div id='tt'>
 <div>人族</div>
 <div>兽族</div>
 <div>不死族</div>
 <div>精灵族</div>    
</div>
<br><br><br><br><br><br><br>
右键菜单:::
<br>
<style type="text/css">
#yy{
height:300px;
width:750px;
border:1px solid #FF0000;
}
#right{
width:144px;
height:auto;
border: 1px solid #999999;
display:none;
position:absolute;
background-image:url(http://beta.hi.csdn.net/attachment/200909/29/79043_12541923146wVz.gif);
 background-color:#FFFFFF;
 background-repeat:repeat-y;
}
#right div{
 font-size:12px;
 height:28px;
 width:135px;
 line-height:28px;
 vertical-align:middle;
 padding-left:5px;
 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>