jquery - 登录后导航中的下拉菜单

Question

在您登录后的许多站点中，右上角都有一个帐户下拉菜单。将鼠标悬停在那里或单击指向下方的箭头会出现一个下拉列表，其中列出了用户可以执行的不同操作。

我想要像 living social 上的那种效果或 grooveshark

有没有我可以使用的模板/骨架，我也愿意为这样的东西付费，但我知道的唯一资源是，codecanyon没有向我展示任何接近我想要的东西。

有人可以在 jsbin 上推荐资源或展示框架吗？

Answer 1

您可以通过在 html 底部添加一个 div 来解决这个问题，并在用户点击或悬停在帐户按钮上时显示它。

所以你想像这样在你的 html 底部添加一个带有选项列表的 div 菜单。通过将它添加到您的 html 的底部，它会自动获得正确的 z-index 并显示在所有前面的 html 之上(其他所有内容)

<div id="dropdown">
  <ul>      
    <li>option 1</li>
    <li>option 2</li>
  </ul>
</div>

在您的 css 中为下拉菜单添加样式，使其绝对定位在屏幕顶部且不可见

#dropdown{
  display: none;
  postion: absolute;
  top: 20px;
 }

然后在帐户按钮上放置普通的 javascript，例如:

onclick="document.getElementById('dropdown').style.display = (el.style.display != 'none' ? 'none' : '' );"

或者像 jquery:

onclick="$('#dropdown').toggle();"