JavaScript下拉菜单功能实例代码
本文给大家分享一段实例代码关于js实现下拉菜单功能，具体代码如下所示：
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>下拉菜单</title>
<styletype="text/css">
body,
ul,
li{
margin:0;
padding:0;
font-size:13px;
}
ul,
li{
list-style:none;
}
#divselect{
width:186px;
margin:80pxauto;
position:relative;
z-index:10000;
}
#divselectcite{
width:150px;
height:24px;
line-height:24px;
display:block;
color:#807a62;
cursor:pointer;
font-style:normal;
padding-left:4px;
padding-right:30px;
border:1pxsolid#333333;
/*background:url(xjt.png)no-repeatrightcenter;*/
}
cite:before{
content:'';
position:absolute;
right:7px;
bottom:7px;
width:0;
height:0;
border-width:4px;
border-style:solid;
border-color:#888transparenttransparenttransparent;
transition:all0.2s;
-webkit-transition:all0.2s;
-moz-transition:all0.2s;
-o-transition:all0.2s;
-ms-transition:all0.2s;
transform-origin:50%25%;
-ms-transform-origin:50%25%;
-moz-transform-origin:50%25%;
-webkit-transform-origin:50%25%;
-o-transform-origin:50%25%;
}
.extendedcite:before{
transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-o-transform:rotate(180deg);
-ms-transform:rotate(180deg);
}
#divselectul{
width:184px;
border:1pxsolid#333333;
background-color:#ffffff;
position:absolute;
z-index:20000;
margin-top:-1px;
display:none;
}
#divselectulli{
height:24px;
line-height:24px;
}
#divselectullia{
display:block;
height:24px;
color:#333333;
text-decoration:none;
padding-left:10px;
padding-right:10px;
}
.animated{
animation-fill-mode:both;
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-o-animation-fill-mode:both;
-ms-animation-fill-mode:both;
}
.speed_fast{
animation-duration:.3s;
/*-webkit-animation-duration:0.2s;
-moz-animation-duration:0.2s;
-o-animation-duration:0.2s;
-ms-animation-duration:0.2s;*/
}
.anim_extendDown{
animation-name:extendDown;
-webkit-animation-name:extendDown;
-moz-animation-name:extendDown;
-o-animation-name:extendDown;
-ms-animation-name:extendDown;
}
@keyframesextendDown{
0%{
border-bottom-color:transparent;
height:0;
}
100%{
border-bottom-color:#333;
height:120px;
}
}
@-webkit-keyframesextendDown{
0%{
border-bottom-color:transparent;
height:0;
}
100%{
border-bottom-color:#333;
height:120px;
}
}
@-moz-keyframesextendDown{
0%{
border-bottom-color:transparent;
height:0;
}
100%{
border-bottom-color:#333;
height:120px;
}
}
@-o-keyframesextendDown{
0%{
border-bottom-color:transparent;
height:0;
}
100%{
border-bottom-color:#333;
height:120px;
}
}
@-ms-keyframesextendDown{
0%{
border-bottom-color:transparent;
height:0;
}
100%{
border-bottom-color:#333;
height:120px;
}
}
</style>
</head>
<body>
<divid="divselect">
<cite>请选择分类</cite>
<ul>
<liid="li">
<ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"selectid="1">ASP开发</a>
</li>
<li>
<ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"selectid="2">.NET开发</a>
</li>
<li>
<ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"selectid="3">PHP开发</a>
</li>
<li>
<ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"selectid="4">Javascript开发</a>
</li>
<li>
<ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"selectid="5">Java特效</a>
</li>
</ul>
</div>
<scripttype="text/javascript">
window.onload=function(){
varbox=document.getElementById('divselect'),
title=box.getElementsByTagName('cite')[0],
menu=box.getElementsByTagName('ul')[0],
as=box.getElementsByTagName('a'),
index=-1;
//初始样式
functionresetM(){
box.className="";
menu.className="";
menu.style.display="none";
index=-1;
resetA();
}
//清空a选项样式
functionresetA(){
for(vari=0;i<as.length;i++){
as[i].style.background="#fff";
}
}
//点击三角时
title.onclick=function(event){
//阻止事件冒泡
event=event||window.event;
event.stopPropagation?event.stopPropagation():event.cancelBubble=true;
if(box.className=="extended"){
resetM();
}else{
box.className="extended";//给box加类名让三角旋转
menu.className="animatedspeed_fastanim_extendDown";//下拉菜单的下拉动画
menu.style.display="block";
}
}
document.onkeydown=function(event){
event=event||window.event;
if(box.className=="extended"){
if(event.keyCode==38){//向上键
event.preventDefault?event.preventDefault():event.returnValue=false;
index--;
if(index==-1){
index=as.length-1;
}
resetA();
as[index].style.background="#ccc";
}elseif(event.keyCode==40){//向下键
event.preventDefault?event.preventDefault():event.returnValue=false;
index++;
if(index==as.length){
index=0;
}
resetA();
as[index].style.background="#ccc";
}elseif(event.keyCode==13){//回车键
event.preventDefault?event.preventDefault():event.returnValue=false;
title.innerHTML=as[index].innerHTML;
resetM();
}
}
}
//滑过滑过、离开、点击每个选项时
for(vari=0;i<as.length;i++){
as[i].onmouseover=function(){
resetA();
this.style.background="#ccc";
index=this.getAttribute('selectid')-1;
}
as[i].onclick=function(){
resetM();
title.innerHTML=this.innerHTML;
}
}
//点击页面空白处时
document.onclick=function(){
resetM();
}
}
</script>
</body>
</html>
1、要阻止事件冒泡
2、键盘事件，用index索引
3、通过设置类名或清空类名的方式给元素增加动画和恢复原有样式
以上所述是小编给大家介绍的JavaScript下拉菜单功能实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！