DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> JavaScript制作可折疊的彈出式菜單
JavaScript制作可折疊的彈出式菜單
編輯:JavaScript綜合知識     

 彈出式菜單想必大家在浏覽網頁時都有見過吧,本文要為大家介紹的是可折疊的彈出式菜單,你若感興趣可以參考下

 代碼如下: <!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>   
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved