横向展开菜单(JSON数据源，只兼容IE8

 首页 > 网页特效 > 菜单特效 > 横向展开菜单(JSON数据源，只兼容IE8

横向展开菜单(JSON数据源，只兼容IE8

 2018-07-09  460  收藏  0 赞一个  0 真差劲  0 去评论

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=8">
        <style>
          body{background:#181818}
          .holder{background:#fff;padding:10px;position:absolute;visibility:hidden}
          .holder .item{border:1px solid #666;white-space:nowrap;position:relative;font-size:12px;padding:4px;margin-top:-1px}
          .item > span{display:block;padding:4px;border:1px solid transparent;padding-right:20px}
          .item.hover > span,.item:hover > span{;border:1px solid #c30;border-width:1px;background:#fafafa;cursor:pointer;text-decoration:underline}
          .item .canExpand{}
          .item.hover,.item:hover .canExpand{}
          
          .item dl,.item dt,.item dd{padding:0;margin:0}
          .item dl{width:300px;overflow:hidden;display:block;line-height:1.8}
          .item dt{color:#c30}
		  .item dt,.item dd{display:inline-block;vertical-align:top}
		  .item dt{margin-right:8px;cursor:pointer}
		  .item dd{white-space:normal;width:246px}
		  .item .sub-box{border:1px solid #C30;position:absolute;background:#FFF;top:-4px;background:#fafafa;padding:10px;display:none}
		  .item .sub-box .aCover{position:absolute;border-left:1px solid #fafafa;left:-1px;top:8px;height:23px}
		  .item.hover .sub-box{display:block;z-index:10;left:100%}
		  .item:hover .sub-box{display:block;z-index:10;left:100%}
		  .item .sub-box em{border-left:1px solid #CCC;font-style:normal;padding:0 8px;margin:4px 0;line-height:14px;height:14px;display:inline-block;cursor:pointer}
		  .item .sub-box em.noclick{cursor:text}
		  .item .sub-box dl{border-top:1px solid #FFEFD7}
		  .item .sub-box dl.fore{border-top:none}
        </style>
        <title>jsMenu</title>
        <script type="text/javascript">
			var data = [{
				text:"测试",
				value:"a string"
			},{
                text: "笔记本",
                value: "1",
                child: [{
                    text: "笔记本",
                    value: "11",
                }, {
                    text: "上网本",
                    value: "12"
                }]
            }, {
                text: "手机通信",
                value: "2",
                child: [{
                    text: "智能手机",
                    title: "智能手机",
                    value: "21",
					child:[{text:"诺基亚",value:"Nokia"},{text:"三星",value:"Samsung"},{text:"索尼爱立信",value:"SE"}]
                }, {
                    text: "GSM手机",
                    title: "GSM",
                    value: "22"
                }]
            }, {
                text: "电脑产品",
                title: "",
                value: "3",
                child: [{
                    text: "主机硬件",
                    title: "CPU,主板",
                    value: "31",
                    child:[{
                      text:"CPU",
                      title:"INTEL,AMD",
                      value:"311"
                    },{
                      text:"硬盘",
                      title:"希捷,日立",
                      value:"312"
                    }]
                }, {
                    text: "外设产品",
                    title: "显示器 键盘鼠标",
                    value: "32"
                }]
            }];
		function buildMenu(ele,dat,_fun,canClickChild){
            function buildNode(str){
              function _$(str){
                if((typeof str) == "object")this.ele=str;
                else this.ele=document.createElement(str);
              }
              _$.prototype={
                say:function(str){alert(str)},
                append:function(obj){
                  this.ele.appendChild(obj.ele?obj.ele:obj);
                  return this;
                },
                appendTo:function(obj){
					
                  if(obj.appendChild)obj.appendChild(this.ele);
				  if(obj.ele && obj.ele.appendChild)obj.ele.appendChild(this.ele);
                  return this;
                },
                addEvent:function(evt,func){
                if(this.ele.addEventListener){
                  this.ele.addEventListener(evt,func,false);
                }else if(this.ele.attachEvent){
                  this.ele.attachEvent("on"+evt,function(evt){
					var e = evt || window.event
                    func.call(e.srcElement||e.target,e);
                  })
                }else{
                  this.ele["on"+evt]=func;
                }
                return this;
              },
                html:function(str){
                  if(!str){return this.ele.innerHTML}
                  else this.ele.innerHTML=str;
                  return this;
                },
                css:function(a,b){
                  if(a instanceof Object){
                    for(var x in a){
                      this.ele.style[x]=a[x];
                    }
                  }else{
                    this.ele.style[a]=b;
                  }
                  return this;
                },
				hover:function(a,b){
					this.addEvent("mouseenter",a);
					this.addEvent("mouseleave",b);
					return this;
				},
                attr:function(a,b){  
                  if(a instanceof Object){  
                    for(var x in a){  
                      this.ele.setAttribute(x,a[x]);  
                    }
                 }else{
                  this.ele.setAttribute(a,b);  
                  }
                  return this;
                }
              }
              return new _$(str);
            }
            var buildSub = function(data){
              var undefined;
              var box = buildNode("div").attr("class","sub-box").append(buildNode("div").attr("class","aCover"));
              for(var i=0,z=data.length;i<z;i++)
              {
                var dl = buildNode("dl");
				if(i==0)dl.attr("class","fore");
                var dt = buildNode("dt").html(data[i].text).attr("value",data[i].value).appendTo(dl);
                if(data[i].child){
                  var dd = buildNode("dd");
                  for(var j=0,k=data[i].child.length;j<k;j++){
                      if(canClickChild===false){
                        dd.append(buildNode("em").html(data[i].child[j].text).attr("class","noclick"));
                      }else{
                        dd.append(buildNode("em").html(data[i].child[j].text).attr("value",data[i].child[j].value));
                      }
                  }
                  dd.appendTo(dl);
                }
                dl.appendTo(box);
              }
              return box;
            }
            var buildOut = function(data,handle){
              
              var box = buildNode("div").addEvent("click",function(e){
                   if(e.stopPropagation){
                    e.stopPropagation();
                   }else{
                    e.cancelBubble = true;
                   }
					var __target = e.target ? e.target : this;
                    if (__target.getAttribute("value")) {
                        handle(__target.getAttribute("value"),__target.innerText?__target.innerText:__target.textContent);
                        hideMenu();
                    } else {
                        return;
                    }
					var parent=this;
					while(parent.parentNode!=null&&parent.getAttribute("class")!="item"){
						if (parent.getAttribute("class")=="item hover")break;
						if(parent.parentNode.setAttribute){
                            parent = parent.parentNode;
                        }else{
                            break;
                        }
					}
					parent.setAttribute("class","item");
				});
				//box.css("position","absolute")
				//box.ele.onclick=function(){this.parentNode.style.visibility='hidden';this.parentNode.removeChild(this)}
              for(var i=0,z=data.length;i<z;i++)
              {
                var item_span = buildNode("span").html(data[i].text).attr("value",data[i].value);
                var item = buildNode("div").attr("class",'item').css({"position":"relative"}).append(item_span).appendTo(box);
                if(data[i].child){
					item.append(buildSub(data[i].child)).hover(function(){
						buildNode(this).attr("class","item hover");
						this.querySelector(".sub-box").style.left = this.querySelector("span").offsetWidth-1
					},function(){
						buildNode(this).attr("class","item");
					});
                    item_span.attr("class",'canExpand');
				}
              }
              return box.ele;
            }
			
			var target = document.getElementById(ele);
			function hideMenu() {
                if (!window.buildMenu.target) return;
                window.buildMenu.target.innerHTML = "";
                window.buildMenu.target.style.visibility = 'hidden';
                window.buildMenu.target = null;
                document.documentElement.detachEvent("onclick", hideMenu);
            }
            if (window.buildMenu.target) hideMenu()
            window.buildMenu.target = target;
            target.innerHTML = "";
            target.style.visibility = 'visible';
            target.appendChild(buildOut(dat, _fun));
			 if(Event.stopPropagation){Event.stopPropagation()}else{window.event.cancelBubble = true;}
            //document.documentElement.attachEvent("onclick", hideMenu);
            buildNode(document.documentElement).addEvent("click",hideMenu);
		}
			//处理返回值函数1
			function cbkhdl1(v){
				document.getElementById("fortest").innerHTML = v;
			}
			//处理返回值函数2
			function cbkhdl2(v){
				alert(v);
			}
        </script>
    </head>
    <body>
        中文
		<div>
		<table width="300" bgcolor="ffffff" border="1">
		<tr>
			<td width='60'><input type="button" onclick="buildMenu('hd1',data,cbkhdl1,false)" value="选择物品" /></td>
			<td><div id='hd1' class='holder'></div></td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td><input type="button" onclick="buildMenu('hd2',data,cbkhdl2)" value="选择物品" /></td>
			<td id='hd2'class='holder'>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		</table>
		
		</div>
        <div id="holder">
        </div>
		<div id="fortest" style="background:#FFF;clear:both">
		Initialized
		</div>
		<div style='background:#FFF;clear:both'>
		调用方式 onclick="buildMenu('hd1',data,cbkhdl1,false)"<br>
		buildMenu(容器id,json数据格式,点击处理返回值函数,最后一级是否可点击)
		</div>

		<!-- 以下与演示代码无关,使用时请移除. --> 
	<style type="text/css">
	#azz_discription{ width:600px; height:auto; border:1px dashed #CCC; margin:0 auto; padding:10px;}
	#azz_discription p{ line-height:25px;}
	</style>
	<div style="height:20px;"></div>
	<div id="azz_discription">
	<p style="text-align:center;">来源：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a>　代码整理：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a></p>
	<p>&hearts;尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
	</div>

<!-- 以上与演示代码无关,使用时请移除. --> 


    </body>
</html>

运行代码 全选代码 复制代码 清除代码 恢复代码

预览图片

横向展开菜单(JSON数据源，只兼容IE8，buildMenu(容器id,json数据格式,点击处理返回值函数,最后一级是否可点击) 。记得京东商城有此类效果，这个虽然简易，不过展现了核心代码，在兼容性方面，可能还有些不足，也希望高手继续挖掘一下，修正完善。

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。

三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！

四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.

五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源，请注明转载来自并附带链接

七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com

 大家评论

 站长推荐

 点击排行