登錄後在導航中下拉菜單

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();"