0

为了节省空间，我想将网页模板顶部的用户名和注销按钮合并到一个链接中。用户名将可见，当您将鼠标悬停在堆栈溢出中或单击 gmail 或 fb 时，您可以选择注销或执行其他与帐户相关的操作。理想情况下，希望在没有 jquery 开销的情况下在 css 或 javascript 中执行此操作。

任何人都可以推荐简单的javascript或其他技术，因为我对javascript非常缺乏经验。不需要复杂的完整下拉菜单。它应该类似于下面，但下面是不可预测的......页面加载时显示菜单等。谢谢。

<html>
<head>
<script>
showMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'block';
    }
hideMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'none';
    }
</script>
</head>
<body>
<table>
<tr>
        <td onmouseover="showMenu()" >username</td>
    </tr>
</table>

<div id="box1" onmouseout="hideMenu()">
    <a href="logout.php">Logout</a><br>
    </div>
</body>
</html>
4

2 回答 2

1

更新 - 这应该解决“跳跃”问题：

<html>
    <head>
        <style type="text/css">
            .username {
                width: 100px;
                border: 1px solid #ff0000;
                padding: 3px;
                text-align: center;
                position: relative;
                display: inline-block;
            }

            #box1 {
                display: none;
                text-align: center;
                position: absolute;
                background-color: #ccc;
            }
        </style>

        <script>
            showMenu = function() {
                var div = document.getElementById('box1');
                div.style.display = 'block';
            }
            hideMenu = function() {
                var div = document.getElementById('box1');
                div.style.display = 'none';
            }
        </script>
</head>
<body>
    <table>
        <tr>
            <td colspan=3 align="left">
                <img src=":">
            </td>

            <td colspan=6 valign="bottom" align="right">Menu1 Menu2 Menu3 Menu4 Menu5 Menu6 Menu7
                <div class="username" onmouseover="showMenu();" onmouseout="hideMenu();">Username
                    <span id="box1">
                        <a href="logout.php">Logout</a>
                    </span>
                </div>
            </td>
        </tr>

        <tr>
            <td colspan=9>
                <hr color="red">
            </td>
        </tr>
    </table>
</body>
</html>

问题是绝对定位在跨度内的工作方式与在 div 内的工作方式不同。所以我不得不将“用户名”跨度更改为 div，并为“box1”跨度使用绝对位置。您甚至可以将“box1”跨度更改为 div，以便它占据“用户名”div 的整个宽度。让我知道这是怎么回事！

于 2012-04-10T17:14:46.823 回答
0

这是它跳起来的版本。如果你把位置：绝对; 在样式标签中，菜单在其他列之后再向右扩展一个单元格... .username { }

        #box1 {
            display: none;
        }
    </style>

    <script>
        showMenu = function() {
            var div = document.getElementById('box1');
            div.style.display = 'block';
        }
        hideMenu = function() {
            var div = document.getElementById('box1');
            div.style.display = 'none';
        }
    </script>
</head>
<body>
    <table><tr>

<td colspan=3 align="left"><img src=":"></td>
<td colspan=6 valign="bottom" align="right">Menu1 Menu2 Menu3 Menu4 Menu5 

Menu6 Menu7 <span class="username" onmouseover="showMenu();" 

onmouseout="hideMenu();">Username<span id="box1">
                        <a href="logout.php">Logout</a>
                    </span>
                </span></b></td></tr>
<tr><td colspan=9><hr color = "red"></td></tr>
</table>

</body>
</html>
于 2012-04-11T01:54:30.853 回答