橫向展開菜單(JSON數據源，只兼容IE8)

2024-09-05 12:20:47

字體：大中小

來源：轉載

供稿：網友

橫向展開菜單(JSON數據源，只兼容IE8，buildMenu(容器id,json數據格式,點擊處理返回值函數,最后一級是否可點擊) 。記得京東商城有此類效果，這個雖然簡易，不過展現了核心代碼，在兼容性方面，可能還有些不足，也希望高手繼續挖掘一下，修正完善。

<!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{background:url(http://bbs.blueidea.com/attachment.php?aid=155776&k=f1397a709b9a699e8682e5200b3bf5d9&t=1291343785&noupdate=yes) right 3px no-repeat}          .item.hover,.item:hover .canExpand{background:url(http://bbs.blueidea.com/attachment.php?aid=155776&k=f1397a709b9a699e8682e5200b3bf5d9&t=1291343785&noupdate=yes) right -30px no-repeat}                    .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   class="70qarhlowxag"   id='hd1' class='holder'></div></td>			<td> </td>		</tr>		<tr>			<td><input type="button" onclick="buildMenu('hd2',data,cbkhdl2)" value="選擇物品" /></td>			<td id='hd2'class='holder'> </td>			<td> </td>		</tr>		</table>				</div>        <div   class="70qarhlowxag"   id="holder">        </div>		<div   class="70qarhlowxag"   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>    </body></html>

上一篇：帶導航標志的CSS豎向簡潔菜單

下一篇：富有彈性碰撞緩沖的豎向導航條