DIV下拉式菜單（二）

2024-04-27 13:54:20

字體：大中小

來源：轉載

供稿：網友

你可以把這段程序放在<head></head>標識之間，或是網頁的任意位置。
　　接下來，我們還要定義我們的實際菜單項了，這里我們要給每一個菜單項加上一個鼠標的移動事件(OnMouSEOver)句柄，并且讓這個事件調用我們上面定義的Show函數。也就是說，當鼠標一進入我們的菜單項中，我們的show函數就開始執行了。這里，我們還要給我們的每個菜單項定義一個ID號，并且把其下拉菜單列的ID名傳入Show函數中，這對我們控制下拉菜單列很關鍵，下面我給出了菜單項的HTML語法描述：
<table border=0>
　　<tr>
　　　<td ID="d1" onmouseover="show(this,ds1);" class="menu">雜志技術站點</td>
　　　<td ID="d2" onmouseover="show(this,ds2);" class="menu">門戶站點</td>
　　　<td ID="d3" onmouseover="show(this,ds3);" class="menu">個人收藏站點</td>
　　</tr>
</table>
　　最后，我們要定義我們的下拉菜單列了。每一個下拉菜單列，我們都要賦予其Submenu的CSS屬性，和一個ID名字好讓我們的Show函數控制它，最后，我們讓他的默認顯示方式為none，也就是讓它不顯示。這是給它的Display樣式賦值“none”來實現的。下面，我給出了下拉菜單列的HTML語法描述：
<DIV ID="ds1" CLASS="submenu" STYLE="display:none">
　　<BR><A >天極網 Yesky.com</A>
　　<BR><A >電腦商情報</A>
　　<BR><A >新潮電子</A>
　　<BR>　
</DIV>
<DIV ID="ds2" CLASS="submenu" STYLE="display:none">
　　<BR><A >新浪網 Sina</A>
　　<BR><A >搜狐 Sohu</A>
　　<BR><A >網易 Netease</A>
　　<BR>　
</DIV>
<DIV ID="ds3" CLASS="submenu" STYLE="display:none">
　　<BR><A >耗子網絡編程站</A>
　　<BR><A >中國同學錄</A>
　　<BR><A >中國軟件開發網</A>
　　<BR>　
</DIV>
　　這就是全部的過程了，有了以上四個步驟，你一定可以看見一個菜單了，把它放在你的網頁上吧，一定會很漂亮的。當然，你也可以自己試著改變一下菜單的屬性，讓它更像一個菜單。

上一篇：DIV下拉式菜單（一）

下一篇：巧妙的幻燈片秀