菜单切换/动画

Question

好的，所以我对菜单有这个想法，但是我真的不知道如何实现菜单或需要什么，我对网页设计非常陌生。 因此，基本上，当菜单上的某个项目突出显示时，我希望滑块在突出显示的项目下移动，如下所示

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

因此，当我在页面上时，我想要与页面相关的菜单选项卡下的滑块。 当我将鼠标悬停在菜单上的某个项目上时，滑块将从当前选项卡滑动到突出显示的项目。 当用户取消突出显示它时，它将返回与用户所在页面相关的选项卡。 任何帮助将不胜感激

Answer 1

我打算为您提供一个jsfiddle示例，但无需重新发明轮子。

jQuery MagicLine： 文章和演示

如果这不是您要遵循的方向，那么我建议您使用jQuery UI ，尤其是选项卡部分： here 。 确保将jQueryUI与Themeroller结合使用，以允许用户自定义。

希望这会有所帮助，如果您有任何疑问，请通知我！

Answer 2

我不会提供完整的代码，但是会通过一些关键字向您指出正确的方向以进行搜索。 您需要为栏创建一个可在菜单项下方滑动的栏。 将每个菜单项封装在div中，并为每个菜单项实现onMouseOver事件。 然后在onMouseOver事件中，您需要将div从其当前位置移动到此菜单div下，即，将滑块div的offsetLeft更改为菜单div的offsetLeft值（如果使用jquery，它提供了方便的功能来实现此目的）。 现在，更改div的位置会将其直接移动到该位置。 如果要在“幻灯片”动画中完成，则需要逐步移动它，例如每次以5 px为增量。 为此，请使用setTimeOut函数。 创建一个函数以5 px为增量更改滑块div的offsetLeft值，并一次又一次调用此函数，直到通过setTimeout函数到达其目的地为止。 setTimeout基本上是一个计时器，它将在指定的时间后调用一个函数。

这应该给您足够的足以在Google上搜索：）