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

andowson

這是同事分享給我的一份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</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</td>

              </tr>

              <tr><td>

                  <a href="">選項2-2</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</td>

              </tr>

              <tr><td>

                  <a href="">選項3-2</td>

              </tr>

              <tr><td>

                  <a href="">選項3-3</td>

              </tr>

            </table></td>

        </tr>

      </table>

    </div>

    <table border="0" cellspacing="0">

      <tr>

        <td onmouseover="javascript:showMenu('tab_1', this)">

          <a href="">選單一</td>

        <td onmouseover="javascript:showMenu('tab_2', this)">

          <a href="">選單二</td>

        <td onmouseover="javascript:showMenu('tab_3', this)">

          <a href="">選單三</td>

      </tr>

    </table>

  </body>

</html>

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

練功房推薦書單