通俗基础教程
电脑操作教程
电脑怎样拨号上网
如何做个人网页
怎样做局域网
Word教程(文字处理)
图形图象处理入门
经典提高教程
怎样使用代理服务器
如何做无盘工作站
Photoshop教程
Dreamweaver3教程
Flash4&5教程
Firework3教程
Frontpage2000教程
Authware教程
Office2000教程
如何制作动画图片
OICQ&ICQ使用方法

高手学习指南

硬件升级技巧
CGI教程
ASP教程

PHP教程

注册表使用技巧
路由器的设置
网站建设指南
SQL
最近更新:
网页编辑
相关内容

网 页 中 下 拉 菜 单 的 设 计

  徐波


  在网页制作时,为了更好地组织信息,使显示的信息分类明确、层次清晰,网页制作者往往费尽心机。常用的方法有用树型结构显示信息,用表格进行网页布局,用框架(frame)组织页面等等。但对于习惯了Windows操作系统的用户来说,利用菜单操作可以算是最自然的方法了。下面我们就来看一下怎样在网页中设计下拉式菜单。

  下拉式菜单由若干个显示在窗口顶部的主菜单条和各个菜单条下面的子菜单组成。每个子菜单往往还包含几个子菜单项。通常,只有菜单条显示在窗口中,并且当鼠标指针指向菜单条时,菜单条的子菜单才显示出来。当鼠标指针离开菜单时,子菜单则隐藏起来,回到只显示主菜单条的状态。

  根据上述下拉菜单的特点,我们就可以开始在网页中制作下拉菜单了。我们在网页的顶部放置一个区域,用于显示主菜单条,每一个主菜单条作为一个超链接横向置于该区域中,当然除非菜单项没有子菜单,一般情况下这里的超链接不指向任何地址,只用它来激活子菜单。区域的格式见程序1。

  <DIV ID='pad' ……>

  <A ID='pad1' onmouseout="mouseout(); hideMenu();" onmouseover="mouseover();

  doMenu('idpad1');" onclick="window.event.returnValue=false;">菜单项一</A>

  <A ID='pad2' onmouseout="mouseout(); hideMenu();" onmouseover="mouseover();

  doMenu('idpad2');" onclick="window.event.returnValue=false;">菜单项二</A>

  ……

  </DIV>

  

  接着,我们根据主菜单条的个数定义相应的子菜单,为每个子菜单定义一个区域,该区域中第一个元素是一条横线,然后每个子菜单作为一个超链接置于该区域中,由于子菜单纵向排列,每个超链接后加<BR>换行。当然这个区域现在还不能显示出来,但当它被激活时,其显示位置应位于其他对象之上,所以其style属性置为STYLE=' display:none; z-index:9;'。 注意每个超链接的ID均应与其主菜单的ID相同,以便于统一处理。格式见程序2。

  <SPAN ID='idpad1' STYLE='display:none; z-index:9;' onmouseout='hideMenu();'>

   <HR STYLE='position:absolute;left:0;top:0;color:white' SIZE=1>

   <DIV >

   <A ID='pad1' HREF='11.htm' onmouseout="mouseout();" onmouseover="mouseover()">

   子菜单项一一</A><BR>

   <A ID='pad1' HREF='12.htm' onmouseout="mouseout();" onmouseover="mouseover()">

   子菜单项一二</A><BR>

   <HR STYLE='color:white' SIZE=1><!--如有必要可以用横线对子菜单分组-->

   <A ID='pad1' HREF='13.htm' onmouseout="mouseout();" onmouseover="mouseover()">

   子菜单项一三</A><BR>

  ……

   </DIV>

  </SPAN>

  

  经过上面的步骤,下拉菜单的格式已经定义好了,下面的任务就是控制这些子菜单的显示和隐藏。

  当鼠标移动到主菜单条上时,应显示其子菜单,我们通过执行doMenu(MenuID)响应主菜单的onmouseover事件来完成。过程的参数MenuID是代表子菜单的区域的ID,过程执行时先设置window.event. cancelBubble = true,并计算子菜单显示的位置,包括左上角和右下角坐标。然后执行下列语句来显示子菜单所在区域:

  CurMenu.style.clip = "rect(0 0 0 0) ";CurMenu.style.display = "block";

  当鼠标移出主菜单时有两种情况,一种情况是鼠标在子菜单及其主菜单之间移动,这时不能隐藏子菜单;另一种情况是鼠标移出了子菜单及其主菜单的区域,这时需要隐藏子菜单。我们通过执行hideMenu()响应主菜单的onmouseout,同时执行hideMenu()响应子菜单所在区域的onmouseout事件来完成。

  网页中的另外两个函数mouseout() 和mouseover() 的功能很简单,分别用于处理鼠标移动时菜单项的颜色变化。

  完整的源代码参见《电子与电脑》网站www.pccomputing.com.cn。

  网页浏览的效果如图1所示,运行环境为IE4.0以上版本。

  (图注WANGYE) 图1

  <HTML>

  <HEAD>

  <TITLE>网页中的下拉菜单</TITLE>

  </HEAD>

  <SCRIPT LANGUAGE="JavaScript" >

  var IsDroped =false;

  function mouseout()

  {

   window.event.srcElement.style.color = 'white';//鼠标移开时置为白色

  }

  function mouseover()

  {

   window.event.srcElement.style.color = 'red';//鼠标进入时置为红色//鼠标进入时置为红色

  }

  function doMenu(MenuID)

  {

   var CurMenu = document.all(MenuID);

   //为避免闪烁,如果下拉菜单已经显示则不重画.

   if (IsDroped==true)

   {

   window.event.cancelBubble = true;

   return false;

   }

   window.event.cancelBubble = true;

   TempMenu = CurMenu;

   //计算下拉菜单的位置

   x = window.event.srcElement.offsetLeft + window.event.srcElement.offsetParent.offsetLeft;

   x2 = x + window.event.srcElement.offsetWidth;

   y = pad.offsetHeight;

   CurMenu.style.top = y;

   CurMenu.style.left = x;

   CurMenu.style.clip = "rect(0 0 0 0)";

   CurMenu.style.display = "block";

   //延时2毫秒后再显示菜单,保证ToolbarMenu.offsetHeight有值,避免从主菜单移向下拉菜单时下拉菜单消失.

   window.setTimeout("showMenu()", 2);

   return true;

  }

  function showMenu()

  {

   y2 = y + TempMenu.offsetHeight;

   TempMenu.style.clip = "rect(auto auto auto auto)";

   IsDroped =true;//下拉菜单已经显示

  }

  function hideMenu()

  {

   //如果在下拉菜单的范围之内移动则不隐藏.

   cY = event.clientY + document.body.scrollTop;

   if (cY>=y && cY<y2 && event.clientX >= (x+5) && event.clientX <= x2 ||

   cY>1 && cY<y && event.clientX >= (x+5) && event.clientX <= x2-10)

   { window.event.cancelBubble = true; return;}

   //隐藏

   TempMenu.style.display = "none";

   window.event.cancelBubble = true;

   IsDroped =false;

  }

  </SCRIPT>

  <body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>

  <DIV ID='menu' STYLE='position:absolute;background-color:white;width:100%;top:0;left:0;'>

   <DIV ID='pad' STYLE='position:relative;height:20;width:100%;font:bold 11pt 宋体;background-color:#007FFF;color:white;'>

   <A TARGET='_top' TITLE='' ID='pad1'

   onmouseout="mouseout(); hideMenu();" onmouseover="mouseover(); doMenu('idpad1');">

   菜单项一

   </A>

   <SPAN style="color:white"> </SPAN>

   <A TARGET='_top' TITLE='' ID='pad2'

   onmouseout="mouseout(); hideMenu();" onmouseover="mouseover(); doMenu('idpad2');"

   onclick="window.event.returnValue=false;">

   菜单项二

   </A>

   </DIV>

  </DIV>

  <SPAN ID='idpad1' STYLE='display:none;position:absolute;width:140;background-color:#007FFF;padding-top:0;padding-left:0;padding-bottom:20;z-index:9;'

   onmouseout='hideMenu();'>

   <HR STYLE='position:absolute;left:0;top:0;color:white' SIZE=1>

   <DIV STYLE='position:relative;left:0;top:8;'>

   <A ID='pad1' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white'

   HREF='11.htm' TARGET='_top'

   onmouseout="mouseout();" onmouseover="mouseover()">

   子菜单项一一

   </A><BR>

   <A ID='pad1' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white'

   HREF='12.htm' TARGET='_top'

   onmouseout="mouseout();" onmouseover="mouseover()">

   子菜单项一二

   </A><BR>

   <A ID='pad1' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white'

   HREF='13.htm' TARGET='_top'

   onmouseout="mouseout();" onmouseover="mouseover()">

   子菜单项一三

   </A>

   </DIV>

  </SPAN>

  

  <SPAN ID='idpad2' STYLE='display:none;position:absolute;width:140;background-color:#007FFF;padding-top:0;padding-left:0;padding-bottom:20;z-index:9;' onmouseout='hideMenu();'>

   <HR STYLE='position:absolute;left:0;top:0;color:white' SIZE=1>

   <DIV STYLE='position:relative;left:0;top:8;'>

   <A ID='pad2' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white'

   HREF='21.htm' TARGET='_top'

   onmouseout="mouseout();" onmouseover="mouseover()">

   子菜单项二一</A><BR>

   <A ID='pad2' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white'

   HREF='22.htm' TARGET='_top'

   onmouseout="mouseout();" onmouseover="mouseover()">

   子菜单项二二</A><BR>

   <A ID='pad2' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white'

   HREF='23.htm' TARGET='_top'

   onmouseout="mouseout();" onmouseover="mouseover()">

   子菜单项二三</A><BR>

   <HR STYLE='color:white' SIZE=1><!--分隔行-->

   <A ID='pad2' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white'

   onclick="parent.close()"

   onmouseout="mouseout();" onmouseover="mouseover()">

   退出系统</A>

   </DIV>

  </SPAN>

  <!--页面的其它内容-->

  </BODY>

  </HTML>

