<![CDATA[Latest posts for the topic "跨瀏覽器動態選單"]]> https://forum.andowson.com/posts/list/5.page JForum - http://www.jforum.net 跨瀏覽器動態選單 使用時只要修改選單名稱及選項名稱和超連結即可，如果需要新增選單，則只要再多加一個div，並設定其id="tab_x"，然後在下方table區塊新增一個選單的超連結並修改showMenu('tab_x', this)裡面的第一個參數為對應的tab_x即可。

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

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

[code=html]
<!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>
[/code]]]> https://forum.andowson.com/posts/preList/416/820.page https://forum.andowson.com/posts/preList/416/820.page GMT