DIV下拉式選單(轉)[@more@]

　　script> var cm=null; document.onclick = new Function("show(null)") function getPos(el,sProp) { var iPos = 0 while (el!=null) { iPos+=el["offset" + sProp] el = el.offsetParent } return iPos } function show(el,m) { if (m) { m.style.display=""; m.style.pixelLeft = getPos(el,"Left") m.style.pixelTop = getPos(el,"Top") + el.offsetHeight } if ((m!=cm) && (cm)) cm.style.display="none" cm=m }

　　這是一個非常簡單的選單，雖然簡單，但我們可以從這個示例中學習到一些有關CSS和JavaScripts的一些有關知識，對於認識下拉式選單的製作原理和基礎有很大的好處。在這個示例中，我用到了DIV標識來作為我的下拉選單列，而用一個TABLE來做我的選單頭。原理就是透過識別滑鼠移動來開關下拉選單列的顯示屬性。

　　下面是這個DIV選單的效果，你可單擊頁面任何空白地來取消下拉選單的顯示。

　　　好了，如果我告訴你，這樣的效果也就幾十行的程式碼，你信嗎？不管怎麼樣，讓我們來一步一步學習這個選單是怎麼做出來的。Step-by-Step，Let"s go.

　　第一步，你 ?ㄒ逡幌虜說ハ詈筒說チ械?CSS層疊樣式表，這裡，如果你不知道CSS是什麼意思，請參閱《電腦報網站》的有關CSS的教程。我們定義兩個CSS的Class，一個是Meun，另一個是SubMenu， Menu定義了顯示在選單頂上的樣式，而Submenu定義了下拉選單列的顯示樣式。這裡，需要注意的是Submenu中的“position:absolute;width:200”CSS屬性，這是必須的，因為這決定了我們顯示這個Submenu的位置。而其它的CSS的屬性是可要可不要的。下面是這兩個CSS Class的描述，你可以把下面這段話放在網的$#@60;head$#@62;$#@60;/head$#@62;之間?蚴?#@60;body$#@62;$#@60;/body$#@62;之間。

$#@60;STYLE$#@62;

$#@60;!--

　　.menu {background-color:green;width:120; height:20;color: white; text-align: center;font-size:9pt;font-weight:bolder}

　　.submenu {position:absolute;top:40;background-color:lightyellow;width:180; font-size:9pt}

--$#@62;

$#@60;/STYLE$#@62;

　　第二步，我們來看一下隱藏和顯示下拉選單列的Javascript的程式碼。這段程式碼非常簡單，只要學過一點JavaScripts的人應該是很容易看懂的。如果你不懂Javascript的話，也請參閱《電腦報網站》上的有關JavaScripts的文章。這段程式碼的含義是，無論什麼時候，只要滑鼠一進入選單項（Menu）元件中，那麼它的下拉選單列就會被一個叫Show函式顯現出來。這個Show函式主要功能是顯示當前的下拉選單列，並隱藏其它的選單列，並把當前所顯示的選單項放入變數cm中。另外，在這裡，我還加入了一個簡單的滑鼠單擊事件（onclick）控制程式碼，當滑鼠單擊網頁時，就隱藏所有的下拉選單列。下面，我給出了整個Javascript的程式，其中有一個叫 getPos 的函式，這是用來獲取下拉選單列的顯示位置的。

$#@60;SCRIPT$#@62;

　　var cm=null;

　　document.onclick = new Function("show(null)")

function getPos(el,sProp)

{var iPos = 0

　　while (el!=null)

　　 {iPos+=el["offset" + sProp]

　　　　el = el.offsetParent}

　　return iPos}

function show(el,m)

{if (m) {m.style.display=" ";

　　　　　　m.style.pixelLeft = getPos(el,"Left")

　　　　　　m.style.pixelTop = getPos(el,"Top") + el.offsetHeight}

　　if ((m!=cm) && (cm)) cm.style.display="none" cm=m }

$#@60;/SCRIPT$#@62;

DIV下拉式選單(轉)

相關文章