今天幫美工寫個很簡單的javascript菜單效果,在ie6, firefox下測試通過,整理了下代碼,貼出來。

來源:互聯網
上載者:User

<!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>

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.