很棒的自定義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   class="iwvjtn8m0"   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   class="iwvjtn8m0"   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   class="iwvjtn8m0"   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水平菜單