很简单的javascript菜单效果,在ie6, firefox下测试通过,整理了下代码,贴出来。

转载 2006年06月16日 11:32:00

<!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>menu</title>
<style type="text/css">
<!--
/*有部分CSS对菜单是不需要的,可以去掉*/
body {
 font-size: 12px;
 margin: 0px;
 padding: 0px;
}
form {
 font-size: 12px;
 margin: 0px;
 padding: 0px;
}
table,tr,td,div {
 font-size: 12px;
 line-height: 22px;
}
.text_white12 {
 font-size: 12px;
 color:#fff;
 line-height: 22px;
}
a:link {
 font-size: 12px;
 line-height: 25px;
 color: #000000;
 text-decoration: underline;
}
a:visited {
 font-size: 12px;
 line-height: 25px;
 color: #000000;
 text-decoration: underline;
}
a:hover {
 font-size: 12px;
 line-height: 25px;
 color: #ff0000;
 text-decoration: none;
}
a:actice {
 font-size: 12px;
 line-height: 25px;
 color: #000000;
 text-decoration: underline;
}
a.menu:link {
 font-size: 12px;
 line-height: 25px;
 color: #fff;
 font-weight:bold;
 text-decoration: none;
}
a.menu:visited {
 font-size: 12px;
 line-height: 25px;
 color: #fff;
 font-weight:bold;
 text-decoration: none;
}
a.menu:hover {
 font-size: 12px;
 line-height: 25px;
 color: #fff;
 font-weight:bold;
 text-decoration: underline;
}
a.menu:actice {
 font-size: 12px;
 line-height: 25px;
 color: #fff;
 font-weight:bold;
 text-decoration: none;
}
a.white_link:link {
 font-size: 12px;
 line-height: 25px;
 color: #fff;
 text-decoration: none;
}
a.white_link:visited {
 font-size: 12px;
 line-height: 25px;
 color: #fff;
 text-decoration: none;
}
a.white_link:hover {
 font-size: 12px;
 line-height: 25px;
 color: #fff;
 text-decoration: underline;
}
a.white_link:actice {
 font-size: 12px;
 line-height: 25px;
 color: #fff;
 text-decoration: none;
}

.title {
 font-size: 14px;
 font-weight: bold;
 color: #FF0000;
}
.green_title {
 font-size: 12px;
 font-weight: bold;
 color: #009900;
}

