1. 首頁
  2. 問答
  3. 類似Facebook的頂部導航CSS和jQuery

類似Facebook的頂部導航CSS和jQuery

2012-09-26 15 views
1

我想做如下的CSS和jQuery這個新的Facebook式頂級導航。類似Facebook的頂部導航CSS和jQuery

Enter image description here

這：

Enter image description here

正如你所看到的，popbox總是選擇導航下的箭頭和popbox寬度相同。有沒有任何教程或插件來做到這一點？

來源

2012-09-26 Firz

+1

你爲什麼不檢查元素，看看他們是怎麼做的，並嘗試和複製？ – zenkaty

回答

7

jQuery Notification Menu將是最適合你的。這是一個jQuery插件添加通知氣泡和通知列表到任何菜單。

Demo image

你可以很容易地通過編輯CSS它調整到你想要的風格。

Check this demo.

來源

2012-09-26 06:35:47 Libin

+0

我試過了，但我找不到在哪裏添加通知列表 – ravisoni

0

結賬Twitter Bootstrap。他們已經爲您完成了所有酷酷的JavaScript內容。他們也得到了一個非常好的響應式基礎CSS。

來源

2012-09-26 06:26:45

0

這個關鍵很簡單。通過無序列表&的固定位置元素的正確組合，您可以輕鬆實現這一點。

  1. 對於頂部欄上，使用一個無序列表模式：http://pea.rs/navigation/horizontal-buttons
  2. 對於降下來，你有兩個選擇：
    • 您可以定位下拉菜單隱藏它，然後用jQuery取消隱藏它。
    • 或者使用一些CSS技巧將其置於頁面之外直到onHover。

樣式下拉就像稱Facebook的，你必須多做一點與CSS弄清楚如何得到正確的形狀，但不用擔心！還有一些教程/例子！

教程上 '泡點工具提示'：

總體來說，我建議How to Build a Kick-Butt CSS3 Mega Drop-Down Menu（它不會採取超過教程30分鐘到一小時完成）：

來源

2012-09-26 06:33:32

相關問題

 相關問題