使用层显示实现下拉菜单的显示。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyDropDownMenu.aspx.cs" Inherits="MyDropDownMenu" %>
<!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 runat="server">
<title>Untitled Page</title>
<link rel="StyleSheet" type="text/css" href="DropDown.css"/>
<script language="javascript" type="text/javascript">
// <!CDATA[
// 取得对象在网页中的绝对位置。
function getAbsPosition(obj){
var r = {
left: obj.offsetLeft,
top: obj.offsetTop
};
r.left=obj.offsetLeft;
r.top=obj.offsetTop;
if (obj.offsetParent) {
var tmp = getAbsPosition(obj.offsetParent);
r.left += tmp.left;
r.top += tmp.top;
}
return r;
}
// 获得菜单的位置，将其显示出来。
function showMenu(id,parentID){
var ref = document.getElementById(id);
var menu = document.getElementById(parentID);
var pos = getAbsPosition(menu);
closeMenus();
ref.runtimeStyle.left = pos.left;
ref.runtimeStyle.top = pos.top + menu.offsetHeight;
ref.style.visibility = "visible"; // 显示下拉菜单
}
// 隐藏菜单层
function hideMenu(id){
var ref = document.getElementById(id);
ref.style.visibility = "hidden"; // 隐藏下拉菜单
}
// 关闭所有已经显示的下拉子菜单。
function closeMenus()
{
// 因为第一级菜单全部都是在表中的tr内，所以，可以根据表中tr内的子元素，也就是第一层td的个数
// 判断到底有多少个菜单。
// 这里所有菜单层的命名都是有规律的。这个是做的比较死的地方，不过带来了方便性。比如 "MenuDiv"+i
var mainMenu = document.getElementById("allMenu");
var menus = mainMenu.children;
var count = menus.length;
for(var i=1;i<=count;i++)
{
var tmpMenu = document.getElementById("MenuDiv"+i);
if(tmpMenu != null)
{
tmpMenu.style.visibility = "hidden";
}
}
}
// ]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table cellpadding="0" cellspacing="0" border="1">
<tr id="allMenu">
<td>
<a id="Menu1" class="MenuClass" href="javascript:void(0);" onclick="showMenu('MenuDiv1','Menu1');">Menu1</a>
<div id="MenuDiv1" onclick="hideMenu('MenuDiv1')" style="left: 433px; top: 36px">
<a class="menu" href="#">国内新闻</a><br/>
<a class="menu" href="#">国际新闻</a><br/>
<a class="menu" href="#">本市新闻</a><br/>
</div>
</td>
<td>
<a id="Menu2" class="MenuClass" href="javascript:void(0);" onclick="showMenu('MenuDiv2','Menu2');">Menu2</a>
<div id="MenuDiv2" onclick="hideMenu('MenuDiv2')">
<table cellpadding="0" cellspacing="3" border="0">
<tr>
<td><a class="menu" href="Default.aspx">乒乓球</a></td>
</tr>
<tr>
<td><a class="menu" href="#">篮 球</a></td>
</tr>
<tr>
<td><a class="menu" href="#">足 球</a></td>
</tr>
</table>
</div>
</td>
<td>
<a id="Menu3" class="MenuClass" href="javascript:void(0);" onclick="showMenu('MenuDiv3','Menu3');">Menu3</a>
<div id="MenuDiv3" onclick="hideMenu('MenuDiv3')">
<table cellpadding="0" cellspacing="3" border="0">
<tr>
<td><a class="menu" href="Default.aspx">英国</a></td>
</tr>
<tr>
<td><a class="menu" href="#">法国</a></td>
</tr>
<tr>
<td><a class="menu" href="#">意大利</a></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>aaaaa</td>
<td>bbbbb</td>
<td>ccccc</td>
</tr>
</table>
</div>
</form>
</body>
</html>
body
{
margin:0;
}
/*使用CSS样式如下。*/
.MenuClass
{
width:0;
background-color:Teal;
color:Yellow;
text-decoration:none;
}
#menu, .menu { font-family: 宋体; font-size:10pt; color:black;
text-decoration:none;
}/* 下拉菜单链接样式 */
#MenuDiv1
{
margin:0;
position:absolute;
border-style:solid;
border-width:1px;
padding: 5px;
background-color:yellow;
width:56px;
color: black;
font-size: 12pt;
visibility:hidden;
}
#MenuDiv2,#MenuDiv3
{
margin:0;
position:absolute;
border-style:solid;
border-width:1px;
padding: 5px;
background-color:orange;
width:50px;
color: black;
font-size: 12pt;
visibility:hidden;
}