DIV下拉式菜單（一）

2024-04-27 13:54:19

字體：大中小

來源：轉載

供稿：網友

這是一個非常簡單的菜單，雖然簡單，但我們可以從這個示例中學習到一些有關CSS和javaScripts的一些有關知識，對于認識下拉式菜單的制作原理和基礎有很大的好處。在這個示例中，我用到了DIV標識來作為我的下拉菜單列，而用一個TABLE來做我的菜單頭。原理就是通過識別鼠標移動來開關下拉菜單列的顯示屬性。
　　下面是這個DIV菜單的效果，你可單擊頁面任何空白地來取消下拉菜單的顯示。

雜志技術站點門戶站點個人收藏站點

　　天極網 Yesky.com
　　電腦商情報
　　新潮電子
　

　　新浪網 Sina
　　搜狐 Sohu
　　網易 Netease
　

　　耗子網絡編程站
　　中國同學錄
　　中國軟件開發網

　　　好了，如果我告訴你，這樣的效果也就幾十行的代碼，你信嗎？不管怎么樣，讓我們來一步一步學習這個菜單是怎么做出來的。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的描述，你可以把下面這段話放在網的<head></head>之間，或是<body></body>之間。

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

<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 }
</SCRIPT>