DOM -- 以 JavaScript 實作功能表 (Menu)

<html>
<head>
<title>範例 -- 功能表實作</title>
<style>
.menu { background-color:#eeeeee; width:90px; position:absolute; }
.popup { background-color:#dddddd; width:90px; visibility:hidden; position:absolute;}
</style>
<script type="text/javascript">
function show(id) {
  document.getElementById(id).style.visibility='visible';
}
 
function hide(id) {
  document.getElementById(id).style.visibility='hidden';
}
 
function attach(popupId, menuId) {
  var popup = document.getElementById(popupId);
  var menu = document.getElementById(menuId);
  popup.style.left = menu.style.left;
  popup.style.top = parseInt(menu.style.top)+20;
}
 
function load() {
  attach("menu1popup", "menu1");
  attach("menu2popup", "menu2");
}
</script>    
  </head>
  <body onload="load()">
    <table id="menubar" width="200px"><tr>
      <td id="menu1" style="left:100;top:10;" class="menu" onmouseover="show('menu1popup');" 
          onmouseout="hide('menu1popup')">menu1</td> 
      <td id="menu2" style="left:200;top:10;" class="menu" onmouseover="show('menu2popup');" 
          onmouseout="hide('menu2popup')">menu2</td> 
    </tr></table>
    <div id="menu1popup" class="popup" style="left:0;top:0">
      <div>menu 1.1</div>
      <div>menu 1.2</div>
    </div>
    <div id="menu2popup" class="popup" style="left:0;top:0">
      <div>menu 2.1</div>
      <div>menu 2.2</div>
      <div>menu 2.3</div>
    </div>
  </body>
</html>

Facebook

page revision: 7, last edited: 14 Oct 2010 09:04

Edit Rate (0) Tags Discuss (0) History Files Print Site tools + Options

金門大學：免費電子書、教材、程式、動畫

訊息

Facebook

Facebook

Wikidot

Post preview:

Other interesting sites