一个兼容IE和FF的下拉菜单，和大家共享。

最新推荐文章于 2016-10-29 11:35:57 发布
最新推荐文章于 2016-10-29 11:35:57 发布
阅读量1.1k 收藏
点赞数
文章标签： ie class border function div table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yyszh/article/details/645270
版权

用js设计了一个下拉菜单，具有以下特色：

1.兼容两种浏览器：IE和firefox；

2.外观设计和代码分离，外观设计完全使用css；

3.调用简单：menucreat(主菜单div,子菜单div,菜单数组)，菜单数组为一个三维数组，每一项包含四个内容：菜单名、执行目标、执行内容、有效性；大家看代码很容易明白。

4.位置可以任意放置；

不尽完美之处，请大家一起改进。

使用时请包含prototype.js。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<script type="text/javascript" src="prototype.js"></script>
<style>
<!--
.szh_mm{
 background-color:#D4D0C8;font-size:10pt;
}
.szh_sm{
 cursor:default;font-size:9pt;width:120;
}
.szh_smItem{
 border:1px;text-align:left;padding-left:11px;padding-right:11px;padding-bottom:2px;
 background:#D4D0C8;color:#000000;
}
.szh_smItemFalse{
 border:1px;color:#808080;padding-left:11px;padding-right:11px;padding-bottom:2px;
}
.szh_smItemHover{
 border:1px;text-align:left;padding-left:11px;padding-right:11px;padding-bottom:2px;
 background-color:#333366;color:#FFFFFF;
}
.szh_smItemDown{
 text-align:left;padding-left:10px;padding-right:10px;border:1px inset;
 background-color:#808080;color:#FFFFFF;
}
-->
</style>
<script>

function menucreat(div1,div2,a){
 var menu = Class.create();
 //defining the rest of the class implmentation
 menu.prototype = {
  initialize: function(divmm,divsm,a){
   var i,row,cell;
   this.marry=a;
   this.divmm=$(divmm);
   this.divsm=$(divsm);
   this.divmm.innerHTML='<table id="tblmm" cellspacing="1" cellpadding="0" class="szh_mm"><tr><td class="szh_mmItem"></td></tr></table>';
   row=$('tblmm').rows[0];
   for(i=a.length-1;i>=0;--i){
    cell=row.insertCell(0);
    cell.width=60;
     cell.innerHTML=a[i][0][0];
    if(a[i][0][0]=='|')cell.className="szh_smItemFalse";
    else if(a[i][0][3]){
     cell.setAttribute('i',i);
     cell.setAttribute('j',0);
     cell.className="szh_smItem";
     cell.οnmοuseοver=this.mmover.bindAsEventListener(this);
     cell.οnmοuseοut=this.mmout.bindAsEventListener(this);
     cell.οnmοusedοwn=this.mmdown.bindAsEventListener(this);
     cell.οnmοuseup=this.mmup.bindAsEventListener(this);
    }
    else cell.className="szh_smItemFalse";
   }
  },
  mmover:function(evt){
   var i,j,obj=Event.element(evt);
   obj.className="szh_smItemHover";
   i=obj.getAttribute('i');
   j=obj.getAttribute('j');
   if(j==0&&this.marry[i].length>1&&this.divsm.style.display!='none')this.crtSm(i);
  },
  mmout:function(evt){
   var obj=Event.element(evt);
   obj.className="szh_smItem";
  },
  mmdown:function(evt){
   var i,j,obj=Event.element(evt);
   obj.className="szh_smItemDown";
   i=obj.getAttribute('i');
   j=obj.getAttribute('j');
   if(j==0&&this.marry[i].length>1){
    if(this.divsm.style.display!='none')this.divsm.style.display='none';
    else this.crtSm(i);
   }
  },
  crtSm:function(i){
   var j,tblsm,row,cell;
   this.divsm.innerHTML='<table id="tblsm" cellspacing="1" cellpadding="0" class="szh_sm"></table>';
   tblsm=$('tblsm');
   for(j=1;j<this.marry[i].length;++j){
    row=tblsm.insertRow(j-1);
    cell=row.insertCell(0);
    cell.height=20;
    if(this.marry[i][j][0]=='--'){
     cell.innerHTML='<hr />';
    }
    else{
      cell.innerHTML=this.marry[i][j][0];
     if(this.marry[i][j][3]){
      cell.setAttribute('i',i);
      cell.setAttribute('j',j);
      cell.className="szh_smItem";
      cell.οnmοuseοver=this.mmover.bindAsEventListener(this);
      cell.οnmοuseοut=this.mmout.bindAsEventListener(this);
      cell.οnmοusedοwn=this.mmdown.bindAsEventListener(this);
      cell.οnmοuseup=this.mmup.bindAsEventListener(this);
     }
     else{
      cell.className='szh_smItemFalse';
     }
    }
   }
   this.divsm.style.left=i*83+4;
   this.divsm.style.display='';
  },
  mmup:function(evt){
   var obj=Event.element(evt);
   var i,j;
   obj.className="szh_smItem";
   i=obj.getAttribute('i');
   j=obj.getAttribute('j');
   //alert(obj.innerHTML+':'+i+':'+j+':'+this.marry[i][j][1]);
   if(j>0||(this.marry[i].length==1)){
    $('divsm').style.display='none';
    if(this.marry[i][j][2]=='') return;
    if(this.marry[i][j][1]=="js"){ eval(this.marry[i][j][2]);}
    else{var x=window.open(this.marry[i][j][2],this.marry[i][j][1]);x.focus();}
   }
  }
 };
 var mm=new menu(div1,div2,a);
}

