<!doctype?html>
<html?>
<head>
????<meta?charset="gb2312">
????<title>下拉菜單</title>
????<style?type="text/css">
????????body,ul,li{
????????????margin:0;?padding:0;?font-size:13px;
????????}
????????ul,li{
????????????list-style:none;
????????}
????????#divselect{
????????????width:186px;?margin:80px?auto;?position:relative;?z-index:10000;
????????}
????????#divselect?cite{
????????????width:150px;?height:24px;line-height:24px;?display:block;?color:#807a62;?cursor:pointer;font-style:normal;
????????????padding-left:4px;?padding-right:30px;?border:1px?solid?#333333;?
????????????background:url(xjt.png)?no-repeat?right?center;
????????}
????????#divselect?ul{
????????????width:184px;border:1px?solid?#333333;?background-color:#ffffff;?position:absolute;?z-index:20000;?margin-top:-1px;?display:none;
????????}
????????#divselect?ul?li{
????????????height:24px;?line-height:24px;
????????}
????????#divselect?ul?li?a{
????????????display:block;?height:24px;?color:#333333;?text-decoration:none;?padding-left:10px;?padding-right:10px;
????????}
????</style>
???<script?type="text/javascript">
????window.onload=function(){
????????var?box=document.getElementById('divselect'),
????????title=box.getElementsByTagName('cite')[0],
????????menu=box.getElementsByTagName('ul')[0],
????????as=box.getElementsByTagName('a'),
????????index=-1;
???
????????//?點擊三角時
????????title.onclick=function(e){
????????????//?執行腳本????????
????????????e?=?e?||?window.event;
????????????if(e.stopPropagation){
????????????????e.stopPropagation();
????????????}else{
????????????????e.cancelBubble?=?true;
????????????}
????????????menu.style.display?=?"block";
????????}??
????
????????//?滑過滑過、離開、點擊每個選項時
????????//?執行腳本
????????for(var?i=0,l=as.length;i<l;i++){
????????????as[i].onmouseover?=?function(){
????????????????this.style.backgroundColor?=?"#CCC";
????????????}
????????????as[i].onmouseout?=?function(){
????????????????this.style.backgroundColor?=?"#FFF";
????????????}
????????????as[i].onclick?=?function(){
????????????????title.innerHTML?=?this.innerHTML;
????????????}
????????}
????????//keyup釋放鍵盤的時候觸發
????????//回車13，上38，下40
?????????function?Highlight(index){
????????????for(var?i=0;i<as.length;i++){
????????????????????if(i!=index)?as[i].style.backgroundColor?=?"#FFF";
????????????????????else?as[i].style.backgroundColor?=?"#CCC";
????????????}
????????}
????????document.onkeyup?=?function(e){
????????????if(menu.style.display?==?"block"){
????????????????if(e.keyCode?==?40){
????????????????????if(index?==?-1){
????????????????????????index?=?0
????????????????????}else
????????????????????????(index+1?==?as.length)???(index?=?0)?:?(index?=?index?+1);????
????????????????????Highlight(index);
????????????????}else?if(e.keyCode?==?38){
????????????????????if(index?==?-1){
????????????????????????index?=?as.length-1;
????????????????????}else
????????????????????????(index-1?==?-1)???(index?=?as.length-1)?:?(index?=?index?-1);
????????????????????Highlight(index);
????????????????}else?if(e.keyCode?==?13){????????????????
????????????????????title.innerHTML?=?as[index].innerHTML;
????????????????????as[index].style.backgroundColor?=?"#FFF";
????????????????????index?=?-1;????????????????????
????????????????????menu.style.display?=?"none";????????????????????
????????????????}
????????????????
????????????}
????????}
????????//?點擊頁面空白處時
????????//?執行腳本
????????document.onclick?=?function(e){????
????????????e?=?e?||?window.event;
????????????if(e.stopPropagation){
????????????????e.stopPropagation();
????????????}else{
????????????????e.cancelBubble?=?true;
????????????}
????????????menu.style.display?=?"none";
????????}
????}
???</script>
</head>
<body>
????<div?id="divselect">
??????<cite>請選擇分類</cite>
??????<ul>
?????????<li?id="li"><a?href="javascript:;"?selectid="1">ASP開發</a></li>
?????????<li><a?href="javascript:;"?selectid="2">.NET開發</a></li>
?????????<li><a?href="javascript:;"?selectid="3">PHP開發</a></li>
?????????<li><a?href="javascript:;"?selectid="4">Javascript開發</a></li>
?????????<li><a?href="javascript:;"?selectid="5">Java特效</a></li>
??????</ul>
????</div>
</body>
</html>
sissifly
2014-10-22
0 回答
舉報
0/150
提交
取消
