菜單過渡/動畫

好吧，我有一個菜單的想法，但我真的不知道如何實現它或需要什麼，我對網頁設計很陌生。所以基本上，當在菜單上突出顯示某個項目我想滑塊以突出顯示的項目下移到像這樣菜單過渡/動畫

http://s7.postimage.org/qa3vfh797/purple.gif

所以，當我在頁面上我想是涉及菜單選項卡下的滑塊這一頁。當我將鼠標懸停在菜單中的某個項目上時，滑塊將從當前選項卡滑動至高亮顯示的一個。當用戶取消突出顯示時，它將返回到與用戶所在頁面相關的選項卡。任何幫助將不勝感激

來源

2013-01-22 Tk Breen

您有幾個選項。我會建議開始瞭解JavaScript。特別是學習jQuery，看看你在那裏的幾個選擇http://jqueryui.com/ – captainrad

我會爲您提供的jsfiddle例子，但沒有必要推倒重來。

jQuery的MagicLine： Article & Demo

如果這不是你想去的方向，那麼我建議使用jQuery UI，特別是標籤部分：here。確保使用帶有Themeroller的jQueryUI，它允許用戶自定義。

希望這可以幫助，讓我知道如果您有任何問題！

來源

2013-01-22 21:30:43 Dom

我不會給你完整的代碼，但我會指出你在正確的方向與一些關鍵字來搜索。您需要的是爲將在菜單項下滑動的欄創建一個。將每個菜單項封裝在一個div中，併爲它們中的每一個實現onMouseOver事件。然後在onMouseOver事件中，您需要將div從其當前位置移動到此菜單div下，即將slider div的offsetLeft更改爲菜單div的offsetLeft值（如果使用jquery，則提供方便的函數來獲取此值）。現在改變div的位置將直接移動到那裏。如果你想在「幻燈片」動畫中完成它，那麼你需要逐步移動它，比如說每次增加5 px。爲此使用setTimeOut函數。創建一個函數，以5 px的增量更改滑塊div的offsetLeft值，並一次又一次地調用該函數，直到它通過setTimeout函數到達目的地。 setTimeout基本上是一個定時器，它會在指定的時間後調用一個函數。

這應該給你足夠的上谷歌搜索:)

來源

2013-01-22 19:11:35 AC1

感謝幫助！我把div標籤移動到菜單項上時，我只需要將它設置到我的menuItem div的x位置，但Dom給了我我需要的東西，但是我非常感謝幫助！ –

是的，我看到了Dom的評論，我想這正是你需要的。我只是試圖解釋它，如果你必須建立，而不使用任何庫:)。 – AC1

菜單過渡/動畫

回答

相關問題