function init(){
 menucreat('divmm','divsm',[
   [
    ['文件','','',1],
    ['新建','_self','4.htm',1],
    ['打开','','',0],
    ['--'],
    ['保存','js','alert(/'Hello./')',1],
    ['退出','','about:blank',1]
   ],
   [
    ['编辑','','',1],
    ['撤消','','',1],
    ['重做','','',1]
   ],
   [['|','','',0]
   ],
   [
    ['帮助','js','alert(/'帮助/')',1],
    ['帮助主题','js','alert(/'帮助主题/')',1],
    ['关于','js','alert(/'版权所有/')',1]
   ]
  ]);
}
</script>
</head>
<body onLoad="init();">
 <table width="100%"><tr><td>
<div id="divmm" style="width:auto;height:auto;left:0px;top:0px;background-color:#d4d0c8;z-index:99;border:2px outset;">
<table id="tblmm" cellspacing="1" cellpadding="0" class="szh_mm"><tr><td class="szh_mmItem"></td></tr></table>
</div>
<div id="divsm" style="position:absolute;width:auto;height:auto;z-index:99;background-color:#d4d0c8;border:2px outset;display:none;">
</div>
</td></tr><tr><td>
sflkaksjd
sdafkljsad
dslg
<br />
<textarea id="abc"></textarea>
</td></tr></table>
外观设计：<br />
正常时的外观：
<div id="" style="width:auto;height:auto;left:0px;top:0px;background-color:#d4d0c8;z-index:99;border:1px outset;">
<TABLE class=szh_mm id=tblmm cellSpacing=2 cellPadding=0>
<TBODY>
<TR>
<TD class=szh_smItem width=60>文件</TD>
<TD class=szh_smItem width=60>编辑</TD>
<TD width=60>|</TD>
<TD class=szh_smItem width=60>帮助</TD>
</TR></TBODY></TABLE>
</div><br>
鼠标按下时的外观
<div id="" style="width:auto;height:auto;left:0px;top:0px;background-color:#d4d0c8;z-index:99;border:1px outset;">
<TABLE class=szh_mm id=tblmm cellSpacing=2 cellPadding=0>
<TBODY>
<TR>
<TD class=szh_smItemDown width=60>文件</TD>
<TD class=szh_smItemDown width=60>编辑</TD>
<TD width=60>|</TD>
<TD class=szh_smItemDown width=60>帮助</TD>
</TR></TBODY></TABLE>
</div><br>
鼠标移入时的外观
<div id="" style="width:auto;height:auto;left:0px;top:0px;background-color:#d4d0c8;z-index:99;border:1px outset;">
<TABLE class=szh_mm id=tblmm cellSpacing=2 cellPadding=0>
<TBODY>
<TR>
<TD class=szh_smItemHover width=60>文件</TD>
<TD class=szh_smItemHover width=60>编辑</TD>
<TD width=60>|</TD>
<TD class=szh_smItemHover width=60>帮助</TD>
</TR></TBODY></TABLE>
</div>
</body></html>

