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

为了节省空间，我想将web模板顶部的用户名和注销按钮合并到一个链接中。用户名将会显示出来，当你将鼠标悬停在堆栈溢出上或者点击如gmail或fb时，你可以选择注销或者做其他账户相关的事情。理想情况下，想在没有jquery开销的情况下在css或javascript中执行此操作。javascript/php简单的下拉菜单注销

任何人都可以推荐简单的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>

来源

2012-04-10 user1260310

更新 - 这应该修复“跳楼”的问题：

<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的整个可能宽度。让我知道这是怎么回事！

来源

2012-04-10 17:14:46 Ian

这接近做的。 div标签添加了一个换行符，所以我用span替换了它。用户标识是更大的顶级菜单的一部分，所以格式很好。唯一的问题是在鼠标悬停事件上，而不是注销链接下降，用户标识符（和它是跳转的一部分的整行文本）。如果它下降，下拉菜单将覆盖下面的行......但我更喜欢这个跳转的用户标识文本。任何方式来控制下拉的发生？ – user1260310 2012-04-10 18:46:38

我只是把位置：绝对; （我已经格式化了），现在它很好地下降了，但是在开始时，整行被移到了下面的列之外......猜测解决方案在于样式标记的格式化。 – user1260310 2012-04-10 18:54:07

我无法重现。你介意提供你现在的这部分HTML的内容吗？ – Ian 2012-04-10 19:01:10

这里是它跳起来的版本。如果你把位置：绝对;在风格标签菜单扩展多一个电池以往的其他列的权利...... .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-11 01:54:30 user1260310

摆放位置：相对;在外部标签和位置：相对于下拉停止跳跃。然而，菜单现在正在下降不低于链接，但在页面的最左边...似乎解决方案是在javacript格式。 – user1260310 2012-04-11 15:11:37

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

回答

相关问题