Question

为了节省空间，我想将网页模板顶部的用户名和logut按钮合并为一个链接。用户名将是可见的，当您将鼠标悬停在堆栈溢出上或点击为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>

Answer 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，以便它占用“username”div的整个宽度。让我知道这是怎么回事！

Answer 2

这是它跳起来的版本。如果你把位置：绝对;在样式标记中，菜单向右延伸了一个单元格，超过了其他列... 。用户名 { }

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

javascript / php简单的下拉菜单注销

2 个答案: