如何使用jQuery製作此菜單效果？

Question

我在很多網站上看到過這個菜單效果，但我不知道是否有插件/教程來製作這樣的東西？ 看到這個例子： http://www.elegantthemes.com/preview/TheProfessional/

Answer 1

Lava Lamp是你的答案。

然而，你可以在這裏找到一些其他很酷的jQuery動畫菜單插件：36-eye-catching-jquery-navigation-menus

Answer 2

我想你想LavaLamp JQuery插件。

Answer 3

首先你絕對或相對定位菜單div。

菜單div有兩個子元素：一個是文本項的div（我們稱之爲Text），另一個是動畫追逐元素的div（我們稱之爲Chaser）。

將追蹤器設置爲絕對定位，並將文本設置爲相對定位。

將文本設置爲比追趕者具有更高的z-index。

對於每個文本元素，使用jquery將懸停回調綁定到它。

懸停回調錶示「找到正在懸停的元素的偏移量;告訴Chaser將其位置設置爲與該偏移量匹配」。

Answer 4

快速查看您給出的示例的源代碼，顯示它使用的是Superfish。

關於網絡的好處是一切都是開放的。找到你喜歡的東西（你已經知道了），然後看看源代碼並找出它們是如何做到的。像Firebug這樣的工具將幫助你。