很棒的自定义CSS下拉菜单

2024-09-05 12:19:56

字体：大中小

来源：转载

供稿：网友

一位很谦虚的朋友发来的亲自写的自定义下拉列表菜单，不但样式美观，而且功能也很实用，通过源码爱好者奉献给大家，希望有朋友能用得上，同时愿与大家一起交流学习。作者：张洪伟、QQ：383567226

<!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=utf-8" /><title>张洪伟的自定义下拉菜单</title><style type="text/css"></style></head><script language="javascript">function $(obj){return document.getElementById(obj)}function findPosition(oElement){var x2 = 0;var y2 = 0;var width = oElement.offsetWidth;var height = oElement.offsetHeight;if( typeof(oElement.offsetParent) != 'undefined' ){for( var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent ) {posX += oElement.offsetLeft; posY += oElement.offsetTop;}x2 = posX + width;y2 = posY + height;return [ posX, posY ,x2, y2];} else{x2 =oElement.x + width;y2 = oElement.y + height;return [ oElement.x, oElement.y, x2, y2];}}function loadOption(OptArr,OptName,box){$(box).innerHTML = "<div id=/""+OptName+"_Select/" class=/"Select/"><span id=/""+OptName+"_Select_val/" class=/"Select_val/">Load...</span><input name=/""+OptName+"/" type=/"hidden/" id=/""+OptName+"/"/><img src=/"http://www.0566hr.com/sele.gif/" width=/"17/" height=/"9/" align=/"absbottom/" class=/"sm_pic/" /><div id=/""+OptName+"_Option/" class=/"Option/"></div></div>";var i = 0;var opt_Html = "";	for(opt in OptArr){		if(OptArr[opt][2])i = opt;		$(OptName).value = OptArr[i][1];		opt_Html+=" "+OptArr[opt][0]+"";	}	!document.all?$(OptName+'_Select_val').textContent = OptArr[i][0]:$(OptName+'_Select_val').innerText = OptArr[i][0];	$(OptName+'_Option').innerHTML = opt_Html;}function block_Opt(obj,opt){	var w = findPosition(obj);	$(opt+'_Option').style.top = w[1]+22+"px";	$(opt+'_Option').style.left = w[0]+"px";	$(opt+'_Option').style.width = w[2]-w[0]+"px";	$(opt+'_Option').style.display = 'block';}function none_Opt(opt){setTimeout("$('"+opt+"_Option').style.display='none'",200);}function setOptval(opt,Oarr){Oarr = Oarr.split(',');!document.all?$(opt+'_Select_val').textContent = Oarr[0]:$(opt+'_Select_val').innerText = Oarr[0];$(opt).value = Oarr[1];}/*使用说明loadOption([1],[2],[3]);[1]是生成下拉列表值的数组 Array(Array(名称，值，是否选中[ture]or[false]),Array(名称，值，是否选中),......);[2]隐藏域所使用的名称，提交时可以用它来获取隐藏域的值；[3]要显示下拉菜单的网页元素ID；例子：<div id="box"></div>script标签var arr = new Array();arr[0] = new Array('标题一','值1',false);arr[1] = new Array('标题二','值2',true);arr[2] = new Array('标题三','值3',false);loadOption(arr,"inputname","box");script结束标签*/</script><body><span id="box1" style="margin:10px; float:left"></span><span id="box2" style="margin:10px; float:left"></span><span id="box3" style="margin:10px; float:left"></span><span id="box4" style="margin:10px; float:left"></span><script language="javascript">var SelArr = new Array();SelArr[0] = new Array("中文歌曲","CM",false);SelArr[1] = new Array("英文歌曲","EM",false);SelArr[2] = new Array("源码爱好","RM",false);SelArr[3] = new Array("韩文歌曲","HM",false);SelArr[4] = new Array("乡村经典","EDM",true);SelArr[5] = new Array("摇滚音乐","ROCKM",false);SelArr[6] = new Array("流行音乐","HOTM",false);SelArr[7] = new Array("古典音乐","OLDM",false);SelArr[8] = new Array("爵士乐","JM",false);var SelArr2 = new Array();SelArr2[0] = new Array("安徽","AH",false);SelArr2[1] = new Array("上海","SH",false);SelArr2[2] = new Array("湖北","HB",false);SelArr2[3] = new Array("浙江","ZJ",false);SelArr2[4] = new Array("江西","JX",false);SelArr2[5] = new Array("蒙古","MG",false);SelArr2[6] = new Array("广东","GD",false);SelArr2[7] = new Array("福建","FJ",false);SelArr2[8] = new Array("天津","TJ",false);var SelArr3 = new Array();SelArr3[0] = new Array("周杰伦","ZJL",false);SelArr3[1] = new Array("王力宏","WLH",true);SelArr3[2] = new Array("孙楠","SN",false);SelArr3[3] = new Array("孙燕姿","SYZ",false);SelArr3[4] = new Array("阿信","AX",false);SelArr3[5] = new Array("蔡依林","CYL",false);SelArr3[6] = new Array("张信哲","ZXZ",false);SelArr3[7] = new Array("韩红","HH",false);SelArr3[8] = new Array("林俊杰","LJJ",false);var SelArr4 = new Array();SelArr4[0] = new Array("法国","FG",false);SelArr4[1] = new Array("英国","YG",false);SelArr4[2] = new Array("美国","MG",false);SelArr4[3] = new Array("中国","ZG",false);SelArr4[4] = new Array("德国","DG",false);SelArr4[5] = new Array("俄罗斯","ELS",false);SelArr4[6] = new Array("意大利","YDL",false);SelArr4[7] = new Array("澳大利亚","ADLY",false);SelArr4[8] = new Array("埃及","AJ",false);SelArr4[9] = new Array("瑞士","RS",false);SelArr4[10] = new Array("罗马","LM",false);SelArr4[11] = new Array("巴西","BX",false);SelArr4[12] = new Array("巴基斯坦","BJST",true);SelArr4[13] = new Array("新西兰","XXL",false);SelArr4[14] = new Array("韩国","HG",false);SelArr4[15] = new Array("日本","RB",false);SelArr4[16] = new Array("朝鲜","CX",false);loadOption(SelArr,"music","box1");loadOption(SelArr2,"city","box2");loadOption(SelArr3,"singer","box3");loadOption(SelArr4,"country","box4");</script></body></html>

上一篇：列表、排行专用的灰、红滑动门菜单

下一篇：简单、清新CSS水平菜单