很棒的自定义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.mb5u.com</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订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些