/*下面是各菜单的CSS,都差不多,也可以用一个,但有时可能菜单长度不一样*/
#layer_01 {
 position:absolute;
 width:175px;
 height:151px;
 z-index:1;
 visibility:hidden;
 border:1px dotted #CCCCCC;
}
#layer_02 {
 position:absolute;
 width:100px;
 height:120px;
 z-index:1;
 visibility:hidden;
 border:1px dotted #CCCCCC;
}
#layer_03 {
 position:absolute;
 width:100px;
 height:120px;
 z-index:1;
 visibility:hidden;
 border:1px dotted #CCCCCC;
}
#layer_04 {
 position:absolute;
 width:100px;
 height:120px;
 z-index:1;
 visibility:hidden;
 border:1px dotted #CCCCCC;
}
#layer_05 {
 position:absolute;
 width:100px;
 height:120px;
 z-index:1;
 visibility:hidden;
 border:1px dotted #CCCCCC;
}
-->
</style>
</head>
<script language="javascript">
/*核心的菜单代码*/
//取得元素绝对位置
function getAbsPoint(e) {
 var x = e.offsetLeft;
 var y = e.offsetTop;
 while (e = e.offsetParent) {
  x += e.offsetLeft;
  y += e.offsetTop;
 }
 return {"x":x, "y":y};
}
function over(o, menuName, offset) {
 if (offset == null) {
  offset = 2;
 }
 var menu = document.getElementById(menuName);
 var xy = getAbsPoint(o);
 menu.style.left = xy.x + "px";
 menu.style.top = (xy.y + o.offsetHeight + offset) + "px";
 clickDocument();
 menu.style.filter = "Alpha(Opacity=80)";
 menu.style.visibility = "visible";
 o.style.backgroundColor = "#00173A";
}
function out(o) {
 //o.style.backgroundColor = "#FFFFFF";
}
function clickDocument() {
 var divs = document.getElementsByTagName("div");
 for (var i = 0; i < divs.length; i++) {
  if (divs[i].getAttribute("ismenu") == "true") {
   divs[i].style.visibility = "hidden";
  }
 }
 var tds = document.getElementById("tbl_menu").getElementsByTagName("td");
 for (var i = 0; i < tds.length; i++) {
  tds[i].style.backgroundColor = "#00173A";
 }
}
document.onclick = clickDocument;
</script>
<body>
<script language="javascript">
//改动的页比较多,美工将其放入一个js里,这里整理到一个页面里
document.writeln("<div id=/"layer_01/" ismenu=/"true/">");
document.writeln("  <table width=/"120/" border=/"0/" cellpadding=/"1/" cellspacing=/"1/" bgcolor=/"#ffffff/">");
document.writeln("    <tr>");
document.writeln("      <td>&nbsp;<a href=/"Info_list01.html/">展会概况<//a><//td>");
document.writeln("    <//tr>");
document.writeln("    <tr>");
document.writeln("      <td>&nbsp;<a href=/"Info_list02.html/">展会动态与活动<//a><//td>");
document.writeln("    <//tr>");
document.writeln("    <tr>");
document.writeln("      <td>&nbsp;<a href=/"Info_list07.html/">参展商名录<//a><//td>");
document.writeln("    <//tr>");
document.writeln("    <tr>");
document.writeln("      <td>&nbsp;<a href=/"Info_list08.html/">上届展会回顾<//a><//td>");
document.writeln("    <//tr>");
document.writeln("    <tr>");
document.writeln("      <td>&nbsp;<a href=/"Info_list03.html/">主办与合作主办机构<//a><//td>");
document.writeln("    <//tr>");
document.writeln("    <tr>");
document.writeln("      <td>&nbsp;<a href=/"Info_list04.html/">组团参展机构<//a><//td>");
document.writeln("    <//tr>");
document.writeln("    <tr>");
document.writeln("      <td>&nbsp;<a href=/"Info_list05.html/">展馆简介<//a><//td>");
document.writeln("    <//tr>");
document.writeln("    <tr>");
document.writeln("      <td>&nbsp;<a href=/"Info_list09.html/">重要通知<//a><//td>");
document.writeln("    <//tr>");
document.writeln("    <tr>");
document.writeln("      <td>&nbsp;<a href=/"Info_list06.html/">联系我们<//a><//td>");
document.writeln("    <//tr>");
document.writeln("  <//table>");
document.writeln("<//div>");
document.writeln("<div id=/"layer_02/" ismenu=/"true/">");
document.writeln("  <table width=/"120/" border=/"0/" cellpadding=/"1/" cellspacing=/"1/" bgcolor=/"#ffffff/">");
document.writeln("    <tr>");
document.writeln("      <td>&nbsp;<a href=/"Join_list01.html/">展位费标准<//a><//td>");
document.writeln("    <//tr>");
document.writeln("    <tr>");
document.writeln("      <td>&nbsp;<a href=/"Join_list02.html/">参展申请表格<//a><//td>");
document.writeln("    <//tr>");
document.writeln("    <tr>");
document.writeln("      <td>&nbsp;<a href=/"Join_list03.html/">宣传推广<//a><//td>");
document.writeln("    <//tr>");
document.writeln("    <tr>");
document.writeln("      <td>&nbsp;<a href=/"Join_list04.html/">须知及注意事项<//a><//td>");
document.writeln("    <//tr>");
document.writeln("  <//table>");
document.writeln("<//div>");
document.writeln("<div id=/"layer_03/" ismenu=/"true/">");
document.writeln("  <table width=/"120/" border=/"0/" cellpadding=/"1/" cellspacing=/"1/" bgcolor=/"#ffffff/">");
document.writeln("    <tr>");
document.writeln("      <td>&nbsp;<a href=/"Enregister.html/">网上预约登记表<//a><//td>");
document.writeln("    <//tr>");
document.writeln("  <//table>");
document.writeln("<//div>");
document.writeln("<div id=/"layer_04/" ismenu=/"true/">");
document.writeln("  <table width=/"120/" border=/"0/" cellpadding=/"1/" cellspacing=/"1/" bgcolor=/"#ffffff/">");
document.writeln("    <tr>");
document.writeln("      <td>&nbsp;<a href=/"Service_list01.html/">展品运输<//a><//td>");
document.writeln("    <//tr>");
document.writeln("    <tr>");
document.writeln("      <td>&nbsp;<a href=/"Service_list02.html/">展台搭建商<//a><//td>");
document.writeln("    <//tr>");
document.writeln("    <tr>");
document.writeln("      <td>&nbsp;<a href=/"Service_list04.html/">地接服务及展后考察<//a><//td>");
document.writeln("    <//tr>");
document.writeln("    <tr>");
document.writeln("      <td>&nbsp;<a href=/"Service_list05.html/">酒店情况<//a><//td>");
document.writeln("    <//tr>");
document.writeln("    <tr>");
document.writeln("      <td>&nbsp;<a href=/"Service_list06.html/">航班情况<//a><//td>");
document.writeln("    <//tr>");
document.writeln("    <tr>");
document.writeln("      <td>&nbsp;<a href=/"Service_list03.html/">会 刊<//a><//td>");
document.writeln("    <//tr>");
document.writeln("  <//table>");
document.writeln("<//div>");
document.writeln("<div id=/"layer_05/" ismenu=/"true/">");
document.writeln("  <table width=/"120/" border=/"0/" cellpadding=/"1/" cellspacing=/"1/" bgcolor=/"#ffffff/">");
document.writeln("    <tr>");
document.writeln("      <td>&nbsp;<a href=/"Country.html/">国家概况<//a><//td>");
document.writeln("    <//tr>");
document.writeln("    <tr>");
document.writeln("      <td>&nbsp;<a href=/"Country_list02.html/">行业概况<//a><//td>");
document.writeln("    <//tr>");
document.writeln("    <tr>");
document.writeln("      <td>&nbsp;<a href=/"Country_list03.html/">法律法规<//a><//td>");
document.writeln("    <//tr>");
document.writeln("  <//table>");
document.writeln("<//div>");
</script>
<table width="700" border="0" cellpadding="0" cellspacing="0" bgcolor="#00173a" id="tbl_menu">
  <tbody>
    <tr>
      <td><a class="menu"
            href="Index.html">网站首页</a></td>
      <td>&nbsp;&nbsp;|&nbsp;&nbsp;</td>
      <td onmouseover="over(this, 'layer_01');" onmouseout="out(this);"><a class="menu" href="Info.html">展会资讯</a></td>
      <td>&nbsp;&nbsp;|&nbsp;&nbsp;</td>
      <td onmouseover="over(this, 'layer_02');" onmouseout="out(this);"><a class="menu" href="Join.html">参展与报名</a></td>
      <td>&nbsp;&nbsp;|&nbsp;&nbsp;</td>
      <td onmouseover="over(this, 'layer_03');" onmouseout="out(this);"><a class="menu" href="Enregister.html">专业观众与登记</a></td>
      <td>&nbsp;&nbsp;|&nbsp;&nbsp;</td>
      <td onmouseover="over(this, 'layer_04');" onmouseout="out(this);"><a class="menu" href="Service.html">展会服务</a></td>
      <td>&nbsp;&nbsp;|&nbsp;&nbsp;</td>
      <td onmouseover="over(this, 'layer_05');" onmouseout="out(this);"><a class="menu" href="country.html">国别市场</a></td>
      <td>&nbsp;&nbsp;|&nbsp;&nbsp;</td>
      <td><a class="menu" href="http://www.smetrade.org.cn/">返回主站</a></td>
      <td>&nbsp;&nbsp;|&nbsp;&nbsp;</td>
      <td><a class="menu" href="Index.html#">English</a></td>
    </tr>
  </tbody>
</table>
</body>
</html>



Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=768313

今天帮美工写个很简单的javascript菜单效果,在ie6, firefox下测试通过,整理了下代码,贴出来。

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">menu/*有部分CSS对...
  • KimSoft
  • KimSoft
  • 2006年06月01日 17:44
  • 3396

html5 Placeholder属性兼容IE6、7方法

使低版本浏览器支持Placeholder有很多方法,都不是很完美,或多或少有点问题,且有些原生支持的浏览器在获得焦点时会清空Placeholder提示。发现zhihu的解决方法不错,特记录下 w...
  • yingzia1986
  • yingzia1986
  • 2013年09月16日 16:57
  • 1967

iframe自适应高度(IE6、IE7、fireFox下测试通过)

function TuneHeight() {var frm = document.getElementById("content01");var subWeb = document.frames ?...
  • chinmo
  • chinmo
  • 2008年02月17日 18:32
  • 1164

jquery.select.js (下拉框插件)不支持IE6 的 方法 (小心用JQuery 插件)

 前几天在Jquery论坛里整了一个jquery.selec
  • gavin_luo
  • gavin_luo
  • 2009年03月12日 09:25
  • 4073

IE6 select穿透问题(div 定位无法遮盖select)!

此问题,早有耳闻,但是一直都没有亲身碰到过,也就没有过多的去在意这些问题。 这一回总算是见识到了ie的厉害,虽是在ie选项中大大的写着ie版本是ie11 ,但是有些部分确实走的ie6的内核,怪不得微...
  • yangzhihello
  • yangzhihello
  • 2014年11月17日 12:30
  • 2461

canvas的IE6.0下的实现

原文地址:http://www.cnblogs.com/libinqq/archive/2009/01/08/1371676.html 首先,HTML 5 有了画布元素功能,但是由于IE 系列浏览器...
  • yazhouren
  • yazhouren
  • 2013年02月17日 18:04
  • 1111

SELECT 元素在IE6中遮挡DIV的解决方法

解决IE6 select 遮挡div的bug 在最近的一个项目中,遇到了IE6 select遮挡div的bug,为了解决这个bug我查了很多资料,试图找到一个最最有效的方法,很多人是通过...
  • zhangkang0324
  • zhangkang0324
  • 2014年02月10日 09:47
  • 771

margin-left本身不兼容IE6

margin-left本身不兼容IE6,比如原来是margin-left:20px,经过ie6的解释会变成40px,在IE6双陪问题一直在困扰很多用css+div布局的设计师,不过这问题我一直用一个办...
  • ldy592
  • ldy592
  • 2012年08月24日 16:31
  • 622

IE6IE7Firefox浏览器不兼容原因及解决办法

IE6IE7Firefox浏览器不兼容原因及解决办法     一、IE6IE7Firefox浏览器不兼容原因及解决办法 1.文字 本身的大小不兼容。同样是font-s...
  • yuwq123
  • yuwq123
  • 2016年08月13日 11:57
  • 1146

firefox安装和用于调试的工具firebug与模拟ie6,7,8,9,10环境的Ietester

最近在学习web,听说开发者用的比较多的是firefox 记录一下我用的工具: 1:前些天写的sublime text2  2:firefox,chrome,IE(斯巴达Spartan)--ietes...
  • JackJia2015
  • JackJia2015
  • 2016年03月02日 18:37
  • 1004
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:很简单的javascript菜单效果,在ie6, firefox下测试通过,整理了下代码,贴出来。
举报原因:
原因补充:

(最多只允许输入30个字)