如何讓jQuery下拉菜單直下而不是右移？

我有一個非常簡單的菜單欄，我用jQuery做的，它的功能如預期，但我真的很喜歡子菜單彈出直接在主菜單下方，而不是在右邊，如此jsfiddle.你看到了嗎？知道我能做到這一點的任何方式？這是我第一次使用jQuery（我第一次使用Javascript），所以我有點迷路。如何讓jQuery下拉菜單直下而不是右移？

這是我的CSS，我相信這可能是問題，因爲列表只是純HTML。

#menu-bar{ 
    height:30px; 
    width: 100%; 
} 

#menu-bar > li{ 
    float:left; 
    width:195px; 
}

來源

2013-07-11 Alex Kibler

手風琴是否適合您？ http://jsfiddle.net/kgjac/6/ – defaultNINJA

手風琴絕對適合我。有什麼辦法可以讓它默認打開嗎？比如，文件菜單會自動打開，我絕對不希望它自動打開，我希望在用戶點擊時關閉它（如常規菜單欄） –

像這樣：http：// jsfiddle .net/kgjac/14/ – defaultNINJA

你可以通過一些選項，你的子菜單應該出現在哪裏。就像這樣：

$("#menu-bar").menu({ position: { my: "left top", at: "left bottom" } });

更多關於這個話題：http://api.jqueryui.com/menu/#option-position

來源

2013-07-11 12:52:08 Thomas

這是完美的。只要我能接受你的答案，我會的。感謝您的額外信息，我不知道爲什麼我沒有檢查它。這總是我的第一個勝地。 –

不客氣。有點奇怪，這不包括在jqueryui示例頁面中，因爲許多人肯定希望這樣做。 – Thomas

是的，當然。我真的沒有意識到API文檔有多棒。我會爲它加書籤。我只是假設示例頁面顯示了我需要知道的一切。 –

我建議使用superfish菜單。 http://users.tpg.com.au/j_birch/plugins/superfish/#a

來源

2013-07-11 12:48:24 Neeraj

有沒有什麼辦法可以給我發送不同的鏈接呢？出於某種原因，該鏈接在我的工作防火牆上被阻止。 –

https://github.com/joeldbirch/superfish – Neeraj

查看相同的jquery插件的演示哇，看起來非常好。儘管我不想繼續添加插件到我的網站。我試圖儘可能保持輕量級。謝謝你的建議。 nnnnn和@Thomas在不需要安裝其他插件的情況下就知道了。 –

事情是這樣的：

$("#menu-bar").menu({ position: { my: "left top", at: "left bottom+2" } });

演示：http://jsfiddle.net/kgjac/10/

也就是說，通過如.menu() documentation指定設置position option 。

嘗試使用+2零件：您可以通過更改此號碼或將其完全移出（和+）來調整位置。

來源

2013-07-11 12:52:14 nnnnnn

$("#menu-bar").menu({position: {my: "left top", at: "left bottom"}});

或調整位置到任何你想要的位置。

來源

2013-07-11 12:54:19 Psych0Mantis

如何讓jQuery下拉菜單直下而不是右移？

回答

相關問題