当前位置:首页 » 网站技术 » DHTML

DIV下拉式菜单

...

 

    这是一个非常简单的菜单,虽然简单,但我们可以从这个示例中学习到一些有关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>之间。

<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的代码。这段代码非常简单,只要学过一点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>

    你可以把这段程序放在<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 HREF="http:\\www.yesky.com">天极网 Yesky.com</A>
  <BR><A HREF="http:\\www.cbinews.com">电脑商情报</A>
  <BR><A HREF="http:\\www.newsoft.com.cn">新潮电子</A>
  <BR> 
</DIV> 
<DIV ID="ds2" CLASS="submenu" STYLE="display:none">
  <BR><A HREF="http:\\www.sina.com.cn">新浪网 Sina</A>
  <BR><A HREF="http:\\www.sohu.com.cn">搜狐 Sohu</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">耗子网络编程站</A>
  <BR><A HREF="http:\\www.5460.net">中国同学录</A>
  <BR><A HREF="http:\\www.csdn.net">中国软件开发网</A>
  <BR> 
</DIV>
  这就是全部的过程了,有了以上四个步骤,你一定可以看见一个菜单了,把它放在你的网页上吧,一定会很漂亮的。当然,你也可以自己试着改变一下菜单的属性,让它更像一个菜单。

继续阅读
DHTML实现Web页面内容动态改变
使用DHTML制作网页
DHTML实现网页渐入特殊效果
用推送技术动态更新页面内容
DHTML中的“行为”组件
DHTML动态链接、鼠标击活链接
DHTML幻灯片播放程序
DHTML实现幻灯片秀
DHTML脚本技术应用ABC
发表评论

昵称:
最新评论
暂时没有评论!