0

スペースを節約するために、Web テンプレートの上部にあるユーザー名とログアウト ボタンを 1 つのリンクに統合したいと考えています。ユーザー名が表示され、スタック オーバーフローのようにユーザー名にカーソルを合わせるか、gmail や fb のようにクリックすると、ログアウトするか、その他のアカウント関連の操作を行うことができます。理想的には、jquery のオーバーヘッドなしで css または javascript でこれを実行したいと考えています。

私はJavaScriptの経験が非常に浅いので、誰でも簡単なJavaScriptまたはその他の手法を推奨できますか。複雑な本格的なドロップダウン メニューは必要ありません。それは以下のようなものでなければなりませんが、以下は予測できません...ページがロードされたときにメニューを表示するなど.Thx。

<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 と同じようにスパン内で絶対配置が機能しないことです。そのため、「username」スパンを div に変更し、「box1」スパンに絶対位置を使用する必要がありました。「box1」スパンを div に変更することもできるので、「username」div の可能な幅全体を占有します。これがどうなるか教えてください！

于 2012-04-10T17:14:46.823 に答える
0

これがジャンプアップするバージョンです。あなたがポジションを置く場合：絶対; スタイルタグでは、メニューは他の列を過ぎて右にもう1つのセルを拡張します... .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 に答える