安道生網站技術練功房 - 分享經驗，累積智慧

This message was edited 4 times. Last update was at 2010-05-12 21:04:41

這是同事分享給我的一份sample code，經過測試，在IE, Firefox, Chrome下都可以正常顯示子選單。子選單的位置會在選單下方。
使用時只要修改選單名稱及選項名稱和超連結即可，如果需要新增選單，則只要再多加一個div，並設定其id="tab_x"，然後在下方table區塊新增一個選單的超連結並修改showMenu('tab_x', this)裡面的第一個參數為對應的tab_x即可。

跨瀏覽器的重點是JavaScript中的座標值最後要加上"px"。

注意：因為JForum會去掉href，所以請自行在<a >部分補上href=""，或是下載附檔。

<!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>Dynamic Menu</title>
<script type="text/javascript">
var lastMenu;
function showMenu(identifier, element) {
  menu = document.getElementById(identifier);
  menu.style.left = getPositionX(element)+"px";
  menu.style.top = getPositionY(element) + element.offsetHeight+"px";
  menu.style.visibility="visible";
  if(lastMenu != menu) {
    closeLastMenu();
  }
  lastMenu = menu;
}
function closeLastMenu() {
  if(lastMenu != null) {
    lastMenu.style.visibility="hidden";
  }
}
function getPositionX(element) {
	return element.offsetLeft + (element.offsetParent ? getPositionX(element.offsetParent) : element.x ? element.x : 0);
}
function getPositionY(element) {
  return element.offsetTop + (element.offsetParent ? getPositionY(element.offsetParent) : element.y ? element.y : 0);
}
</script>
  </head>
  <body>
    <div id="tab_1" style="background-color:yellow;visibility:hidden;position:absolute">
      <table>
        <tr><td>
            <table style="width:100%">
              <tr><td>
                  <a href="">選項1-1</a></td>
              </tr>
            </table></td>
        </tr>
      </table>
    </div>
    <div id="tab_2" style="background-color:yellow;visibility:hidden;position:absolute">
      <table>
        <tr><td>
            <table style="width:100%">
              <tr><td>
                  <a href="">選項2-1</a></td>
              </tr>
              <tr><td>
                  <a href="">選項2-2</a></td>
              </tr>
            </table></td>
        </tr>
      </table>
    </div>
    <div id="tab_3" style="background-color:yellow;visibility:hidden;position:absolute">
      <table>
        <tr><td>
            <table style="width:100%">
              <tr><td>
                  <a href="">選項3-1</a></td>
              </tr>
              <tr><td>
                  <a href="">選項3-2</a></td>
              </tr>
              <tr><td>
                  <a href="">選項3-3</a></td>
              </tr>
            </table></td>
        </tr>
      </table>
    </div>
    <table border="0" cellspacing="0">
      <tr>
        <td onmouseover="javascript:showMenu('tab_1', this)">
          <a href="">選單一</a></td>
        <td onmouseover="javascript:showMenu('tab_2', this)">
          <a href="">選單二</a></td>
        <td onmouseover="javascript:showMenu('tab_3', this)">
          <a href="">選單三</a></td>
      </tr>
    </table>
  </body>
</html>

安道生網站技術練功房 - 分享經驗，累積智慧

練功房推薦書單