JavaScript下拉菜單功能實(shí)例代碼
更新時(shí)間：2017年03月01日 08:49:05 作者：liuyingshuai_blog
這篇文章主要介紹了JavaScript下拉菜單實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
本文給大家分享一段實(shí)例代碼關(guān)于js實(shí)現(xiàn)下拉菜單功能，具體代碼如下所示：
<!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>請(qǐng)選擇分類</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開(kāi)發(fā)</a>
</li>
<li>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="2">.NET開(kāi)發(fā)</a>
</li>
<li>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="3">PHP開(kāi)發(fā)</a>
</li>
<li>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="4">Javascript開(kāi)發(fā)</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選項(xiàng)樣式
function resetA() {
for(var i = 0; i < as.length; i++) {
as[i].style.background = "#fff";
}
}
// 點(diǎn)擊三角時(shí)
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加類名讓三角旋轉(zhuǎn)
menu.className = "animated speed_fast anim_extendDown"; //下拉菜單的下拉動(dòng)畫(huà)
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();
}
}
}
// 滑過(guò)滑過(guò)、離開(kāi)、點(diǎn)擊每個(gè)選項(xiàng)時(shí)
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;
}
}
// 點(diǎn)擊頁(yè)面空白處時(shí)
document.onclick = function() {
resetM();
}
}
</script>
</body>
</html>
1、要阻止事件冒泡
2、鍵盤(pán)事件，用index索引
3、通過(guò)設(shè)置類名或清空類名的方式給元素增加動(dòng)畫(huà)和恢復(fù)原有樣式
以上所述是小編給大家介紹的JavaScript下拉菜單功能實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
本文主要介紹了js實(shí)現(xiàn)日歷與定時(shí)器的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
小程序?qū)崿F(xiàn)人臉識(shí)別功能(百度ai)
這篇文章主要介紹了小程序?qū)崿F(xiàn)人臉識(shí)別功能(百度ai)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
顯示今天的日期js代碼(陽(yáng)歷和農(nóng)歷)
這篇文章主要介紹了Js中顯示日期和農(nóng)歷的代碼，很簡(jiǎn)單，但很實(shí)用，有圖片，需要的朋友可以參考下2014-09-09
IE中圖片的onload事件無(wú)效問(wèn)題和解決方法
這篇文章主要介紹了IE中圖片的onload事件無(wú)效問(wèn)題和解決方法,這是一個(gè)很經(jīng)典的問(wèn)題,其實(shí)只需要調(diào)換一下代碼順序即可解決,需要的朋友可以參考下2014-06-06
JavaScript中的break語(yǔ)句和continue語(yǔ)句案例詳解
本文詳細(xì)介紹了JavaScript中的break和continue語(yǔ)句的用法及其應(yīng)用場(chǎng)景,break用于提前退出循環(huán),而continue用于跳過(guò)當(dāng)前迭代,還介紹了標(biāo)簽化的break和continue,以及如何在實(shí)際編程中合理使用這些語(yǔ)句以提高代碼的效率和可讀性,感興趣的朋友一起看看吧2025-03-03
這篇文章主要介紹了JavaScript的一些小技巧分享，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2021-01-01
JavaScript實(shí)現(xiàn)獲取某個(gè)元素相鄰兄弟節(jié)點(diǎn)的prev與next方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)獲取某個(gè)元素相鄰兄弟節(jié)點(diǎn)的prev與next方法,涉及JavaScript基于函數(shù)的判定及調(diào)用previousSibling與nextSibling的相關(guān)技巧,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了JS Web Flex彈性盒子模型代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-03-03
V8是Google開(kāi)發(fā)的JavaScript引擎,采用分代垃圾回收機(jī)制自動(dòng)管理內(nèi)存,包括新生代和老生代,新生代使用Scavenge算法快速回收短生命周期對(duì)象,老生代使用標(biāo)記-清除和標(biāo)記-整理算法優(yōu)化長(zhǎng)期存活對(duì)象的回收,V8通過(guò)增量標(biāo)記、并發(fā)GC和增量壓縮等優(yōu)化策略減少垃圾回收對(duì)性能的影響2025-02-02
從對(duì)象列表中獲取一個(gè)對(duì)象的方法,依據(jù)關(guān)鍵字和值
下面小編就為大家?guī)?lái)一篇從對(duì)象列表中獲取一個(gè)對(duì)象的方法,依據(jù)關(guān)鍵字和值。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09