JavaScript制作的可折疊彈出式菜單示例
更新時(shí)間：2014年04月04日 15:36:29 作者：
彈出式菜單想必大家在瀏覽網(wǎng)頁(yè)時(shí)都有見(jiàn)過(guò)吧，本文要為大家介紹的是可折疊的彈出式菜單，你若感興趣可以參考下
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可折疊彈出式菜單</title>
</head>
<style>
body {background-color: #FFF;color: #000;}
div {margin-bottom: 10px;}
ul.menu {display: none;list-style-type: none;margin-top: 5px;}
a.menuLink {font-size: 16px;font-weight: bold;}
</style>
<script type="text/javascript">
window.onload = initAll;
function initAll() {
var allLinks = document.getElementsByTagName("a");
for (var i=0; i<allLinks.length; i++) {
if (allLinks[i].className.indexOf("menuLink") > -1) {
allLinks[i].onclick = toggleMenu;
}
}
}
function toggleMenu() {
var startMenu = this.href.lastIndexOf("/")+1;
var stopMenu = this.href.lastIndexOf(".");
var thisMenuName = this.href.substring(startMenu,stopMenu);
var thisMenu = document.getElementById(thisMenuName).style;
if (thisMenu.display == "block") {
thisMenu.display = "none";
}
else {
thisMenu.display = "block";
}
return false;
}
</script>
<body>
<h1>Shakespeare's Plays</h1>
<div>
<a href="menu1.html" class="menuLink">Comdeis</a>
<ul class="menu" id="menu1">
<li><a href="pg1.html">All's Well That Ends Well</a></li>
<li><a href="pg2.html">As You Like It</a></li>
<li><a href="pg3.html">Love's Labour's Lost</a></li>
<li><a href="pg4.html">The Comedy of Errors</a></li>
</ul>
</div>
<div>
<a href="menu2.html" class="menuLink">Tragedies</a>
<ul class="menu" id="menu2">
<li><a href="pg5.html">Anthony & Cleopatra</a></li>
<li><a href="pg6.html">Hamlet</a></li>
<li><a href="pg7.html">Romeo & Juliet</a></li>
</ul>
</div>
<div>
<a href="menu3.html" class="menuLink">Histories</a>
<ul class="menu" id="menu3">
<li><a href="pg8.html">Henry IV, Part1</a></li>
<li><a href="pg9.html">Henry IV, Part2</a></li>
</ul>
</div>
</body>
</html>
您可能感興趣的文章:
相關(guān)文章
使用threejs實(shí)現(xiàn)滾動(dòng)效果的示例代碼
某一天我在刷抖音時(shí),看到一個(gè)UI設(shè)計(jì)師分享了一個(gè)好看的網(wǎng)頁(yè)滾動(dòng)動(dòng)效設(shè)計(jì),那種飄逸流暢的動(dòng)畫(huà)效果立刻抓住了我的眼球,我腦海里立刻開(kāi)始想象用代碼如何實(shí)現(xiàn)這個(gè)效果,所以本文給大家分享了如何使用threejs實(shí)現(xiàn)滾動(dòng)效果,感興趣的朋友可以參考下2024-01-01
這篇文章主要介紹了全面解析Javascript無(wú)限添加QQ好友原理的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
鍵盤(pán)上下鍵移動(dòng)選擇table表格行的js代碼
通過(guò)鍵盤(pán)上的上下鍵可以選擇表格行的實(shí)現(xiàn)效果代碼。思路不錯(cuò)，需要的朋友可以參考下。2009-12-12
這篇文章主要是對(duì)JavaScript中的傳值與傳引用進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要為大家詳細(xì) 介紹了JS實(shí)現(xiàn)可視化文件上傳，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-09
我們?cè)谑褂肑S渲染DOM時(shí)，一般使用字符串創(chuàng)建DOM然后附加到父元素上，如果附加的DOM是動(dòng)態(tài)易變的，那需要在函數(shù)中寫(xiě)大量邏輯。如果在控件實(shí)現(xiàn)過(guò)程中，這帶來(lái)的問(wèn)題更為嚴(yán)重。2013-04-04
這篇文章主要介紹了如何點(diǎn)擊一個(gè)按鈕實(shí)現(xiàn)彈出一個(gè)居中窗口，并且此窗口帶有半透明的遮罩層效果,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了上傳圖片js判斷圖片尺寸和格式并兼容IE,需要的朋友可以參考下2014-09-09
javascript 延遲加載技術(shù)(lazyload)簡(jiǎn)單實(shí)現(xiàn)
延遲加載技術(shù)(簡(jiǎn)稱lazyload)并不是新技術(shù), 它是js程序員對(duì)網(wǎng)頁(yè)性能優(yōu)化的一種方案.2011-01-01
JS控制彈出懸浮窗口(一覽畫(huà)面)的實(shí)例代碼
這篇文章主要介紹了JS控制彈出懸浮窗口(一覽畫(huà)面)的實(shí)例代碼的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-05-05