网页制作探源
网页侦测四法
网页字体的美化
网页制作常见问题解答[一]
网页制作常见问题解答[二]
网页制作常见问题解答[三]
网页制作常见问题解答[四]
网页制作常见问题解答[五]
“画中画”效果---谈Iframe标记的使用
Html保持用户状态的多种方法比较
DOC转换为HTML后的变化
超链“确认”对话框
制作个人首页的窍门
如何在网页上输入中文日期
禁止查看原代码
网页减肥超强工具组合
CuteFTP最新实用技巧
在网页上实现文字闪烁
向网页施展文字魔法
怎么弹出一个新的窗口
在Web页面上制作WINDOWS风格的菜单
如何实现自动友情链接
动态网点、快速网页的实现
用DHTML在Web页面实现多媒体显示效果
网页中下拉菜单的设计
 
 
 
教程站
收集整理
服务大家



月光软件源码下载编程文档电脑教程网站优化网址导航网络文学游戏天地生活休闲写作范文安妮宝贝站内搜索
电脑技术编程开发网络专区谈天说地情感世界游戏元素分类游戏热门游戏体育运动手机专区业余爱好影视沙龙
音乐天地数码广场教育园地科学大观古今纵横谈股论金人文艺术医学保健动漫图酷二手专区地方风情各行各业

月光软件站·版权所有