JavaScript下拉菜单功能实例代码
程序员文章站
2023-12-04 08:37:58
本文给大家分享一段实例代码关于js实现下拉菜单功能，具体代码如下所示：
本文给大家分享一段实例代码关于js实现下拉菜单功能，具体代码如下所示：
<!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;
/*background: url(xjt.png) no-repeat right center;*/
}
cite:before {
content: '';
position: absolute;
right: 7px;
bottom: 7px;
width: 0;
height: 0;
border-width: 4px;
border-style: solid;
border-color: #888 transparent transparent transparent;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.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%;
}
.extended cite:before {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
#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;
}
.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;
}
@keyframes extenddown {
0% {
border-bottom-color: transparent;
height: 0;
}
100% {
border-bottom-color: #333;
height: 120px;
}
}
@-webkit-keyframes extenddown {
0% {
border-bottom-color: transparent;
height: 0;
}
100% {
border-bottom-color: #333;
height: 120px;
}
}
@-moz-keyframes extenddown {
0% {
border-bottom-color: transparent;
height: 0;
}
100% {
border-bottom-color: #333;
height: 120px;
}
}
@-o-keyframes extenddown {
0% {
border-bottom-color: transparent;
height: 0;
}
100% {
border-bottom-color: #333;
height: 120px;
}
}
@-ms-keyframes extenddown {
0% {
border-bottom-color: transparent;
height: 0;
}
100% {
border-bottom-color: #333;
height: 120px;
}
}
</style>
</head>
<body>
<div id="divselect">
<cite>请选择分类</cite>
<ul>
<li id="li">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="1">asp开发</a>
</li>
<li>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="2">.net开发</a>
</li>
<li>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="3">php开发</a>
</li>
<li>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="4">javascript开发</a>
</li>
<li>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="5">java特效</a>
</li>
</ul>
</div>
<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 resetm() {
box.classname = "";
menu.classname = "";
menu.style.display = "none";
index = -1;
reseta();
}
//清空a选项样式
function reseta() {
for(var i = 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 = "animated speed_fast anim_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";
} else if(event.keycode == 40) { //向下键
event.preventdefault ? event.preventdefault() : event.returnvalue = false;
index++;
if(index == as.length) {
index = 0;
}
reseta();
as[index].style.background = "#ccc";
} else if(event.keycode == 13) { //回车键
event.preventdefault ? event.preventdefault() : event.returnvalue = false;
title.innerhtml = as[index].innerhtml;
resetm();
}
}
}
// 滑过滑过、离开、点击每个选项时
for(var i = 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下拉菜单功能实例代码，希望对大家有所帮助
上一篇： ThinkPHP查询中的魔术方法简述
下一篇： php接口和抽象类使用示例详解