<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <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; } #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; } /*插入一个三角符号*/ cite:before{ /*目的是撑开容器*/ content: ""; position: absolute; /*相对父容器定位*/ right: 7px; bottom: 7px; /*宽高设为0*/ width:0; height: 0; border-width: 4px; border-style: solid; /*上左下右:表示上面是888颜色,其余都是透明*/ border-color: #888 transparent transparent transparent; /*CSS3属性:0.5s是过过渡时间 , all:transition-property执行变换的属性*/ transition:all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; /*设置旋转元素的基点位置*/ transform-origin: 50% 25%; /*IE9*/ -ms-transform-origin: 50% 25%; /*Safari Chrome*/ -webkit-transform-origin: 50% 25%; /*Opera*/ -o-transform-origin: 50% 25%; /*Firefox*/ -moz-transform-origin: 50% 25%; } /*菜单打开时候的三角符号*/ .open cite:before{ transform: rotate(180deg); /*Safari Chrome*/ -webkit-transform: rotate(180deg); /*Firefox*/ -moz-transform: rotate(180deg); /*Opera*/ -o-transform: rotate(180deg); /*IE9*/ -ms-transform: rotate(180deg); } </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; function resetStyle_a() { for (var i=0;i<as.length;i++){ as[i].style.background="#fff"; } } function closeMenu() { box.className=""; menu.className=""; menu.style.display="none"; index=-1; resetStyle_a(); } function openMenu() { box.className = "open"; menu.style.display = "block"; } // 点击三角时 title.onclick=function(event){ event=event||window.event; //stopPropagation符合W3C标准,不支持IE浏览器 //cancelBubble支持IE,但是不符合W3C标准 if (event.stopPropagation){ event.stopPropagation(); }else { event.cancelBubble=true; } // 执行脚本 if (box.className == "open"){ closeMenu(); }else{ openMenu(); } } for (var i=0;i<as.length;i++){ //鼠标划过 as[i].onmouseover=function () { resetStyle_a(); this.style.background = "#ccc"; index=this.getAttribute("selectid")-1; }, //点击选项 as[i].onclick=function () { closeMenu(); title.innerHTML = this.innerHTML; }, //鼠标移开 as[i].onmouseout=function () { resetStyle_a(); this.style.background = "#fff"; index=-1; } } document.onkeydown=function (event) { event=event||window.event; if (box.className=="open"){ event.preventDefault ? event.preventDefault() : event.returnValue = false; if (event.keyCode==40){ //键盘按向下按钮时 index++; if (index>as.length-1){ index=0; } resetStyle_a(); as[index].style.background="#ccc"; } else if (event.keyCode==38){ //键盘按向上按钮时 index--; if (index<0){ index=as.length-1; } resetStyle_a(); as[index].style.background="#ccc"; } else if (event.keyCode==13&&index!=-1){ //按enter键,并且选中内容的时候 title.innerHTML = as[index].innerHTML; index=-1; closeMenu(); resetStyle_a(); } }else { } } //ID 获取DOM function getDOM(name){ return document.getElementById(name); } //Tag 获取DOM function getClass(name){ return document.getElementsByTagName(name); } //点击选中项时 function setectProvice() { var li=getDOM("all").getElementsByTagName("li"); for (var i=0;i<li.length;i++){ li[i].onclick=function(){ title.innerHTML=this.innerHTML; close(); } } } document.onclick=function () { closeMenu(); } } </script> </head> <body> <div id="divselect"> <cite>请选择分类</cite> <ul id="all"> <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> <script type="text/javascript"> window.onblur = function() { document.title = '合'; }; window.onfocus = function() { document.title = "开"; }; </script> </body> </html>
JavaScript实现下拉菜单
最新推荐文章于 2024-07-22 06:47:56 发布