使用层显示实现下拉菜单的显示。

最新推荐文章于 2022-12-21 12:09:07 发布

diandian82

最新推荐文章于 2022-12-21 12:09:07 发布

阅读量1.3k

点赞数

分类专栏： Javascript 文章标签： menu class javascript function stylesheet border

本文链接：https://blog.csdn.net/diandian82/article/details/1398724

版权

Javascript 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

<%@ 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);" οnclick="showMenu('MenuDiv1','Menu1');">Menu1</a>
                    <div id="MenuDiv1" οnclick="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);" οnclick="showMenu('MenuDiv2','Menu2');">Menu2</a>
                    <div id="MenuDiv2" οnclick="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);" οnclick="showMenu('MenuDiv3','Menu3');">Menu3</a>
                    <div id="MenuDiv3" οnclick="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;
}

diandian82

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用层显示实现下拉菜单的显示。

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml" > Untitled Page // // 取得对象在网页中的绝对位置。function getAbsPosition(obj){ var r = { left: obj.offse
复制链接

扫一扫