DIV drop-down menu (2)
Author：Eve Cole
Update Time：2009-06-20 17:00:56
You can place this program between the <head></head> tags, or anywhere on the web page.
Next, we have to define our actual menu items. Here we need to add a mouse movement event (OnMouseOver) handle to each menu item, and let this event call the Show function we defined above. In other words, as soon as the mouse enters our menu item, our show function starts executing. Here, we also need to define an ID number for each of our menu items, and pass the ID name of its drop-down menu column into the Show function. This is critical for us to control the drop-down menu column. Below I give the menu item's ID name. HTML syntax description:
<table border=0>
<tr>
<td ID="d1" onmouseover="show(this,ds1);" class="menu">Magazine Technology Site</td>
<td ID="d2" onmouseover="show(this,ds2);" class="menu">Portal</td>
<td ID="d3" onmouseover="show(this,ds3);" class="menu">Personal Favorite Site</td>
</tr>
</table>
Finally, we have to define our dropdown menu column. For each drop-down menu column, we need to give it the CSS attribute of Submenu, and an ID name so that our Show function can control it. Finally, we set its default display mode to none, which means that it will not be displayed. This is achieved by assigning "none" to its Display style. Below, I've given an HTML syntax description for a drop-down menu column:
<DIV ID="ds1" CLASS="submenu" STYLE="display:none">
<BR><A HREF="http:\www.yesky.com">tianji.com Yesky.com</A>
<BR><A HREF="http:\www.cbinews.com">Computer Business Information</A>
<BR><A HREF="http:\www.newsoft.com.cn">New Fashion Electronics</A>
<BR>
</DIV>
<DIV ID="ds2" CLASS="submenu" STYLE="display:none">
<BR><A HREF="http:\www.sina.com.cn">Sina Sina</A>
<BR><A HREF="http:\www.sohu.com.cn">SohuSohu</A>
<BR><A HREF="http:\www.163.com">Netease</A>
<BR>
</DIV>
<DIV ID="ds3" CLASS="submenu" STYLE="display:none">
<BR><A HREF="http:\haoel.yeah.net">Mouse Network Programming Station</A>
<BR><A HREF="http:\www.5460.net">Chinese classmates</A>
<BR><A HREF="http:\www.csdn.net">China Software Development Network</A>
<BR>
</DIV>
This is the whole process. With the above four steps, you will definitely be able to see a menu. Put it on your web page and it will definitely look beautiful. Of course, you can also try changing the properties of the menu yourself to make it more like a menu.
