仿照某网站制作的下拉菜单(效果不错的代码)

2007-10　　作者：佚名　　来源：不详　网友评论　

仿照某网站的菜单，可以有三级菜单

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Untitled Document</title> <script language="JavaScript" type="text/javascript"> //--------------------------------------------------------------------------- // 功能搜索选择框 // 作者:Joshua // 创建时间:2007-02-07 // Email:JoshuaChen[at]126.com // webSite:www.xcopy.cn //--------------------------------------------------------------------------- //省 var Data_Area_Province = new Array("安徽","北京","福建","甘肃","广东","广西","贵州","海南","河北","河南","黑龙江","湖北","湖南","吉林","江苏","江西","辽宁","内蒙古","宁夏","青海","山东","山西","陕西","上海","四川","天津","西藏","新疆","云南","浙江","重庆"); //市区 var Data_Area_City = new Array(); Data_Area_City[0] = new Array("安庆","蚌埠","马鞍山","宿州","铜陵","芜湖","宣城","亳州"); Data_Area_City[1] = new Array("北京"); Data_Area_City[2] = new Array("福州","龙岩","南平","宁德","莆田","泉州","三明","厦门","漳州"); Data_Area_City[3] = new Array("白银","定西","天水","武威","张掖"); Data_Area_City[4] = new Array("潮州","东莞","佛山","广州","肇庆","中山","珠海"); Data_Area_City[5] = new Array("百色","北海","崇左","防城港","桂林","贵港","河池","贺州","来宾","柳州","南宁","钦州","梧州","玉林"); Data_Area_City[6] = new Array("安顺","毕节","贵阳","六盘水","铜仁","遵义"); Data_Area_City[7] = new Array("白沙黎族自治县","乐东黎族自治县","万宁","文昌","五指山","儋州"); Data_Area_City[8] = new Array("保定","沧州","承德","邯郸","衡水","廊坊","秦皇岛","石家庄","唐山","邢台","张家口"); Data_Area_City[9] = new Array("安阳","鹤壁","济源","焦作","开封","洛阳","周口","驻马店","漯河","濮阳"); Data_Area_City[10]= new Array("大庆","大兴安岭","哈尔滨","鹤岗","七台河","齐齐哈尔","双鸭山","绥化","伊春"); Data_Area_City[11] = new Array("鄂州","恩施土家族苗族自治州","黄冈","襄樊","孝感","宜昌"); Data_Area_City[12] = new Array("常德","长沙","岳阳","张家界","株洲"); Data_Area_City[13] = new Array("白城","白山","长春","吉林","辽源","四平","松原","通化","延边朝鲜族自治州"); Data_Area_City[14] = new Array("常州","淮安","连云港","南京","南通","苏州","宿迁","泰州","无锡","徐州","盐城","扬州","镇江"); Data_Area_City[15] = new Array("抚州","赣州","吉安","景德镇","九江","南昌","萍乡","上饶","新余","宜春","鹰潭"); Data_Area_City[16] = new Array("鞍山","本溪","朝阳","沈阳","铁岭","营口"); Data_Area_City[17] = new Array("阿拉善盟","巴彦淖尔盟","包头","锡林郭勒盟","兴安盟"); Data_Area_City[18] = new Array("固原","石嘴山","吴忠","银川"); Data_Area_City[19] = new Array("果洛藏族自治州","西宁","玉树藏族自治州"); Data_Area_City[20] = new Array("滨州","德州","东营","菏泽","潍坊","烟台","枣庄","淄博"); Data_Area_City[21] = new Array("长治","大同","晋城","晋中","临汾","吕梁","朔州","太原","忻州","阳泉","运城"); Data_Area_City[22] = new Array("安康","宝鸡","汉中","商洛","铜川","渭南","西安","咸阳","延安","榆林"); Data_Area_City[23] = new Array("上海"); Data_Area_City[24] = new Array("阿坝藏族羌族自治州","绵阳","南充","内江","攀枝花","遂宁","雅安","宜宾","资阳","自贡","泸州"); Data_Area_City[25] = new Array("天津"); Data_Area_City[26] = new Array("阿里","昌都","拉萨","林芝","那曲","日喀则","山南"); Data_Area_City[27] = new Array("阿克苏","和田","喀什","吐鲁番","乌鲁木齐","五家渠","伊犁哈萨克自治州"); Data_Area_City[28] = new Array("保山","玉溪","昭通"); Data_Area_City[29] = new Array("杭州","湖州","嘉兴","金华","丽水","宁波","绍兴","台州","温州","舟山","衢州"); Data_Area_City[30] = new Array("重庆"); //学历 var Data_School = new Array("初中","高中","中专","大专","本科","双学位"); //行业 var Data_Industry = new Array("计算机类","金融/证券/保险类","财务类","工业/工厂类 ","技工类","机械/设备维修类","动力电气类", "轻工类 ","美容保健类"); //时间 var Data_Date = new Array("今天","三天内","一个星期内","半个月内","一个月内","三个月内","半年内","一年内","所有"); //层状态 var Date_DivState=new Array() //鼠标焦点状态 var focusState=false var Search = new Object(); //-------------------------------------- // 初始化Div标签事件 // Joshua 2007-02-07 //-------------------------------------- Search.Init = function(){ document.getElementById("Data_Area").onclick = Search.ShowArea.Init; document.getElementById("Data_School").onclick = Search.ShowSchool; document.getElementById("Data_Industry").onclick = Search.ShowIndustry; document.getElementById("Data_Date").onclick = Search.ShowDate; } //------------------------------- // 创建一个Div对象 // Joshua 2007-02-07 //------------------------------- Search.CreateDiv = function(obj,Id,X,Y,oWidth,oHeight){ var Obj_Div = document.createElement("div"); Obj_Div.setAttribute("id",Id); Obj_Div.style.position="absolute"; Obj_Div.style.background="#fff"; Obj_Div.style.zIndex = "10000"; Obj_Div.style.border="1px solid #CCCCCC"; Obj_Div.style.padding="3px"; Obj_Div.style.lineHeight ="120%"; Obj_Div.style.left=X+"px"; Obj_Div.style.top=Y+"px"; Obj_Div.style.whiteSpace="nowrap"; Obj_Div.style.width= oWidth + "px"; Obj_Div.style.height= oHeight + "px"; obj.appendChild(Obj_Div); } //------------------------------------ // 判断Div是否存在 // Joshua 2007-02-07 //------------------------------------ Search.IsDiv = function(Id){ var result = true try{ document.getElementById(Id).a=1; }catch(e){ result = false } return(result); } //---------------------------- // 删除Div对象 // Joshua 2007-02-07 //---------------------------- Search.RemoveDiv = function(Id){ try{ document.getElementById(Id).removeNode(true); }catch(e){} } //--------------------------- // 遍历清除无用Div对象 // Joshua 2007-02-07 //--------------------------- Search.DelDiv = function(){ try{ document.getElementById("Div_Area").removeNode(true); document.getElementById("Data_Area").innerHTML = "4" + document.getElementById("Data_Area").innerText.substring(1,document.getElementById("Data_Area").innerText.length); }catch(e){} try{ document.getElementById("Div_School").removeNode(true); document.getElementById("Data_School").innerHTML = "4" + document.getElementById("Data_School").innerText.substring(1,document.getElementById("Data_School").innerText.length); }catch(e){} try{ document.getElementById("Div_Industry").removeNode(true); document.getElementById("Data_Industry").innerHTML = "4" + document.getElementById("Data_Industry").innerText.substring(1,document.getElementById("Data_Industry").innerText.length); }catch(e){} try{ document.getElementById("Div_Date").removeNode(true); document.getElementById("Data_Date").innerHTML = "4" + document.getElementById("Data_Date").innerText.substring(1,document.getElementById("Data_Date").innerText.length); }catch(e){} } //-------------------------- // 失去焦点,清楚Div对象 // Joshua 2007-02-07 //-------------------------- Search.Lostfocus = function(){ if(!focusState){ try{ document.getElementById("Div_Area").removeNode(true); document.getElementById("Data_Area").innerHTML = "4" + document.getElementById("Data_Area").innerText.substring(1,document.getElementById("Data_Area").innerText.length); }catch(e){} try{ document.getElementById("Div_School").removeNode(true); document.getElementById("Data_School").innerHTML = "4" + document.getElementById("Data_School").innerText.substring(1,document.getElementById("Data_School").innerText.length); }catch(e){} try{ document.getElementById("Div_Industry").removeNode(true); document.getElementById("Data_Industry").innerHTML = "4" + document.getElementById("Data_Industry").innerText.substring(1,document.getElementById("Data_Industry").innerText.length); }catch(e){} try{ document.getElementById("Div_Date").removeNode(true); document.getElementById("Data_Date").innerHTML = "4" + document.getElementById("Data_Date").innerText.substring(1,document.getElementById("Data_Date").innerText.length); }catch(e){} } } Search.ShowArea = function(){} //空对象 //------------------------ // 显示地区一级菜单 // Joshua 2007-02-07 //------------------------ Search.ShowArea.Init = function(){ focusState = true; Search.DelDiv()//删除其他DIV标签 if(!Search.IsDiv("Div_Area")){//判断对象是否建立,防止再次激发事件,引起的对象多次重复建立 //更改Data_Area对象内容 document.getElementById("Data_Area").innerHTML = "6" + document.getElementById("Data_Area").innerText.substring(1,document.getElementById("Data_Area").innerText.length); //显示层 Search.CreateDiv(document.body,"Div_Area",Search.getSelectPosition(document.getElementById("Data_Area"))[0],Search.getSelectPosition(document.getElementById("Data_Area"))[1]+12,80,0); //创建省级分类 for(var i=0;i<Data_Area_Province.length;i++){ var Obj_Span = document.createElement("div"); Obj_Span.setAttribute("id","Div_Area_Province_"+i); Obj_Span.setAttribute("value",i); Obj_Span.style.cursor="pointer"; Obj_Span.onmouseover = function(){ focusState = true; this.style.border="1px solid #827C5F"; this.style.background="#CEC497"; } Obj_Span.onmouseout = function(){ focusState = false; if (!Date_DivState[this.getAttribute("value")]){ this.style.border="0px solid #ffffff"; this.style.background="#fff";} } Obj_Span.onclick = function(){ focusState = true; //恢复非本对象的其他一级菜单项目样式 for(var i=0;i<Date_DivState.length;i++){ if(Date_DivState[i]==true&&this.value!=document.getElementById("Div_Area_Province_"+i).value){ document.getElementById("Div_Area_Province_"+i).style.border="0px solid #ffffff"; document.getElementById("Div_Area_Province_"+i).style.background="#fff"; } } //设置层状态 Date_DivState[this.getAttribute("value")] = true; //生成二级菜单 Search.ShowArea.InitCity(this.getAttribute("value"),this) } Obj_Span.innerHTML = Data_Area_Province[i] + "4"; document.getElementById("Div_Area").appendChild(Obj_Span); } } } //---------------------- // 显示地区二级菜单 // Joshua 2007-02-07 //---------------------- Search.ShowArea.InitCity = function(oId,obj){ if(!Search.IsDiv("Div_Area_City_"+oId)){//判断对象是否建立,防止再次激发事件,引起的对象多次重复建立 //删除除对象外存在的二级菜单对象 for(var i=0;i<Date_DivState.length;i++){ if(Date_DivState[i]==true&&i!=oId){ Search.RemoveDiv("Div_Area_City_"+i); Date_DivState[i]=null; } } //生成指定的二级菜单对象 Search.CreateDiv(obj,"Div_Area_City_"+oId,obj.offsetWidth,obj.offsetTop,50,0); if(oId<Data_Area_Province.length){ for(var i=0;i<Data_Area_City[oId].length;i++){ var Obj_Span = document.createElement("div"); Obj_Span.setAttribute("id","Div_Area_City"+i); Obj_Span.style.cursor="pointer"; Obj_Span.innerText = Data_Area_City[oId][i]; Obj_Span.setAttribute("value",oId); Obj_Span.onmouseover = function(){ focusState = true; this.style.border="1px solid #827C5F"; this.style.background="#CEC497"; } Obj_Span.onmouseout = function(){ focusState = false; this.style.border="0px solid #ffffff"; this.style.background="#fff"; } Obj_Span.onclick = function(){ //设置Data_Area的对象为选择的职 document.getElementById("Data_Area").innerHTML = "4" + this.innerText; //删除Div对象 Search.RemoveDiv("Div_Area"); //恢复状态数组 Date_DivState.length=0; } document.getElementById("Div_Area_City_"+oId).appendChild(Obj_Span); } } } } //------------------- // 学历Div操作 // Joshua 2007-02-07 //------------------- Search.ShowSchool=function(){ focusState = true; Search.DelDiv();//删除其他DIV标签 if(!Search.IsDiv("Div_School")){//判断对象是否建立,防止再次激发事件,引起的对象多次重复建立 document.getElementById("Data_School").innerHTML = "6" + document.getElementById("Data_School").innerText.substring(1,document.getElementById("Data_School").innerText.length); Search.CreateDiv(document.body,"Div_School",Search.getSelectPosition(document.getElementById("Data_School"))[0],Search.getSelectPosition(document.getElementById("Data_School"))[1]+12,60,0); for(var i=0;i<Data_School.length;i++){ var Obj_Span = document.createElement("div"); Obj_Span.setAttribute("id","Div_School_"+i); Obj_Span.setAttribute("value",i); Obj_Span.style.cursor="pointer"; Obj_Span.onmouseover = function(){ focusState = true; this.style.border="1px solid #827C5F"; this.style.background="#CEC497"; } Obj_Span.onmouseout = function(){ focusState = false; this.style.border="0px solid #ffffff"; this.style.background="#fff"; } Obj_Span.onclick = function(){ document.getElementById("Data_School").innerHTML = "4" + this.innerText; Search.RemoveDiv("Div_School"); } Obj_Span.innerHTML = Data_School[i]; document.getElementById("Div_School").appendChild(Obj_Span); } } } //---------------------- // 行业Div操作 // Joshua 2007-02-07 //---------------------- Search.ShowIndustry = function(){ focusState = true; Search.DelDiv();//删除其他DIV标签 if(!Search.IsDiv("Div_Industry")){//判断对象是否建立,防止再次激发事件,引起的对象多次重复建立 document.getElementById("Data_Industry").innerHTML = "6" + document.getElementById("Data_Industry").innerText.substring(1,document.getElementById("Data_Industry").innerText.length); Search.CreateDiv(document.body,"Div_Industry",Search.getSelectPosition(document.getElementById("Data_Industry"))[0],Search.getSelectPosition(document.getElementById("Data_Industry"))[1]+12,160,0); for(var i=0;i<Data_Industry.length;i++){ var Obj_Span = document.createElement("div"); Obj_Span.setAttribute("id","Div_Industry_"+i); Obj_Span.setAttribute("value",i); Obj_Span.style.cursor="pointer"; Obj_Span.onmouseover = function(){ focusState = true; this.style.border="1px solid #827C5F"; this.style.background="#CEC497"; } Obj_Span.onmouseout = function(){ focusState = false; this.style.border="0px solid #ffffff"; this.style.background="#fff"; } Obj_Span.onclick = function(){ document.getElementById("Data_Industry").innerHTML = "4" + this.innerText; Search.RemoveDiv("Div_Industry"); } Obj_Span.innerHTML = Data_Industry[i]; document.getElementById("Div_Industry").appendChild(Obj_Span); } } } //----------------------------- // 时间Div操作 // Joshua 2007-02-07 //----------------------------- Search.ShowDate = function(){ focusState = true; Search.DelDiv();//删除其他DIV标签 if(!Search.IsDiv("Div_Date")){//判断对象是否建立,防止再次激发事件,引起的对象多次重复建立 document.getElementById("Data_Date").innerHTML = "6" + document.getElementById("Data_Date").innerText.substring(1,document.getElementById("Data_Date").innerText.length); Search.CreateDiv(document.body,"Div_Date",Search.getSelectPosition(document.getElementById("Data_Date"))[0],Search.getSelectPosition(document.getElementById("Data_Date"))[1]+12,60,0); for(var i=0;i<Data_Date.length;i++){ var Obj_Span = document.createElement("div"); Obj_Span.setAttribute("id","Div_Date_"+i); Obj_Span.setAttribute("value",i); Obj_Span.style.cursor="pointer"; Obj_Span.onmouseover = function(){ focusState = true; this.style.border="1px solid #827C5F"; this.style.background="#CEC497"; } Obj_Span.onmouseout = function(){ focusState = false; this.style.border="0px solid #ffffff"; this.style.background="#fff"; } Obj_Span.onclick = function(){ document.getElementById("Data_Date").innerHTML = "4" + this.innerText; Search.RemoveDiv("Div_Date"); } Obj_Span.innerHTML = Data_Date[i]; document.getElementById("Div_Date").appendChild(Obj_Span); } } } //----------------------- // 获取一个对象的坐标 //------------------------ Search.getSelectPosition = function(Gobj) { var objLeft = Gobj.offsetLeft; var objTop = Gobj.offsetTop; var objParent = Gobj.offsetParent; while (objParent!= null) { objLeft += objParent.offsetLeft; objTop += objParent.offsetTop; objParent = objParent.offsetParent; } return([objLeft,objTop]); } //------------------------ // 页面初始化 //------------------------ window.onload=function(){ Search.Init(); } window.document.onclick=function (){ Search.Lostfocus(); } </script> <style> BODY{FONT-SIZE: 12px;} </style> </head> <body> 4地区 4学历 4行业 4时间 </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

>> 更多评论