如何制作这样的导航

Question

我偶然发现了这个网站http://nathanborror.com/，并且非常喜欢他们在左侧网站上完成导航的方式。我注意到该网站正在使用jquery但没有看到任何插件。

关于如何做到这一点的任何想法？

Answer 1

他们在bootstrap.js文件中包含它，基本上它是简单的jQuery.hover()，并且嵌套了jQuery.animate()。

Answer 2

首先，将菜单设置为使用“top”，“left”和“position”css属性，因此它始终贴在左侧。然后，使用jquery在悬停时执行动画，如下所示：

$('#menu .item').hover(
      function () {
        $(this).animate({width:'toggle'},350); // end value
      }, 
      function () {
        $(this).animate({width:'toggle'},100); // start value
      }
);

Answer 3

通过查看their source code可能很容易找到答案。如果您想查看正在运行的内容，请使用Firebug。