登录后在导航中下拉菜单

Question

在登录后的很多网站中，右上角有一个帐户下拉菜单。将鼠标悬停在那里或单击下面指出的箭头，会出现一个下拉列表，其中列出了用户可以采取的不同操作。

我想在living social或grooveshark

像一个效果是有一个模板/骨骼我可以过的工作，我愿意付出这样的事情很好，但我所知道的唯一资源， codecanyon没有告诉我任何接近我想要的东西。

有人可以建议资源或在jsbin上显示一个框架？

Answer 1

您可以通过在html底部添加div来解决此问题，并且只要用户点击或悬停在帐户按钮上就可以显示它。

所以你想添加一个div菜单，并在你的html底部添加一个选项列表，就像这样。通过对HTML的底部加入它，它会自动得到适当的z-index，并显示ontop的上述所有的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();"