分别用两个函数实现的菜单
时间：2024-04-19 10:05:36
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"> </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>水果/水果 </li> <li>花卉/花卉/花卉</li> <li>汽车/汽车</li> <li>水果2</li> <li>花卉/花卉/花卉2</li> <li>汽车/汽车2</li> <li>水果3</li> <li>花卉/花卉3</li> <li>汽车/汽车/汽车3</li> </ul> </div> <ul id="shui" onMouseOver="javascript:showMenu('shui')"; onMouseOut="javascript:hiddenMenu('shui')" > <li>苹果</li> <li>香蕉</li> <li>猕猴桃</li> <li>火龙果</li> <li>苹果2</li> <li>香蕉2</li> <li>猕猴桃2</li> <li>火龙果2</li> <li>猕猴桃3</li> <li>火龙果3</li> </ul> <ul id="hua" onmouseover="javascript:MM_showHideLayers('hua','','show')"; onmouseout="javascript:MM_showHideLayers('hua','','hide')"> <li>菊花</li> <li>玫瑰</li> <li>牡丹</li> <li>茉莉</li> <li>君子兰</li> <li>虞美人</li> <li>喇叭花2</li> <li>桂花2</li> </ul> <ul id="che" onmouseover="javascript:MM_showHideLayers('che','','show')"; onmouseout="javascript:MM_showHideLayers('che','','hide')"> <li>大众</li> <li>奥迪</li> <li>宝马</li> <li>奔驰</li> <li>保时捷</li> <li>福特</li> <li>克莱斯勒</li> <li>法拉利</li> <li>克莱斯勒2</li> <li>法拉利2</li> </ul> </body> </html> </font>
标签：分别用两个函数实现的菜单
0
投稿猜你喜欢
如何快速的呈现我们的网页的技巧整理
2024-04-26 17:12:40
Oracle 自增(auto increment) 或 标识字段的建立方法
2009-03-06 11:15:00
Keras 使用 Lambda层详解
2021-08-11 20:12:40
Python中with...as...的使用方法
2021-10-01 16:58:07
Java实现数据库连接的最详细教程分享
2024-01-28 01:34:15
Python通过队列来实现进程间通信的示例
2023-02-17 01:07:29
mysql中格式化数字详解
2024-01-23 16:44:07
MySQL数据库之union,limit和子查询详解
2024-01-16 08:15:29
python+pyqt5实现KFC点餐收银系统
2022-02-05 08:49:46
snoopy PHP版的网络客户端提供本地下载
2023-06-28 00:09:55
php pdo oracle中文乱码的快速解决方法
2023-11-16 22:12:47
浅淡BANNER设计
2010-09-25 18:37:00
Python虚拟环境的创建和使用详解
2022-09-14 18:05:26
MSSQL MySQL 数据库分页(存储过程)
2012-01-29 18:30:20
MYSQL教程:查询优化之有效加载数据
2009-02-27 15:45:00
MySQL 自动清理binlog日志的方法
2024-01-17 11:37:59
基于Python实现本地音乐播放器的制作
2022-05-11 16:37:46
python实现清屏的方法
2021-11-02 04:10:32
python2.7 mayavi 安装图文教程(推荐)
2022-05-12 05:39:13
Python使用shutil模块实现文件拷贝
2021-02-01 14:46:28