JavaScript下拉菜單功能實例代碼
更新時間：2017年03月01日 08:49:05 作者：liuyingshuai_blog
這篇文章主要介紹了JavaScript下拉菜單實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
本文給大家分享一段實例代碼關于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";
}
}
// 點擊三角時
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下拉菜單功能實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
使用typescript類型實現(xiàn)ThreeSum
這篇文章主要介紹了使用typescript類型實現(xiàn)ThreeSum，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以一下，希望對你學習又是幫助2022-08-08
js實現(xiàn)時間顯示幾天前、幾小時前或者幾分鐘前的方法集錦
這篇文章主要介紹了js實現(xiàn)時間顯示幾天前、幾小時前或者幾分鐘前的方法,實例匯總分析了時間顯示格式轉換的常用思路與技巧,需要的朋友可以參考下2015-05-05
js獲取元素到可視區(qū)的距離、瀏覽器窗口滾動距離及元素距離瀏覽器頂部距離
這篇文章主要給大家介紹了關于js獲取元素到可視區(qū)的距離、瀏覽器窗口滾動距離及元素距離瀏覽器頂部距離的相關資料,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11
閉包是一個擁有許多變量和綁定了這些變量的環(huán)境的表達式（通常是一個函數(shù)），因而這些變量也是該表達式的一部分。相信很少有人能直接看懂這句話，因為他描述的太學術。其實這句話通俗的來說就是：JavaScript中所有的function都是一個閉包。2015-04-04
在學習網(wǎng)頁中的表單驗證，順便學習下正則表達式,在網(wǎng)上找了后發(fā)現(xiàn)了一個比較齊全的資源，稍微進行了一下排版，喜歡的朋友可以收藏2013-11-11
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)自定義滾動條效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
javascript在firefox下設為首頁的代碼...2007-09-09
這篇文章主要介紹了redux處理異步action解決方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
這篇文章主要介紹了JS對象的深度克隆方法,結合實例形式分析了JavaScript深度克隆的實現(xiàn)技巧,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了JavaScript通過字典進行字符串翻譯轉換的方法,涉及javascript字符串轉換的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03