在您登录后的许多站点中,右上角都有一个帐户下拉菜单。将鼠标悬停在那里或单击指向下方的箭头会出现一个下拉列表,其中列出了用户可以执行的不同操作。
我想要像 living social 上的那种效果或 grooveshark
有没有我可以使用的模板/骨架,我也愿意为这样的东西付费,但我知道的唯一资源是,codecanyon没有向我展示任何接近我想要的东西。
有人可以在 jsbin 上推荐资源或展示框架吗?
最佳答案
您可以通过在 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();"
关于jquery - 登录后导航中的下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7265395/