很棒的自定義CSS下拉菜單_菜單導航特效

一位很謙虛的朋友發來的親身寫的自定義下拉列表菜單，不但樣式美觀，而且功能也很實用，通過模板無憂奉獻給大家，希看有朋友能用得上，同時愿與大家一起交流學習。作者：張洪偉、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" mrc="text/html; charset=utf-8" />
<title>張洪偉的自定義下拉菜單-www.zhaotila.cn</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\"><a href=\"javascript:void(0)\" onFocus=\"block_Opt(this,'"+OptName+"')\" onBlur=\"none_Opt('"+OptName+"')\" class=\"sel_a\"><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\" /></a><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+="<a href=\"javascript:void(0)\" onmousedown=\"setOptval('"+OptName+"','"+OptArr[opt]+"')\">&nbsp;"+OptArr[opt][0]+"</a>";
	}
	!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>

所屬頻道：菜單導航特效/更新時間：2010-05-22

[收藏][報錯][返回列表]

相關菜單導航特效：

很棒的自定義CSS下拉菜單_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些