页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

分别用两个函数实现的菜单

发布：dxy 字体：[增加减小] 类型：转载

css+div做的菜单：一个主显示层，别的列表都隐藏着，用js函数设置列表的显示和隐藏。分别用到了两个函数，函数实现的效果是一样的，一个是参考的《css+Dhtml精髓》书上的事例，一个是找的函数。
大家帮我看看那个函数好用！还有大家还有别的更好的方法实现这个效果吗？谢谢！！

点击运行可以看到效果:

<font color=red><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>菜单</title> 
 <style type="text/css"> 
 <!-- 
  *{margin:0;padding:0;border:0;} 
 body { 
    background: #fff; 
    font-size: 14px; 
    font-family: "宋体"; 
}

#nav{ 
border:#FF0099 solid 3px; 
position:absolute; 
top:30px; 
left:50px; 
width:150px; 
height:300px; 
 }  
  
#ul { 
    position:absolute; 
    top:30px; 
    list-style-type:none; 
    line-height:24px; 
    background-color:#fff; 
}

#ul a:visited{ 
 line-height:24px; 
 color:#666; 
 text-align:center; 
 text-decoration:none; 
  display:block; 
  width:150px; 
/*直设这个宽度就行*/ 
   /*设置宽度，IE浏览器。虽然设置了block，但是还只是文字为超链接，所以得显式设置宽度*/ 
 }

#ul a:hover  { 
 text-decoration:none; 
 color:#FF2a84;

}

#ul li{ 
 display:inline;/*IE会让LI上下有空白，去掉空白*/ 
 }

/*水果层*/

#shui { 
    position:absolute; 
    left: 200px; 
    top: 50px; 
    border: #66FFCC  solid; 
     height:210px; 
    border-width: 2px 2px 2px 18px; 
    text-align:center; 
    list-style-type:none; 
    line-height: 20px; 
    visibility: hidden; 
    background-color:#fff;/*不设背景色，层容易断裂 */ 
}

#shui a:visited{ 
    color: #666; 
    text-decoration: none; 
    display:block; 
    width:100px;/*不能用#nav a:link,a:visited,这样会找不到第二种，第二种不继承*/

}

#shui a:hover  { 
text-decoration:none; 
 color:#0cc; 
} 
  
#hua { 
    position:absolute; 
    left: 200px; 
    top: 55px; 
    border: #C06 solid; 
    height:170px; 
    border-width: 2px 2px 2px 18px; 
    text-align:center; 
    list-style-type:none; 
    line-height: 20px; 
    visibility: hidden; 
    background-color:#fff; 
     
}

#hua  a:visited{ 
    color: #666; 
    text-decoration: none; 
    display:block; 
    width:100px;

}

#hua a:hover  { 
text-decoration:none; 
 color:#C06; 
}

#che { 
    position: absolute; 
    left: 200px; 
    top: 60px; 
    border: #6c3 solid; 
    border-width: 2px 2px 2px 18px; 
    text-align:center; 
    list-style-type:none; 
    line-height: 20px; 
    visibility: hidden; 
    background-color:#fff; 
} 
 #che a:visited{ 
    color: #666; 
    text-decoration: none; 
    display:block; 
    width:100px; 
 }

#che a:hover  { 
text-decoration:none; 
 color:#6c3; 
}  
  
--> 
 </style> 
  
 <script language="javascript">//判断浏览器 
        browser = navigator.appName; 
        browserNum = parseInt(navigator.appVersion); 
         
        if ((browser == "Netscape") && (browserNum < 5)) 
        { 
            // Netscape 4.x 
            layerRef = "document.layers['"; 
            endLayerRef = "']"; 
            styleRef = ""; 
        } 
        else if ((browser == "Netscape") && (browserNum >= 5)) 
        { 
            // Netscape 6 
            layerRef = "document.getElementById('"; 
            styleRef = ".style"; 
            endLayerRef = "')"; 
        } 
        else 
        { 
            // Internet Explorer 
            layerRef = "document.all['"; 
            endLayerRef = "']"; 
            styleRef = ".style"; 
        } 
    //第一个函数 
        function showMenu(layerName) 
        { 
            // show the layer the user wants to see 
            eval(layerRef + layerName + endLayerRef + styleRef + ".visibility = 'visible'"); 
            }  
        function hiddenMenu(layerName) 
        { 
            // hidden the layer   
            eval(layerRef + layerName + endLayerRef + styleRef + ".visibility = 'hidden'"); 
            }  
             
            //第一个函数 
             
            //第二个函数 
                function MM_showHideLayers()  
    {  
        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;  
            } 
    }

function MM_findObj(n, d) 
    { 
        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 && document.getElementById) 
            x=document.getElementById(n); 
        return x; 
    } 
    //第二个函数 
            </script> 
             
             
</head> 
<body> 
 <div id="nav"> 
 <ul id="ul">  
  
  
<li><a href="#" onMouseOver="javascript:showMenu('shui')"; 
        onMouseOut="javascript:hiddenMenu('shui')"  >水果/水果</a> </li> 
         
<li><a href="#"   onmouseover="javascript:MM_showHideLayers('hua','','show')";  
                onmouseout="javascript:MM_showHideLayers('hua','','hide')">花卉/花卉/花卉</a></li> 
                 
                         
<li><a href="#"  onmouseover="javascript:MM_showHideLayers('che','','show')";  
                onmouseout="javascript:MM_showHideLayers('che','','hide')">汽车/汽车</a></li> 
<li><a href="#" onmouseover="javascript:MM_showHideLayers('shui','','show')";  
                onmouseout="javascript:MM_showHideLayers('shui','','hide')">水果2</a></li> 
<li><a href="#" onmouseover="javascript:MM_showHideLayers('hua','','show')";  
                onmouseout="javascript:MM_showHideLayers('hua','','hide')" >花卉/花卉/花卉2</a></li> 
<li><a href="#" onmouseover="javascript:MM_showHideLayers('che','','show')";  
                onmouseout="javascript:MM_showHideLayers('che','','hide')">汽车/汽车2</a></li> 
<li><a href="#" onmouseover="javascript:MM_showHideLayers('shui','','show')";  
                onmouseout="javascript:MM_showHideLayers('shui','','hide')">水果3</a></li> 
<li><a href="#" onmouseover="javascript:MM_showHideLayers('hua','','show')";  
                onmouseout="javascript:MM_showHideLayers('hua','','hide')">花卉/花卉3</a></li> 
<li><a href="#" onmouseover="javascript:MM_showHideLayers('che','','show')";  
                onmouseout="javascript:MM_showHideLayers('che','','hide')">汽车/汽车/汽车3</a></li> 
</ul>  
 </div>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：分别用两个函数实现的菜单