DIV下拉式菜单(二)

2004-01-30 10:35:42  作者
你可以把这段程序放在%26lt;head%26gt;%26lt;/head%26gt;标识之间,或是网页的任意位置。
  接下来,我们还要定义我们的实际菜单项了,这里我们要给每一个菜单项加上一个鼠标的移动事件(OnMouseOver)句柄,并且让这个事件调用我们上面定义的Show函数。也就是说,当鼠标一进入我们的菜单项中,我们的show函数就开始执行了。这里,我们还要给我们的每个菜单项定义一个ID号,并且把其下拉菜单列的ID名传入Show函数中,这对我们控制下拉菜单列很要害,下面我给出了菜单项的HTML语法描述
%26lt;table border=0%26gt;
  %26lt;tr%26gt;
   %26lt;td ID="d1" onmouseover="show(this,ds1);" class="menu"%26gt;杂志技术站点%26lt;/td%26gt;
   %26lt;td ID="d2" onmouseover="show(this,ds2);" class="menu"%26gt;门户站点%26lt;/td%26gt;
   %26lt;td ID="d3" onmouseover="show(this,ds3);" class="menu"%26gt;个人收藏站点%26lt;/td%26gt;
  %26lt;/tr%26gt;
%26lt;/table%26gt;
  最后,我们要定义我们的下拉菜单列了。每一个下拉菜单列,我们都要赋予其Submenu的CSS属性,和一个ID名字好让我们的Show函数控制它,最后,我们让他的默认显示方式为none,也就是让它不显示。这是给它的Display样式赋值“none”来实现的。下面,我给出了下拉菜单列的HTML语法描述
%26lt;DIV ID="ds1" CLASS="submenu" STYLE="display:none"%26gt;
  %26lt;BR%26gt;%26lt;A HREF="http:\\www.yesky.com"%26gt;天极网 Yesky.com%26lt;/A%26gt;
  %26lt;BR%26gt;%26lt;A HREF="http:\\www.cbinews.com"%26gt;电脑商情报%26lt;/A%26gt;
  %26lt;BR%26gt;%26lt;A HREF="http:\\www.newsoft.com.cn"%26gt;新潮电子%26lt;/A%26gt;
  %26lt;BR%26gt; 
%26lt;/DIV%26gt;
%26lt;DIV ID="ds2" CLASS="submenu" STYLE="display:none"%26gt;
  %26lt;BR%26gt;%26lt;A HREF="http:\\www.sina.com.cn"%26gt;新浪网 Sina%26lt;/A%26gt;
  %26lt;BR%26gt;%26lt;A HREF="http:\\www.sohu.com.cn"%26gt;搜狐 Sohu%26lt;/A%26gt;
  %26lt;BR%26gt;%26lt;A HREF="http:\\www.163.com"%26gt;网易 Netease%26lt;/A%26gt;
  %26lt;BR%26gt; 
%26lt;/DIV%26gt;
%26lt;DIV ID="ds3" CLASS="submenu" STYLE="display:none"%26gt;
  %26lt;BR%26gt;%26lt;A HREF="http:\\haoel.yeah.net"%26gt;耗子网络编程站%26lt;/A%26gt;
  %26lt;BR%26gt;%26lt;A HREF="http:\\www.5460.net"%26gt;中国同学录%26lt;/A%26gt;
  %26lt;BR%26gt;%26lt;A HREF="http:\\www.csdn.net"%26gt;中国软件开发网%26lt;/A%26gt;
  %26lt;BR%26gt; 
%26lt;/DIV%26gt;
  这就是全部的过程了,有了以上四个步骤,你一定可以看见一个菜单了,把它放在你的网页上吧,一定会很漂亮的。当然,你也可以自己试着改变一下菜单的属性,让它更像一个菜单。
相关文章