‹‹ 上一主题 | 下一主题 ››
发新话题
打印

下拉菜单的另一种做法

fangyan [楼主]

高级会员

帖子
170 
体力
592  
威望
0  
离线
1 天
1# 大 中 小 发表于 2004-3-18 10:07 
各位下面菜单是在DW里使用鼠标的移入移出行为做的（由于过长所以分两次发）。
如果改成鼠标点击菜单下拉和收起怎么做呢，我想用ONCLICK事件，可是当鼠标点击菜单下拉后再在网页别的区域点击的话菜单要能收起，这个怎么做呢。哪位能有好办法？

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible'v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</head>

TOP

fangyan [楼主]

高级会员

帖子
170 
体力
592  
威望
0  
离线
1 天
2# 大 中 小 发表于 2004-3-18 10:08 
<body>
<table border="0" cellspacing="0" cellpadding="4">
  <tr>
    <td>Lorem</td>
    <td>&gt;</td>
    <a href="#" onMouseOver="MM_showHideLayers('Layer1','','show','Layer2','','hide','Layer3','','hide')"
       onMouseOut="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide')"
       ><td>
      <div id="Layer1" style="position:absolute; width:200px; height:24px; z-index:1; visibility: hidden; top: 34px;">
        <table width="100%" border="1" cellpadding="2" cellspacing="0" bgcolor="#CCCCCC">
          <tr>
            <td>a</td>
          </tr>
        </table>
      </div>
      Ipsum</td></a>
    <td>&gt;</td>
    <td>
      <div id="Layer2" style="position:absolute; width:200px; height:28px; z-index:2; top: 34px; visibility: hidden;">
        <table width="100%" border="1" cellpadding="2" cellspacing="0" bgcolor="#CCCCCC">
          <tr>
            <a href="#" onMouseOver="MM_showHideLayers('Layer1','','hide','Layer2','','show','Layer3','','show')"
       onMouseOut="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide')"
       ><td>b1
              <div id="Layer3" style="position:absolute; width:200px; height:23px; z-index:3; visibility: hidden;">
                <table width="100%" border="1" cellpadding="2" cellspacing="0" bgcolor="#99CCCC">
                  <tr>
                    <td>d</td>
                  </tr>
                </table>
              </div></td></a>
          </tr>
        </table>
      </div>
      <a href="#" onMouseOver="MM_showHideLayers('Layer1','','hide','Layer2','','show','Layer3','','hide')"
         onMouseOut="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide')"
         >Dolar</a></td>
  </tr>
</table>
</body>
</html>

TOP

wla0254

钻石会员

帖子
1374 
体力
5466  
威望
0  
离线
1399 天
3# 大 中 小 发表于 2004-3-18 11:16 
用OOP的方法来实现就会简单的多

当鼠标点击菜单下拉后再在网页别的区域点击的话菜单要能收起

这种用了OOP自然不成问题~~

建议多加强Javascript方面知识,不要被Dreamweaver限制~
我真的好忙

TOP

fangyan [楼主]

高级会员

帖子
170 
体力
592  
威望
0  
离线
1 天
4# 大 中 小 发表于 2004-3-18 12:09 
多谢指点，
可是最近要用。
JS又不是一天两天的事啊

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!
toddlee

新手上路

帖子
55 
体力
0  
威望
0  
离线
22 天
5# 大 中 小 发表于 2004-3-18 14:36 
需要在body里加上鼠标点击事件运行的函数，

让他在点击页面任何地方时，

运行隐藏下拉菜单的函数。




不过，像wla0254说的应该是最好的方法，

用起来也会比较方便。

关于这个应用，

你可以学习一下hotmail里的下拉菜单，

他里面的oo思想很好。
当你发现我的足迹，不要去找寻我。我就在不远处注视着你、关注着你的一举一动。
作好你自己，才无愧于你自己。
www.todd-lee.com

TOP

‹‹ 上一主题 | 下一主题 ››
发新话题