JavaScript伸縮的菜單簡單示例

更新時間：2013年12月03日 17:21:42 作者：

伸縮的菜單，想必大家都有見到過吧，實現(xiàn)方法也是很多的，在接下來的文章中為大家介紹下使用js是如何實現(xiàn)的，需要的朋友可以參考下

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<title>伸縮的菜單</title> 
<style> 
<!-- 
body{ 
background-color:#ffdee0; 
} 
#navigation { 
width:200px; 
font-family:Arial; 
} 
#navigation > ul { 
list-style-type:none;/* 不顯示項目符號 */ 
margin:0px; 
padding:0px; 
} 
#navigation > ul > li { 
border-bottom:1px solid #ED9F9F;/* 添加下劃線 */ 
} 
#navigation > ul > li > a{ 
display:block;/* 區(qū)塊顯示 */ 
padding:5px 5px 5px 0.5em; 
text-decoration:none; 
border-left:12px solid #711515;/* 左邊的粗紅邊 */ 
border-right:1px solid #711515;/* 右側陰影 */ 
} 
#navigation > ul > li > a:link, #navigation > ul > li > a:visited{ 
background-color:#c11136; 
color:#FFFFFF; 
} 
#navigation > ul > li > a:hover{ /* 鼠標經過時 */ 
background-color:#990020;/* 改變背景色 */ 
color:#ffff00;/* 改變文字顏色 */ 
} 


/* 子菜單的CSS樣式 */ 
#navigation ul li ul{ 
list-style-type:none; 
margin:0px; 
padding:0px 0px 0px 0px; 
} 
#navigation ul li ul li{ 
border-top:1px solid #ED9F9F; 
} 
#navigation ul li ul li a{ 
display:block; 
padding:3px 3px 3px 0.5em; 
text-decoration:none; 
border-left:28px solid #a71f1f; 
border-right:1px solid #711515; 
} 
#navigation ul li ul li a:link, #navigation ul li ul li a:visited{ 
background-color:#e85070; 
color:#FFFFFF; 
} 
#navigation ul li ul li a:hover{ 
background-color:#c2425d; 
color:#ffff00; 
} 
#navigation ul li ul.myHide{ /* 隱藏子菜單 */ 
display:none; 
} 
#navigation ul li ul.myShow{ /* 顯示子菜單 */ 
display:block; 
} 
--> 
</style> 
<script language="javascript"> 
function change(){ 
//通過父元素li，找到兄弟元素ul 
var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0]; 
//CSS交替更換來實現(xiàn)顯、隱 
if(oSecondDiv.className == "myHide") 
oSecondDiv.className = "myShow"; 
else 
oSecondDiv.className = "myHide"; 
} 
window.onload = function(){ 
var oUl = document.getElementById("listUL"); 
var aLi = oUl.childNodes;//子元素 
var oA; 
for(var i=0;i<aLi.length;i++){ 
//如果子元素為li，且這個li有子菜單ul 
if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){ 
oA = aLi[i].firstChild;//找到超鏈接 
oA.onclick = change;//動態(tài)添加點擊函數(shù) 
} 
} 
} 
</script> 
</head> 
<body> 
<div id="navigation"> 
<ul id="listUL"> 
<li><a href="#">Home</a></li> 
<li><a href="#">News</a> 
<ul class="myHide"> 
<li><a href="#">Lastest News</a></li> 
<li><a href="#">All News</a></li> 
</ul> 
</li> 
<li><a href="#">Sports</a> 
<ul class="myHide"> 
<li><a href="#">Basketball</a></li> 
<li><a href="#">Football</a></li> 
<li><a href="#">Volleyball</a></li> 
</ul> 
</li> 
<li><a href="#">Weather</a> 
<ul class="myHide"> 
<li><a href="#">Today's Weather</a></li> 
<li><a href="#">Forecast</a></li> 
</ul> 
</li> 
<li><a href="#">Contact Me</a></li> 
</ul> 
</div> 
</body> 
</html> 

您可能感興趣的文章:

JS代碼簡潔方式之函數(shù)方法詳解
這篇文章主要介紹了JS代碼簡潔方式之函數(shù)方法詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-07-07
JavaScript中數(shù)據(jù)結構與算法(一)：棧
這篇文章主要介紹了JavaScript中數(shù)據(jù)結構與算法(一)：棧,本文講解了棧的結構、什么是回文以及遞歸等內容,講解的不錯,通俗易懂,需要的朋友可以參考下
2015-06-06
babel7按需加載polyfill示例詳解
這篇文章主要為大家介紹了babel7按需加載polyfill示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-02-02
解決axios會發(fā)送兩次請求,有個OPTIONS請求的問題
這篇文章主要介紹了解決axios會發(fā)送兩次請求,有個OPTIONS請求的問題,需要的朋友可以參考下
2018-10-10
javascript權威指南學習筆記之javascript數(shù)據(jù)類型
JavaScript中允許使用三種基本數(shù)據(jù)類型數(shù)字，文本字符和布爾值。其中數(shù)字包括符點數(shù).此外，它還支持兩種小數(shù)據(jù)類型－null(空)和undefined(未定義)，該兩種小數(shù)據(jù)類型，它們各自只定義了一個值。
2011-09-09
javascript實現(xiàn)瀑布流自適應遇到的問題及解決方案
這篇文章主要介紹了javascript實現(xiàn)瀑布流自適應遇到的問題及解決方案,需要的朋友可以參考下
2015-01-01
bootstrap中selectpicker下拉框使用方法實例
這篇文章主要給大家介紹了關于bootstrap中selectpicker下拉框使用的相關資料，文中通過示例介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。
2018-03-03
BootStrap selectpicker后臺動態(tài)綁定數(shù)據(jù)
這篇文章主要介紹了BootStrap selectpicker后臺動態(tài)綁定數(shù)據(jù)的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
js遍歷json對象所有key及根據(jù)動態(tài)key獲取值的方法(必看)
下面小編就為大家?guī)硪黄猨s遍歷json對象所有key及根據(jù)動態(tài)key獲取值的方法(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-03-03
JavaScript設置彈出式獨立窗口頁面和window的方法舉例詳解
window.open是網頁中經常遇到的彈出窗口代碼,不是網絡中比較反感的那類彈出代碼,下面這篇文章主要給大家介紹了關于JavaScript設置彈出式獨立窗口頁面和window的方法,需要的朋友可以參考下
2024-01-01