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