更新時(shí)間：2014-12-05
這是一個(gè)非常簡單的菜單，雖然簡單，但我們可以從這個(gè)示例中學(xué)習(xí)到一些有關(guān)CSS和JavaScripts的一些有關(guān)知識(shí)，對于認(rèn)識(shí)下拉式菜單的制作原理和基礎(chǔ)有很大的好處。在這個(gè)示例中，我用到了DIV標(biāo)識(shí)來作為我的下拉菜單列，而用一個(gè)TABLE來做我的菜單頭。原理就是通過識(shí)別鼠標(biāo)移動(dòng)來開關(guān)下拉菜單列的顯示屬性。
下面是這個(gè)DIV菜單的效果，你可單擊頁面任何空白地來取消下拉菜單的顯示。
雜志技術(shù)站點(diǎn) 門戶站點(diǎn) 個(gè)人收藏站點(diǎn)
天極網(wǎng) Yesky.com
電腦商情報(bào)
新潮電子
新浪網(wǎng) Sina
搜狐 Sohu
網(wǎng)易 Netease
耗子網(wǎng)絡(luò)編程站
中國同學(xué)錄
中國軟件開發(fā)網(wǎng)
好了，如果我告訴你，這樣的效果也就幾十行的代碼，你信嗎？不管怎么樣，讓我們來一步一步學(xué)習(xí)這個(gè)菜單是怎么做出來的。Step-by-Step，Let's go.
第一步，你需要定義一下菜單項(xiàng)和菜單列的 CSS層疊樣式表，這里，如果你不知道CSS是什么意思，請參閱《電腦報(bào)網(wǎng)站》的有關(guān)CSS的教程。我們定義兩個(gè)CSS的Class，一個(gè)是Meun，另一個(gè)是SubMenu， Menu定義了顯示在菜單頂上的樣式，而Submenu定義了下拉菜單列的顯示樣式。這里，需要注意的是Submenu中的“position:absolute;width:200”CSS屬性，這是必須的，因?yàn)檫@決定了我們顯示這個(gè)Submenu的位置。而其它的CSS的屬性是可要可不要的。下面是這兩個(gè)CSS Class的描述，你可以把下面這段話放在網(wǎng)的<head></head>之間，或是<body></body>之間。
<STYLE>
<!--
.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}
-->
</STYLE>
第二步，我們來看一下隱藏和顯示下拉菜單列的Javascript的代碼。這段代碼非常簡單，只要學(xué)過一點(diǎn)JavaScripts的人應(yīng)該是很容易看懂的。如果你不懂Javascript的話，也請參閱《電腦報(bào)網(wǎng)站》上的有關(guān)JavaScripts的文章。這段代碼的含義是，無論什么時(shí)候，只要鼠標(biāo)一進(jìn)入菜單項(xiàng)（Menu）元件中，那么它的下拉菜單列就會(huì)被一個(gè)叫Show函數(shù)顯現(xiàn)出來。這個(gè)Show函數(shù)主要功能是顯示當(dāng)前的下拉菜單列，并隱藏其它的菜單列，并把當(dāng)前所顯示的菜單項(xiàng)放入變量cm中。另外，在這里，我還加入了一個(gè)簡單的鼠標(biāo)單擊事件（onclick）句柄，當(dāng)鼠標(biāo)單擊網(wǎng)頁時(shí)，就隱藏所有的下拉菜單列。下面，我給出了整個(gè)Javascript的程序，其中有一個(gè)叫 getPos 的函數(shù)，這是用來獲取下拉菜單列的顯示位置的。