yyszh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS IE和FF兼容性问题汇总
10-30
以下以 IE 代替 Internet Explorer，以 MF 代替 Mozzila FF,对于js爱好者必看的一些知识总结。
大家给推荐个在IE和FF下都可使用的左侧导航菜单？
lijuntian526
07-09 146
目前用的是http://www.dynamicdrive.com/dynamicindex1/index.html下的microsoft Outlook Bar IE下不错，FF下毛病不少。
0PE内置菜单解读(NB版) NB版0PE内置菜单解读
xcntime的专栏
12-19 3718
#先设置一个显示菜单变量showmenu为1，默认显示菜单 if not exist showmenu set showmenu=1 terminal console debug off #0x8278地址处存放版本信息；grub4dos中常使用:-1表示“至无穷大”。此处若版本低于20120201则屏显警告信息并重启 checkrange 20120201:-1 read 0x
兼容IE、FF的多级菜单（需配合JQuery使用）
C'est la vie de Maxime
02-15 1516
最近的一次页面制作中，因为用户的要求比较特别，其中的一个导航需要用到多级菜单， 考虑到浏览器兼容性的问题，只好自己利用JQuery写了一个，存档于此。注：本菜单只要遵循既定的缩进格式，则可无限延伸。html部分：ul id="menu_left">        li id="menu_i1">a href="javascript:;" class="has_sub">科研团队a>    
兼容IE和FF的三级导航菜单
chinmo的收藏
04-29 2599
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" c
JavaScript原生下拉菜单完美兼容IE
周秦卿的博客
10-29 3101
getElementsByClassName()不得不说是个很好用的函数 ,但遗憾的是,好用的东西都不兼容IE,这就尴尬了.所以下列二级下拉菜单的制作中,我封装了兼容IE的通过类名找到元素的方法. HTML结构方面: 一级菜单 二级菜单 二级菜单 二级菜单 二级菜单 一级菜单 二级菜单 二级菜单
兼容IE和FF的单行溢出文本显示省略号
12-11
　今天介绍的方法兼容IE FF，看下面的详细介绍： 　为了更符合实际，用一个div装起要调试的内容,并为这个div定义一个宽度。 　例如： css代码： div{width:200px;} html代码： <div><span>软件开发网-中国网页设计，...
好用的兼容IE，FF的下拉菜单
03-16
NULL 博文链接：https://iamjit.iteye.com/blog/441343
js 实现无缝滚动 兼容IE和FF
12-10
4、到滚动的高度scrollTop大于或等于要滚动节点的高度时，设置scrollTop=0，并把把子节点树中的第一个移动到最后，重新开始滚动，无间断循环滚动效果就出现了。 html 源码 代码如下:<!DOCTYPE html PUBLIC
js实现兼容IE和FF的上下层的移动
01-21
这里给大家分享的是项目中的一个小需求，本来很简单，可是整了好久才把FF的兼容性搞定。 <!DOCTYPE ...
2024-2030全球及中国PCB接触式探头行业研究及十五五规划分析报告.docx
04-18
2024-2030全球及中国PCB接触式探头行业研究及十五五规划分析报告
网站界面设计mortal0418代码
04-18
网站界面设计mortal0418代码
PHP毕业设计-校园失物招领系统源码+数据库.zip
04-18
PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可
2024年神经酸行业分析报告.pptx
最新发布
04-18
2024年神经酸行业分析报告.pptx
Java爬虫信息抓取的实现 完整实例（源码）
04-18
【Java爬虫】信息抓取的实现 完整实例（源码）
rain-drop.PNG
04-18
rain-drop.PNG
FEDformer.pdf
04-18
FEDformer.pdf
基于ASP.NET三层模式的网上学习资源交流系统：毕业源码案例设计.rar
04-18
基于ASP.NET三层模式的网上学习资源交流系统：毕业源码案例设计.rar基于ASP.NET三层模式的网上学习资源交流系统：毕业源码案例设计.rar基于ASP.NET三层模式的网上学习资源交流系统：毕业源码案例设计.rar基于ASP.NET三层模式的网上学习资源交流系统：毕业源码案例设计.rar基于ASP.NET三层模式的网上学习资源交流系统：毕业源码案例设计.rar基于ASP.NET三层模式的网上学习资源交流系统：毕业源码案例设计.rar基于ASP.NET三层模式的网上学习资源交流系统：毕业源码案例设计.rar基于ASP.NET三层模式的网上学习资源交流系统：毕业源码案例设计.rar基于ASP.NET三层模式的网上学习资源交流系统：毕业源码案例设计.rar基于ASP.NET三层模式的网上学习资源交流系统：毕业源码案例设计.rar基于ASP.NET三层模式的网上学习资源交流系统：毕业源码案例设计.rar基于ASP.NET三层模式的网上学习资源交流系统：毕业源码案例设计.rar基于ASP.NET三层模式的网上学习资源交流系统：毕业源码案例设计.rar基于ASP.NET三层模式的网上学习资
如何使用css和html做一个椭圆形印章
05-28
可以使用 CSS 的 border-radius 属性和 box-shadow 属性来制作一个椭圆形印章。具体实现方法如下： HTML 代码： ``` <div class="seal"> <p>椭圆形印章</p> </div> ``` CSS 代码： ``` .seal { width: 150px; height: 100px; background-color: #ff9900; border-radius: 50%; box-shadow: 0 0 10px #888888; display: flex; justify-content: center; align-items: center; font-size: 20px; font-weight: bold; color: #fff; text-shadow: 0 0 5px #888888; } ``` 在上述代码中，我们使用了一个 div 元素作为印章的容器，将其宽度设为 150px，高度设为 100px，背景色设为橙黄色（#ff9900）。使用 border-radius 属性将元素的边角设为 50%，使其呈现椭圆形状。使用 box-shadow 属性添加阴影效果，使印章更加立体。最后，使用 display、justify-content、align-items、font-size、font-weight、color 和 text-shadow 等属性来设置印章的样式和文本效果。 印章中的文本可以使用 p 元素来添加，然后使用样式设置其字体大小、字体加粗、字体颜色和文本阴影等效果。使用 display、justify-content 和 align-items 属性将文本垂直水平居中，使其居中显示在印章中央。 这样就完成了一个简单的椭圆形印章。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值