JavaScript drop down menu function instance code
- 2021-07-24 09:56:41
- OfStack
In this article, I will share with you an example code about js to realize the drop-down menu function. The specific code is as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Drop-down menu </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> Please select a category </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 Development </a>
</li>
<li>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="2">.NET Development </a>
</li>
<li>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="3">PHP Development </a>
</li>
<li>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="4">Javascript Development </a>
</li>
<li>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="5">Java Special effects </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;
// Initial style
function resetM() {
box.className = "";
menu.className = "";
menu.style.display = "none";
index = -1;
resetA();
}
// Empty a Option style
function resetA() {
for(var i = 0; i < as.length; i++) {
as[i].style.background = "#fff";
}
}
// Click 3 Angular time
title.onclick = function(event) {
// Prevent events from bubbling
event = event || window.event;
event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
if(box.className == "extended") {
resetM();
} else {
box.className = "extended"; // To box Add class name to let 3 Angular rotation
menu.className = "animated speed_fast anim_extendDown"; // Drop-down animation of drop-down menu
menu.style.display = "block";
}
}
document.onkeydown = function(event) {
event = event || window.event;
if(box.className == "extended") {
if(event.keyCode == 38) { // UP key
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) { // Down key
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) { // Enter key
event.preventDefault ? event.preventDefault() : event.returnValue = false;
title.innerHTML = as[index].innerHTML;
resetM();
}
}
}
// Slide over, slide over, leave, click on each option
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;
}
}
// When you click on the blank space of the page,
document.onclick = function() {
resetM();
}
}
</script>
</body>
</html> 1. To prevent events from bubbling
2. Keyboard events, indexed by index
3. Add animation and restore the original style to the element by setting the class name or clearing the class name